[웹 풀 사이클 개발 데브코스 TIL]Day8 - Node.js로 웹서버 만들기

방명규·2023년 11월 24일

TIL 교육생 데브코스 수강후기 프로그래머스

타입스크립트로 함께하는 웹 풀 사이클 개발

목록 보기

1/17

Node.js로 백엔드 서버 구축하기

백엔드는 크케 3가지로 구성된다.

-웹 서버(Web Server)
화면 내 내용이나 데이터의 변동이 없는 정적 페이지에 대응하는 역할

-웹 어플리케이션 서버(WAS)
데이터 처리/연산을 통해 화면의 내용이나 데이터가 변하는 동적 페이지를 처리하는 역 할

-데이터베이스(DB)
웹에서 사용될 데이터의 저장공간 역할

Web Server와 WAS를 분리하는 이유

기능 분리를 통해 서버의 부하 감소
물리적으로 분리해 보안 강화
여러 대의 WAS를 연결해 로드 밸런싱(작업 분산) 이용 가능
여러 언어의 웹 어플리케이션 서비스 가능

Node.js는 자바스크립트를 스크립트 언어를 넘어 프로그래밍이 가능하도록 지원해 Web Server와 WAS를 구현하고 DB와 통신해 백엔드를 구현할 수 있다.

웹 서버 만들기

//server.js
let http = require('http');

function onRequest(request, response){
    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Hello Node.js')
    response.end();
}
http.createServer(onRequest).listen(8888);

require() - 모듈 불러오는 함수

request - 클라이언트가 서버에게 전달하려는 정보나 메시지를 담는 객체 (요청)

response - 서버에서 클라이언트로 응답 메시지를 전송 시켜주는 객체 (응답)

writeHead() - http response의 header 설정하기 위한 http 모듈의 함수

response.write() - 서버가 브라우저에 response 객체를 전송하는 함수

response.end() - 응답 종료하는 함수

http.createServer() - 서버 인스턴스를 생성하는 함수

listen() - 서버 생성 후 접속 포트 할당하는 함수

이 코드를 해석하면

node의 http 모듈을 require()함수를 통해 불러온다.
onRequest() 라는 함수를 만들어 http 요청에 응답

정상적으로 접속된 http 200 인 경우 text.html 타입의 컨텐츠 'Hello Node.js'를 담아 보냄
응답 종료

createServer().listen(8888)을 통해 서버를 열어 8888번 포트와 연결, 응답을 위해 만든 onRequest 함수를 콜백함수로 전달

터미널에 명령어 node server.js 로 실행

server.js 모듈화

//server.js
let http = require('http');

function start() {
    function onRequest(request, response){
        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write('Hello Node.js')
        response.end();
    }
    http.createServer(onRequest).listen(8888);
}
exports.openServer = start;

//index.js
let server = require('./server');

server.start();

exports.[객체 이름] = [모듈 이름] - 객체에 모듈을 담아 내보내는 함수(다른페이지에서 사용가능)

같은 파일에 위치한 index.js에서 server.js파일을 import해 start 메서드를 실행할 수 있는 구조로 만들었다.

Router 분리

Route는 경로, Router는 경로를 정해주는 의미를 가진다.

웹에서 라우팅은 요청된 페이지로 안내하는 방법이다.

//server.js
let http = require('http');
let url = require('url')

function start(route) {
    function onRequest(request, response){
        let pathname = url.parse(request.url).pathname;
        route(pathname)
      
        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write('Hello Node.js')
        response.end();
    }
    http.createServer(onRequest).listen(8888);
}

exports.start = start;

//router.js
function route(pathname) {
    console.log('pathname : ' + pathname);
}

exports.route = route;

//index.js
let server = require('./server');
let router = require('./router');

server.start(router.route);

pathname 은 포트번호 뒤에 오는 경로를 나타낸다

router.js 의 route() 함수를 route라는 객체에 담아 export한다.
index.js에서 start객체에 route를 전달한다.
server.js 에서 url.parse(request.url).pathname을 통해 url을 받아올 수 있게 설정

서버를 실행 시킨뒤 url 경로 뒤에 입력한 경로가 터미널에 잘 출력된다.

요청에 따라 다른 페이지 라우팅하기

//requestHandler.js
function main (response) {
    console.log('main');

    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Main page'); //body
    response.end();
}

function login (response) {
    console.log('login');

    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Login page'); //body
    response.end();
}

let handle = {}; // key:value 쌍으로 이루어진 상자긴 한데 사전같은 상자
handle['/'] = main;  // / 를 찾아오면 main 이야
handle['/login'] = login; // 예를 든거야 [] 안에 있는게 키 고  login이 값(value)

exports.handle = handle;

//server.js
let http = require('http'); // ()안에 있는 모듈 가져오는 require(필요하다)함수
let url = require('url');
//const { route } = require('../router');


function start(route, handle) {
    function onRequest(request, response) { // request요구 response응답
        let pathname = url.parse(request.url).pathname; // pathname은 8888뒤에 오는 경로를 나타낸다.
        //parse 는 문자열 캣치
        route(pathname, handle, response); //루트한테 패쓰네임 전달        
    }
    
    http.createServer(onRequest).listen(8888); //localhost:8888   8888은 포트번호
}

exports.start = start;  // 함수 만들면 안에 코드 들은 함수 안에서만 작동하는데 이 코드 써주면 다른 페이지에서도 사용 가능

//라우터  어디로갈지 경로를 정해주는 애

//router.js
function route(pathname, handle, response) {  // route 경로 인데 여기에 r 만 붙이면 router 가 된다 길찾아주는 애
    console.log('pathname :' + pathname);

    if(typeof handle[pathname] == 'function'){
        handle[pathname](response);
    }else{
        response.writeHead(404, {'Content-Type' : 'text/html'});
        response.write('Not Found'); //body
        response.end();
    }
}
exports.route = route;

//index.js
let server = require('./server'); // ./ 는 같은 폴더에 있는 이라는 뜻    이게 모듈화 과정이야 아까 server.js 에는 http라는 모듈을 불러오듯이 이번엔 내가 만든 거 가져오는거
//index.js 에서 server.js 를 호출해서 사용
let router = require('./router');

let requestHandler = require('./requestHandler');

server.start(router.route, requestHandler.handle);