node.js설치방법과 node.js를 이용해서 웹서버만들기

이번 시간부터는 node.js를 설치해서 사용하는 방법에 대해 포스팅하겠습니다.

 

우선 node.js를 설치부터 합니다. 제가 지금 컴퓨터가 window10이기 때문에 

window10을 기준으로 설명드리겠습니다.

 

node.js

 

설치방법은 간단합니다.

 

https://nodejs.org/en/

Node.js

이사이트에 접속을 해서 다운로드하시면 됩니다.

 

사이트에 접속하시면 첫화면이 이렇게 되어있을 거예요.

 

첫화면

좌측은 최신 버전이지만 개발 공부를 목적으로는 굳이 최신 버전을 설치할 필요가 없습니다.

안정성면에서 아직 다듬어지지 않았기 때문이죠.

따라서 예제를 위해서는 좌측에 있는 버전을 설치하시면 됩니다.

 

특별한 설정이 없으면 next를 눌러서 넘어가도록 합니다.

 

체크박스에 체크해주시고 넘어가시면 됩니다.

 

그다음은 어디 설치할지를 물어보는데 기본 경로는 c드라이브에 node.js폴더가 생성되면서 설치가 됩니다.

 

기본적으로 node.js를 설치하면 밑에 있는 패키지 매니저도 같이 설치되고 path에 기본 경로가 추가됩니다.

next 해서 넘어가시면 됩니다.

 

이렇게 하면

이 창이 뜨면서 설치가 마무리됩니다.

 

설치가 제대로 되었는지 확인하겠습니다.

윈도 검색창에 cmd라고 검색하셔도 되고 window키 + r을 누른 다음 cmd를 입력하셔도 됩니다.

 

그러면 기본 창이 나오는데 여기서 node (띄우고) -v를 누르시면 현재 설치한 버전이 뜹니다.

 

이번 포스팅은 설치와 기본 웹서버 구축까지 할 예정이기 때문에 

프로그램 도구를 같이 켜보도록 하겠습니다.

제가 사용할 도구는 atom입니다. visual studio code도 있지만 개발 연습이기 때문에 따로 쓰겠습니다.

 

아톰 설치는 여기서 하시면 됩니다.

https://atom.io/

A hackable text editor for the 21st Century

아톰 설치가 완료되었다면 실행시켜주시고

그 후에 바탕화면에 node.js라는 새폴더를 하나 만들어 줍시다.

만들었다면 

https://github.com/web-n/web1_html_internet

web-n/web1_html_internet

여기에 접속하셔서 

 

download zip을 해서 압축을 풀어줍니다. 방금 생성하셨던 node.js폴더에 푸시면 됩니다.

그러면 보기와 같은 화면이 됩니다.

정확히들어온 모습

자 이제 기본 준비는 끝났습니다.

 

그럼 아까 설치했던 명령 프롬포트의 주소를 node.js로 바꿔봅시다. 

기본적으로 설치가 되어있는 장소로 가서 다시 바탕화면의 node.js의 경로로 바꾸는 작업입니다.

화면을 먼저 보시죠.

 

위처럼 주소를 긁어줍시다.

그다음에 명령 프롬포트로 가서 명령어 앞에 주소를 바꾼다는 cd를 쓰고 스페이스바 마우스 오른쪽 버튼을 누르면

복사했던 주소가 입력이 됩니다. 

 

이러면 끝입니다.

 

이제 atom에서 node.js폴더 안에 main.js라는 새 파일을 하나 만들어 줍시다.

그다음에 제가 준비한 코드를 불어넣기 하시면 됩니다.

 

var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
    var url = request.url;
    if(request.url == '/'){
      url = '/index.html';
    }
    if(request.url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + url));

});
app.listen(3000);

 

 

이 코드 들은 뒤에 제가 따로 포스팅하면서 설명드리겠습니다.

오늘은 그냥 설치하고 웹서버가 어떻게 서버로 동작하는지에 대해서만 알려드리겠습니다.

 

복붙을 하신 뒤에 코드를 하나 더 추가시켜줍니다.

 

  response.writeHead(200);
    console.log(__dirname + url);
  response.end(fs.readFileSync(__dirname + url));

console.log(__dirname + url); 이것만 추가시켜주면 됩니다.

 

그다음에 명령 프롬포트로 가셔서 node main.js를 치시면 됩니다.

 

그리고 웹페이지에 들어가서 개인 로컬 호스트 주소 뒤에 3000을 적어줍니다.

로컬 호스트가 뭔지 모르신다면 제 블로그의

https://crucifi.tistory.com/37?category=799884

서버를 이용해서 Ajax하기(기초)

이 글을 참조하시면 됩니다.

 

제가 시키는 대로 전부 하셨다면 밑의 사진처럼 보일 텐데요.

 

3개창을 띄우고 싶다면 window키 + 방향키

이렇게 하시면 성공입니다.

 

저 위의 사진의 상태에서 html을 누르거나 css를 누르거나, javascript를 누르면 밑의 명령 프롬프트에 기록이 남아요.

 

이렇게요.

이해 안 가더라도 그러려니 하시면 됩니다.

 

우리는 자바스크립트를 통해 우리가 읽어 들여야 하는 파일로부터 read 하는 겁니다.

그 경로에 해당하는 파일을 읽어서 위치시키는 것이고요.

우리가 어떤 코드를 적느냐에 따라 사용자에게 전송되는 데이터가 바뀐다.라고 알면 됩니다.

이것이 아파치는 할 수 없는 일입니다. 하지만 node.js는 사용자한테 전송할 데이터를 전송한다.

이것이 바로 node.js가 가지고 있는 힘이라고 할 수 있습니다.

 

오늘 제가 공부한 내용은 여기까지입니다.