16.[Node.js] Node.js와 서버 요청

1. Node.js란?

  앞선 개념읕 통해 우린 javaScript언어를 이용해 웹 페이지가 어떻게 만들어지는 지 확인했다. 이는 우리가 이제 javaScript를 활용해 네트워크 클라이언트를 구현할 수 있다는 것을 의미한다. 그리고 구현한 클라이언트가 어떻게 서버에 렌더링 되는지 역시 알 수 있었다.

<클라이언트 구축>

• Vue.js : 클라이언트 사이드 렌더링 (CSR)
• Nuxt.js : 서버 사이드 렌더링 (SSR)

  이번 시간부터는 서버를 구축 하는 방법에 대해서 배워볼 차례이다. 서버는 네트워크 애플리케이션의 작동을 제어한다. 우리의 애플리케이션에 장착된 DB를 연동하고, 사용자 인증도 진행할 뿐더러 파일을 업로드 하는 등 다양한 작동을 하게 된다. 즉, 애플리케이샨을 사용하는 사용자의 요청이 오게되면 이를 듣고 원하는 바에 대해 제공을 해주어야 한다. 그 기능을 하는 것이 서버의 역할이고, 그 중에서 우리는 JavaScript 기반의 서버 구축 플랫폼인 node.js에 대해 배워보자.

- node.js의 특징

• 내장 HTTP 서버 라이브러리를 포함하고 있어 Apache와 같은 별도의 서버 SW가 없어도 동작한다.
• 비동기 I/O 처리 방식을 따른다. (Non-blocking I/O)
• 구글이 만든 V8 엔진을 사용한다.
• npm을 통해 다양한 확장 모듈을 사용할 수 있다.
  

※ node.js 개발 환경 구축

  node.js를 위한 개발 환경을 구축 하는 방법은 다양하다. 자기가 사용하기에 편한 IDE를 이용하면 된다. 필자의 경우 Visual Studio를 활용해 개발 환경을 구축 했다.

  만약 Visual Studio를 사용한다면, 다음과 같은 방법으로 node.js를 실행 시킬 수 있다.

메뉴 > Terminal > New Terminal

- node.js 실행

node <JavaScript 파일 명>

  이 명령어를 수행한 이후 localhost에 지정된 포트번호로 URL을 입력하면 실행 가능하다.

•   http://localhost:3000/

- 종료

Ctrl + C

  이 명령어를 누르게 되면 node.js가 종료된다.

2. URL

  웹 서버는 URL을 기반으로 사용자의 요청을 분석하게 된다. 다음의 URL을 살펴보자

http://adrian0220.tistory.com:3000/203?id=HTML&page=1

- Protocal

  '//' 의 앞 부분은 프로토콜을 의미한다. 위처럼 http로 적혀있으면 이는 웹에서 사용되는 통신 방식은 프로토콜을 의미한다. 프로토콜에 대한 자세한 내용은 다음 페이지에서 확인 할 수 있다.

- Domain (Host)

  웹 서비스를 제공하느 호스트 주소를 도메인이라고 한다. URL의 도메인에 호스트를 나타내는 정보가 담겨져있다. 우리가 알고있는 구글, 네이버와 같은 사이트들이 모두 웹 호스트이다.

- Port Number

  

  호스트 뒤에 ' : ' 다음에는 웹 서버의 포트번호가 나온다. 우리가 구현하는 서버에 포트 번호를 지정할 수 있고, 해당 포트에 연결 해야만 우리가 원하는 웹 서비스를 불러 올 수 있다.

  웹 서버에서는 listen 함수를 통해 포트 넘버가 지정된다.

  포트 넘버에 대한 자세한 정보는 아래에서 확인 가능하다.

- Path

  포트 번호 뒤의 '/' 다음에는 페이지 정보가 나온다. 앞서 Nuxt.js에 존재했던 다양한 html 파일 명이 이 부분에 들어간다.

- Query String

  마지막으로 URL의 '?' 뒤에는 Query String이 들어가게 된다. 웹 페이지에서 사용하게 되는 다양한 변수에 대한 정보가 해당 구문에 들어가게 되어있다. 이 String 문을 통해 우리는 서로 변수를 주고 받을 수 있게 되는 것이다.

•   ? : Query String이 시점
•   = : 변수 선언
•   & : 변수 간 구분자

<Query String에 따른 변수 변환>

  Query String을 통해 웹 서비스에 변수를 전달 할 수 있다.

var url = require('url');

  객체 url에 url 모듈을 지정해준다.

    var _url = request.url;
    var queryData = url.parse(_url, true).query;

  사용자가 입력한 url을 _url이라는 변수에 집어 넣는다. 그리고 이를 parsing해 변수로 지정해야 한다. url를 parsing 하는 함수는 parse이고 _url과 true를 이용해 query로 만들 수 있다.

  다음과 같이 id라는 변수를 선언했다고 하자.

Query String : ?id=adrian

  그러면 아래의 변수가 adrian이라는 값을 가지게 되고, 이 변수가 사용되는 node.js 코드에 전달 될 것이다.

queryData.id

3. HTTP 모듈과 서버요청

  HTTP기반의 웹 서버를 만들기 위해 JavaScript로 개발된 기초적은 http 모듈을 구축 해야 한다. 아래의 코드를 한번 살펴보자.

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);
    console.log(__dirname + url);
    response.end(fs.readFileSync(__dirname + url));
 
});
app.listen(3000);

  위와 같은 http 객체를 선언을 해야 http 프로토콜에서 작동하는 node.js를 구축할 수 있다. 

  각각의 코드를 한번 살퍄보자.

- 모듈 호출

var http = require('http');

  require 함수는 모듈을 호출하는 데 사용된다. http 모듈을 호출 하여 http 변수 안에 저장을 할 수 있다.

- 서버 생성

var app = http.createServer(function(request,response){
    var _url = request.url;
    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200); 
});

  서버를 생상하는 함수는 createServer 이다. app라는 객체에 현재 웹 서버가 생성이 되어 있는 것이다.

  createServer 함수는 첫번째 인자로 콜백 함수를 받게된다. 해당 웹 서버에서 콜백 함수가 차지하는 부분은 다음과 같다.

function(request,response){
    var _url = request.url;
    if(_url == '/'){
        _url = '/index.html';
    }
    response.writeHead(200);
}

  콜백 함수는 2개의 인자를 갖는다. 첫 번째는 요청 객체 (request) 두 번째는 응답 객체 (response)이다.

- 서버 리스닝 

app.listen(3000);

  클라이언트의 요청을 받을 포트 번호를 지정해준다. 위의 코드는 3000번에서 오는 포트 요청을 듣겠다는 의미이다. 만약 다른 서버 객체에서 3000번의 모듈을 사용하고 있다면 오류가 발생한다. 때문에 우리가 앞서 포트 번호마다 각각의 프로토콜을 달리하는 이유도 여기에 있다. 서로 지정된 프로토콜이 아닌 다른 프로토콜을 사용하게 된다면 오류가 발생하게 되는 점이다.