[TIL] Day08 - 백엔드 node js 시작하기

간단 테니스 쇼핑몰 페이지 제작하면서 직접 동작시켜보자!

 

백엔드

웹서버, 웹 어플리케이션 서버, 데이터베이스 모두 백엔드

 

웹서버, 웹 어플리케이션 서버, 데이터베이스

웹서버 : 정적 페이지에 대응. 동작페이지에 대한 처리를 직접하지 않고, 웹 어플리케이션 서버에 전달한다.

정적 페이지 : 화면의 내용/데이터 등의 변동이 없는 페이지

동적 페이지 : 데이터 처리/연산을 통해 화면의 내용, 데이터가 변하는 페이지

웹 어플리케이션 서버 : 동적 페이지를 처리한다. 연산을 위해 데이터베이스와 연결되어있으며 데이터 조회, 수정, 삭체 등 처리를 요청한다.

데이터페이스 : 데이터를 통합해 효율적으로 관리하기 위핸 데이터 집합체

 

Node.js

자바스크립트가 백엔드에서 동작할 수 있게 지원하는 플랫폼이다. 프로그램을 구성할 수 있는 스크립트가 아닌, 프로그래밍 언어로써 작동하게 하는 플랫폼!

웹서버, 웹 어플리케이션 서버의 역할을 할 수 있다.

 

server.js 서버 열기

let http = require('http');

function onRequest(request, response){
    response.writeHead(200,{'Content-type': 'text/html'});
    response.writeHead('Hello Node.js');
    response.end();
}

http.createServer(onRequest).listen(8888);

터미널에서 서버를 start 하겠다는 명령어 작성해주어야 한다. `node 파일명.js`

 

http 프로토콜 약속을 nodejs 에서 제공하는 것을 require로 받아와서 http 변수에 할당한다.

onRequest 함수 : 클라이언트에게 요청이 오면, 요청과 응답을 통해서 함수를 작동시킨다.

만든 서버의 통신 함수를 괄호 안에 넣고, 클라이언트와 통신할때는 8888 포트넘버로 접속하라고 지정하는 코드

 

포트 번호 port number : 클라이언트의 요청과 응답은 웹서버가 받는다. 클라이언트에 제일 많이 소통하는 부분

HTTP 프로토콜 템플릿 : 통신 약속. head / body(웹페이지에 화면에 뿌려질 데이터 담는다)

head에는 어떤게 담기는가?

통신상태 → 200(정상), 404(못찾겠다), 500(서버가 이상하다) 등 HTTP status code가 담긴다.

응답 형태 → html이다

 

onRequest 함수 안에, 

writeHead : 프로토콜 head에 통신상태와 응답형태를 담는다. `200`, `'Content-Type' : 'text/html'`

write : body 생략, 화면에 뿌려질 데이터 담는다.

end : response 날라간다. 끝났다는 표시.

 

server.js 모듈화

index.js

let server = require('./server')

만든 server를 다른 파일에서도 동일하게 호출해서 사용할 수 있다.

 

원할때 서버를 start 구동시키는 방법

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

server.start();

js의 함수는 작성된 파일 내에서만 사용가능하기 때문에, server.js 의 start 함수를 index.js 에서 사용하려면, export 처리를 해주어야 한다.

///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.start = start;

 

url 값 전달하기

localhost : Uniform Resource Locator

URL : 인터넷에서 웹페이지가 어디있는지 위치를 알려주는, 웹페이지 주소

localhost : 내 컴퓨터 pc 주소

pathname : 8888뒤에 이어지는 경로!

 

index.js router.js server.js

이 pathname을 router가 받아서 전달하는 역할을 한다. 

route + r : 경로 + r

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

server.start(router.route);

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

exports.route = route;

///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;

index.js : 모듈 소환, 서버 기동

router.js : 경로 콘솔에 찍기. request의 url에 따라 route루트를 정해준다.

server.js :  request 받고, response 해주는 역할

흐름? index에서 server.start(router.route) 실행, 이때 router모듈의 route 함수를 전달한다. (require로 받아놓음) → server에서 받아온 route 값으로 start 함수 실행 → route(pathname)으로 함수 호출 → router모듈의 route 함수 실행으로 console에 path가 찍힌다.

 

+requestHandler.js

requestHandler.js : 라우터가 route를 분배해서 각 경로를 알려주면 경로에 따라서 요청및 처리작업을 한다.

`{}` : key:value 로 구성된 dictionary 사전 `let handle = {};` handle['key'] = value

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

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

let handle = {};
handle['/'] = main;
handle['/login'] = login;

exports.handle = handle;

index.js에서 require로 requestHandler 받아오고 `let requestHandler = require('./requestHandler'); `

start함수 요청할때 같이 동일하게 인자 전달을 해야한다. `server.start(router.route, requestHandler.handle);`

server.js 에서도 handle 인자를 받아오고 `function start(route, handle){ `

route에 handle을 같이 전달한 다음, `route(pathname, handle);`

router에서 handle 형식으로 호출한다. `handle[pathname];`

*강의에서는 handle 호출할때 함수처리되어서 () 소괄호를 꼭 넣어주라고 하던데, node.js 실행하면 `handle[pathname] dis not a function`이라는 에러문구가 뜬다..

 

response 처리를 server.js가 아닌, 다른 곳에서 하려면?  requestHandler.js에서 처리하고, response 인자를 전달해주어야한다.

`route(pathname, handle, response);` → `handle[pathname](response);` → requestHandler.js

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

    response.writeHead(200, {'Content-type': 'text/html'});
    response.write('ChaeDahee');
    response.end();
}

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

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

그!런!데! 여전히 handle이 함수가 아니라는 타입에러가 발생한다.

해결하기 위해 router.js에서 if문 typeof 로 함수인지 아닌지 처리를 해주었다.

//router.js
if(typeof handle[pathname] == 'function'){
        handle[pathname](response);
    } else{
        response.writeHead(404, {'Content-type': 'text/html'});
        response.write('찾으시는 페이지가 없습니다.');
        response.end();
    }
}

 

☑️ 배운 점

nodejs 코드 처음 짜봤는데, 조금 복잡한 자바스크립트 같은 느낌이다.

그리고 서버를 자꾸 열고 닫아야해서 꽤 불편?하다.

 

response와 request처리, 인자 전달, exports 등 학습할 것이 많은 것 같다.

이제 아무래도 복습할 강의가 점점 많아질 것 같은 느낌이다.