[Node.js] 공식 홈페이지에 나온 코드 이해해보기

안녕하세요 brandy 입니다 :) 

 

이번 일주일동안(22.1.24~22.1.28)까지 node.js를 활용한 간단한 웹앱 제작 프로젝트를 진행해보려고 합니다.

그러기 전에 node.js에서 제공하는 코드에 대해 충분히 이해하고 넘어가고자 해서 해당 포스팅을 작성하게 되었습니다. 

 

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

 

const http = require('http');

 

HTTP는 Hyper Text Transfer Protocol로 TCP/IP기반 프로토콜이며 HTML 페이지를 전달하는데 쓰입니다. 

HTTP 모듈은 우리가 node.js를 공부하기 위한 목적인 웹 서버를 구동하기 위하여 사용되는 기본 모듈입니다. 

그래서 HTTP 모듈을 먼저 불러오는 코드부터 시작됩니다. 

 

※ const는 상수를 의미한다. 상수는 그 값이 변하지 않는다는 뜻을 가지고 있지만

여기서 var로 써줘도 무방하다 (값이 바뀔건 아니므로) 

 

※ require 함수는 모듈을 리턴한다. 

 

const hostname = '127.0.0.1';

여기서 127.0.0.1 주소가 hostname 변수에 담겼는데요, 127.0.01은 localhost 컴퓨터 네트워크에서 사용되는 루프백 호스트명으로 자신의 컴퓨터를 의미합니다. 즉 내 컴퓨터 안에 서버를 만들어서 서버를 구동시키는 것이 127.0.0.1의 역할입니다. IPv4에서 IP주소는 127.0.0.1인데요, 쉽게 보자면 이 hostname은 ip 주소와 이름이라고 생각하시면 쉽습니다.

ip 이름이 hostname, ip 주소가 127.0.0.1 

 

※ 도메인 : 해당 웹브라우저로 접속하기 위한 간단한, 쉬운 이름 

IP주소 : 도메인 IP로 접속하는데 도메인 이름에 해당하는 구체적인 주소 

 

 

const port = 3000;

port는 항구라는 뜻입니다. 항구는 배들을 정박시키는 곳이죠?

이처럼 port도 컴퓨터에는 0~65535개의 포트가 있는데, 그중에서 우리가 흔히 아는 80번 포트가 있습니다. 

예를 들어서 a.com:80 이면 0~65535개의 포트 중 80번 포트에 웹서버를 연결시켜야 하고, 이 65536개의 포트 중에서 80번을 listening하고 있는 웹서버가 클라이언트로(요청하는 쪽)부터 요청을 받아 응답을 주게 됩니다. 

 

 

const server = http.createserver((req,res) => { 

    res.status = 200; 

    res.setHeader('Content-Type','text/plain'); 

    res.end('Hello World'); 

});

중괄호 { } 안의 내용은 서버가 연결되었을 시 해야할 행동입니다. 

 

위에서 우리는 node.js를 사용하기 위해서

http 모듈을 사용할 것이며

내 컴퓨터에서 웹서버를 만든 공간의 이름을 hostname에 127.0.0.1 주소로 접근하게 하며 

3000번 포트를 리스닝 하고 있는 웹서버를 연결한다 

까지 미리 정의해주었는데, 그렇다면 이제는 웹서버를 만들어주어야겠죠? 

 

웹서버를 만들어주기 위해 http모듈에 createserver로 웹서버를 만들어줍니다. 모든 node 웹 서버 애플리케이션은 웹 서버 객체를 만들어주어야 node.js에서 웹 서버 구동이 됩니다. 이때 사용하는 것이 createServer입니다. 

 

이 서버로 오는 HTTP 요청마다 createServer에 전달된 함수가 한 번씩 호출됩니다. 

함수의 인자로 전달된 req(request)와 res(respond)가 있는데요, (여기서 인자는 함수를 호출할 때 전달되는 실제 값) 

파라미터는 함수 내부에 있는 인자로, 함수가 호출하면서 건네준 argument의 값이 변수에 담기게 된다. 

ex)plusNumber(1,2) 인자

function plusNumber(a,b) { 

    return a,b; 

} 매개변수 a,b 

 

res.status = 200;

웹서버가 생성되고 나서 응답이 출력되는데요, 응답이 200이라는 상태를 받으면 요청이 성공했다는 의미입니다. 

res 객체를 사용하는 이유는 클라이언트에 웹 페이지를 제공(response 요청에 대한 응답)을 하기 위해 response를 사용합니다. 

 

출처 https://developer.mozilla.org/ko/docs/Web/HTTP/Status/200

 

status는 상태값을 설정합니다. 즉 상태코드를 200으로 정의한다는 의미이며 

200은 서버가 요청을 성공적으로 처리했다는 뜻입니다. 

 

  res.setHeader('Content-Type', 'text/plain');

setHeader을 통해 헤더를 설정합니다. setHeader은 기존 응답 및 요청 또는 헤더에 값을 할당하거나 새 응답 및 또는 요청 헤더를 추가합니다. >> 화면에 응답할 헤더 작성 

 

text/plain은 MIME 타입인데, 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘입니다. 

즉 텍스트 형태로 문서를 전송한다는 의미입니다. 웹에서 파일의 확장자는 별 의미가 없고, 각 문서와 함께 올바른 MIME 타입을 전송하도록 서버가 정확히 설정해주는 것이 중요합니다. 

 

그 밖에도 text/html, image/jpeg, image/png,audio/mpeg 등의 MIME 타입이 존재합니다. 

text 타입의 경우 텍스트를 포함하는 모든 문서를 나타내며 이론상으로는 인간이 읽을 수 있어야 합니다. 

 

※ HTTP 헤더 설정 이유

클라이언트가 서버로 요청 혹은 서버가 클라이언트에 응답을 할 때 부가적인 정보를 담는 곳이 헤더 

자바스크립트 객체와 비슷하게 키:값 쌍을 이룬다. 

 

 res.end('Hello World');

end 를 이용하여 화면에 Hello World를 띄우기 위해 res(응답)할 내용을 작성합니다. 

 

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

위에서 const로 웹 서버를 createServer 함수를 통해 만들고, server 라는 변수 안에 넣어줬죠? 

그럼 server에 접근하여 listen()함수를 실행해주는데요, http 서버를 시작하게 하며 여기서 사용자의 요청을 받도록 대기합니다. 요청 대기가 완료되면 실행되는 콜백 함수이고, 터미널에 console.log를 이용하여 로그를 기록합니다. 

 

간단히 요약하자면, port번호 3000번을 이용하여 IP를 통해서 웹서버에 접근하는 코드입니다. 

> listen이 끝나면 callback 함수가 호출됩니다 (콜백함수에 대해서는 다음 포스팅에서 더 자세히 다루겠습니다) 

 

 

참고 https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types