[Backend] Nodejs 웹 서버 만들기

Nodejs 웹 서버 만들기

안녕하세요. 개발자 개발 까마귀입니다. 오늘은 Nodejs로 웹서버를 만들어볼 겁니다.

 

우선 바탕화면이든 어디든 폴더를 만듭니다. 그리고 cmd를 킨 후 cd로 만든 폴더로 이동합니다.

이렇게요. 그런 다음 npm init을 칩니다.

그냥 엔터만 누르시면 됩니다. 나중에 수정은 package.json으로 수정하면 됩니다. 엔터를 다 했으면 저희가 만들었던 폴더에 package.json이 생성이 됐을 겁니다.

 

이렇게 생성이 됐으면 성공입니다. 그런 다음 만든 폴더에 index.js 파일을 생성 후 코딩을 합시다. 

 

const http = require('http');

http.createServer(function(req, res) {

}).listen(8080, function() {
    console.log("8080 server start");
});

일단 저희는 내장 모듈인 http를 require를 시킵니다. 로컬 서버를 만들려면 http를 사용해야 하니깐요.

그런 다음 http.createServer 한 마디로 서버를 만들겠다는 함수입니다. 여기서 주목해야 할 거는 req, res입니다. 이거는 약어로서 req = request, res = response입니다. request는 요청이라는 뜻이고 response는 응답이라는 뜻입니다.

요청은 뭐고 응답은 뭘까요? 요청은 클라이언트가 보낸 요청에 대한 "데이터"입니다. request는 url 값과 status 값 등 많은 데이터가 담겨있습니다. 매우 유용하고요. 그 다음 response는 응답입니다. 요청을 받았으니 응답도 해줘야겠죠? 저희는 웹서버이니 응답을 해줘야 합니다. 무조건으로요 서버는 응답하는 애니깐요. req, res 알면 nodejs 50% 안 겁니다.

listen는 port번호입니다. https 같은 경우는 port 번호가 443 root 주소이고 http는 80 root 주소입니다, 나머지 port는 ":" 하고 뒤에 port번호를 붙여합니다. 한번 naver나 구글에 naver.com:443 한번 해보세요. 저희는 일단 8080으로 합니다. 

 

const http = require('http');

http.createServer(function(req, res) {
    const url = req.url;

    if(url === '/') {
        res.writeHead(200, { 'Content-Type' : 'text/plain'});
        res.end('Hello Node');
    }
}).listen(8080, function() {
    console.log("8080 server start");
});

자 이젠 서버를 만들었으니 실행을 시키기 전에 좀 더 손을 봐야 합니다. 클라이언트는 요청을 보내면 응답을 받아야 합니다. 응답을 받지 못하면 응답을 받을 때까지 "pending" 상태가 걸립니다. 계속해서 응답을 기다리는데 이게 일정 시간 동안 서버가 응답을 주지 못하면 에러가 나버립니다. 가끔씩 페이지 이동하다가 이동은 안 하고 계속 로딩만 된다면 서버에서 응답을 못하고 있기 때문이죠 그러기 때문에 저희도 그냥 실행시켜봤자 아무것도 안 나오고 로딩만 계속 돌다가 "찾을 수 없는 페이지"라고 뜰 겁니다. 그러니 응답하는 코드를 짜야합니다. 위 코드를 보면 "req.url" 클라이언트가 요청한 주소가 있습니다. http://localhost은 도메인이고 http://localhost:8080에서 8080은 port이고 http://localhost:8080/ "/"이게 req.url입니다. "/" root 주소입니다. 쉽게 말해 메인 주소죠 만약 "/"게 아닌 "/hello"로 페이지 요청을 보내면 req.url은 "/hello"입니다. 저희는 주소가 "/" 일 때 화면에 res.end를 이용해 화면에 "Hello Node"라는 걸 나오게 할 겁니다. 이렇게 코딩을 한 후 서버를 실행해보죠!

node index.js를 한 후 브라우저를 여신 후 localhost:8080을 치신 후 들어가 보세요.

 

와우~ 성공입니다. 근데 이 결과만 보고 좋아하면 안 됩니다. 우선 F12를 누른 후 네트워크 탭으로 들어가 봅시다.

 

뭔가 알 수 없는 게 많죠? 이런 거가 이젠 볼 때마다 심장이 두근두근할 정도로 봐야 합니다. 가끔 보면 재미있습니다. 여기서 저희가 볼 거는 Content-Type과 Status Code입니다. 저희가 Hello node를 하기 전에 res.writeHead(200, { 'Content-Type' : 'text/plain'}); 보셨죠? 200이 status Code이고 Content-Type이 text/plain입니다. status 200은 성공했다는 의미입니다. 그 나머지로는 404, 403, 401, 500, 503 등 엄청 많습니다. 404는 아시다시피 404 Not found 아시죠? 이런 것들을 status라고 부릅니다. 저희는 응답을 하기 전 응답하는 데이터의 status code와 Content-Type을 지정해서 보낸 겁니다.

 

const http = require('http');

http.createServer(function(req, res) {
    const url = req.url;

    if(url === '/') {
        res.writeHead(200, { 'Content-Type' : 'text/plain'});
        res.end('Hello node');
    } else if(url === '/hi') {
        res.writeHead(200, { 'Content-Type' : 'text/plain'});
        res.end('hi');
    }
}).listen(8080, function() {
    console.log("8080 server start");
});

하지만 보통 홈페이지는 url이 하나만 있지는 않죠? 저희 주소가 /hi일 때 화면에 "hi"라는 걸 코드를 짠 후에 실행을 해보세요. 실행을 할 때 ctrl + c을 하신 후 다시 node index.js를 하십시오. 

 

성공입니다! 하지만 이 코드는 큰 문제점이 있죠! 한 함수 안에 여러 가지의 기능의 코드가 들어갈 수 있고 분리가 전혀 안됩니다. 규모가 큰 프로젝트면 코드는 정말 난장판이 될 겁니다. 그래서 저희는 프레임워크를 사용해야 합니다. Java에 Spring이 있듯이 nodejs는 express나 nest.js가 있습니다. 다음에는 express를 통해서 웹서버를 만들어봅시다.

 

감사합니다.