[Node.js] Node.js로 배우는 백엔드 기초

🔙 백엔드

웹의 기본구성 요소 중 하나인 백엔드 과연 백엔드가 뭘까요?
쉽게 말해 백엔드는 뒷단입니다. 사용자가 보이지 않는 서버같은 것을 구축하는 환경이라고도 할 수 있어요.
사용자가 입력하는 프론트엔드가 넘겨준 모든 정보를 저장하고 전달하는 역할을 합니다.

🏗️ 백엔드 구조

출처

🌐 웹서버
웹 서버는 정적 페이지에 대응합니다. 동적 페이지에 대한 처리는 직접하지 않고, Web Application 서버에게 전달합니다.

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

🌐 웹 어플리케이션 서버
동적 페이지에 대응합니다. 필요한 데이터 연산을 위해 데이터베이스와 연결되어있으며, 데이터 조회/수정/삭제 에 대한 처리를 요청합니다.

서버 파헤치기 🤗

아까 썼던 사진 재탕
1. 포트번호 : 클라이언트와 Web Server가 대화하고 싶다면 같은 주파수를 맞추어야한다.
( a.k.a 라디오 )
위의 사진을 보면 Client의 요청은 무조건 Web Server가 받는다.
W(eb) A(pplication) S(erver) / DB가 열심히 복작복작 일을 하고 Web Server에게 주면 웹서버가 최종적으로 클라이언트에게 줍니다.
2. HTTP 프로토콜 템플릿

• head: 통신 상태가 어떤지 알려줌
  • 200: 정상
  • 404 : 클라이언트가 원하는 걸 못찾겠다~
  • 500 : 서버가 아프다(이상하다)
    → 이 숫자들을 HTTP (status) code 라고 부른다.
• 응답이 어떤 형태인지를 적어준다.

💁 백엔드에는 어떤 언어를쓰지?

프론트엔드에는 JavaScript / Vue.js / React.js 등등을 사용하는걸로 알고있습니다. 그러나 백엔드는 어떤 언어가 존재할까요?

백엔드에는

• Java(Spring)
• Node.js(express)
• Go
  등등의 언어가 존재합니다.

그 중에서도 오늘은 Node.js를 사용해서 기초적인 웹서버를 구축해보고자 합니다.

👾 Node.js 소개

Javascript를 스크립트 언어 그 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼입니다.
우리는 흔히 Javascript를 프론트엔드에서 사용하는 주 언어라고만 생각했는데 이제는 백엔드까지 구현할 수있는 아주 멋진언어입니다.

여기서 플랫폼 이란 특정언어를 뛰어놀 수 있게 해주는 운동장 역할입니다.

Node.js를 해당 웹 페이지 가서 설치하시면됩니다!
설치과정을 포함시키지 않은 이유는 정말 다음 - 다음 만 누르면 되기 때문..

Node.js로 웹서버 만들기

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

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

//실행방법
//node server.js(파일명)

저도 처음이라 하나하나 분해해보면서 이해해보도록하겠습니다!

• require('http') : require은 js가 기본적으로 가지고 있는 모듈입니다.
• response.writeHead() : 응답에 대한 Header를 작성하는 부분입니다.
  • 첫 매개변수 : 응답코드
  • 두번째 매개변수 : 헤더에 들어갈 내용
• response.write() : 응답의 body를 작성하는 부분입니다. 해당 함수 내에서는 문자열도 보낼 수 있고, 버퍼도 보낼 수 있습니다.
• response.end() : 응답을 종료하는 메소드입니다. 만약 존재하는 매개변수가 있다면 해당 매개변수까지만 실행한 후 응답을 종료시킵니다.
• listen() : 어떤 포트에 열게될 것인지와, 포트 연결이 완료된 후 실행할 콜백함수를 작성합니다.

내가 만든 서버를 모듈처럼?

• Node.js가 미리 만들어둔 모듈을 우리가 require('http')와 같이 사용한 것처럼 우리가 만든 서버도 모듈처럼 다른 Javascript파일에서 사용할 수 있습니다.

//index.js
let server = require('./server); //위에서 생성된 서버를 모듈로 가지고 오겠다!

현재 이렇게만연결해주어도 node index.js 명령어를 입력하면 서버가 돌아가는 것을 확인할 수 있다.
그러나, 이는 내가 서버를 키고싶지않을때도 켜진다는 단점이 있기에 이를 처리해주는 함수를 작성해보고자한다.

파일명 잘 확인 바람

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

server.start(); // 나는 start를 사용해서 서버를 켜주겠다!

⬇️ 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);
	// localhost:8888;
}
export.start = start; //외부에서도 start함수를 쓸 수 있게 해줄게요.

🚏 여기서 잠깐 URL이란?

인터넷 상에서 웹 페이지가 어디에있는지 위치를 알려주는 주소이다.
다시말해, 웹페이지 주소라고 할 수있다.

Node.js를 사용한 URL읽기

// server.js
let http = require('http');
let url = require('url'); // 새롭게 추가.

function start(){
	function onRequest(request, response){
    	// request: 요청받음
    	let pathname = url.parse(request.url).pathname;
        //요청받은 Url의 경로 파악
        
        console.log('pathname'+pathname); //pathname확인
        
    	response.writeHead(200,{'Content-Type': 'text/html'});
    	response.write('Hello Node.js');
    	response.end();
     }
     http.createServer(onRequest).listen(8888);
	// localhost:8888;
}
export.start = start; //외부에서도 start함수를 쓸 수 있게 해줄게요.

⬇️router.js

function route(pathname){
	console.log('pathname'+pathname);
    //pathname을 server에게서부터 받아와야함.
}
export.route = route;

⬇️server.js

// 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);// (새롭게 추가) route에게 Pathname제공
        
    	response.writeHead(200,{'Content-Type': 'text/html'});
    	response.write('Hello Node.js');
    	response.end();
     }
     http.createServer(onRequest).listen(8888);
	// localhost:8888;
}
export.start = start; //외부에서도 start함수를 쓸 수 있게 해줄게요.

⬇️index.js

//index.js
let server = require('./server');
let router = require('./router'); //새롭게 추가

server.start(router.route);

각각 파일 역할 정리

• index.js : 각각의 모듈을 불러오는역할 및 서버를 구동시키는 역할
• router.js : 경로를 찾는역할 / 경로에 따른 일을 해줌
• Request의 url에 따라 루트를 정해준다. ( 어디로 갈지 )
• server.js : request / response만 한다.
  • Request를 받는다.

음..그럼 각 루트에서 할일은 누가..?

루트에서 하는일

각각의 url에 맞게 console.log() 출력

⬇️requestHandler.js
각 경로를 알려주면 해당 경로에서 어떤걸 처리해야하는지 알려주는 파일

function main(){
	console.log('main');	
}
function login(){
	console.log('login');
}
let handle = {};
handle['/'] = main;
handle['/login] = login;

exports.handle = handle;

⬇️index.js

//index.js
let server = require('./server');
let router = require('./router');
let requestHandler = require('./requestHandler);//새롭게 추가

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

⬇️server.js

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

function start(route,handle){ //매개변수로 handle을 넣어줌
	function onRequest(request, response){
    	let pathname = url.parse(request.url).pathname;
        route(pathname,handle);// (새롭게 추가) route에게 Pathname제공
        
    	response.writeHead(200,{'Content-Type': 'text/html'});
    	response.write('Hello Node.js');
    	response.end();
     }
     http.createServer(onRequest).listen(8888);
	// localhost:8888;
}
export.start = start; //외부에서도 start함수를 쓸 수 있게 해줄게요.

⬇️router.js

function route(pathname,handle){
    handle[pathname]();
}
export.route = route;