#1 - Express.js 기반 다지기

이 글은 Nomad Coder의 유튜브 클론 코딩을 본 후 복습 겸 강의 흐름을 정리해 놓은 글입니다.

1. Express로 서버 만들고 Router 맛보기

명령어

npm init (node 프로그램을 시작(initialize)하는 명령어로 package.json 파일을 생성해줌)

//app.js
const express = require('express');
const app = express();

const port = 5000;

const handleListening = () => console.log(`Listening at http://localhost:${PORT}`);
const handleHome = (req, res) => res.send("This is Home!");

app.get('/', handleHome); //라우트
app.listen(port, handleListening);

 

 

 

2. Babel과 nodemon 설치하고 설정하기

명령어

npm install @babel/node

npm install @babel/preset-env

npm install @babel/core

npm install nodemon -D

설정

.babelrc

package.json

 

처음에 강의를 들을 때는 babel에 대해 깊게 생각하지는 않았다. 그냥 자바스크립트의 최신 문법을 조금 예전버전으로 바꿔주는 거구나 했다.

 

설치하기도 귀찮고 그래서 복습할 떄는 babel을 사용하지 않고 하는 데,

node는 ES6를 지원하지 않는 건지.. ES6문법을 쓰면 오류가 났다. (브라우저에서 이해할 수 있게 예전버전으로 바꿔주는 건줄 알고있었는 데 그것뿐만 아니라 node에서도 이해를 못해서 babel을 사용했던 것이다..)

 

아래는 node에서 ES6가 왜 안되는지 검색해본 결과 알아낸 것..

NodeJS로 ES6 코드 실행하기

웹 브라우저의 경우 자바스크립트 문법을 쫒아오는 속도가 중구난방이지만, NodeJS의 경우 최신 버전을 사용한다면 거의 왠만한 ES6 문법은 도입이 되어 있습니다. 그럼에도 불구하고 본 예제처럼 NodeJS는 아직 CommonJS 기반 모듈 시스템을 사용하기 때문에 ES6의 import나 export와 같은 키워드는 디폴트로 지원되지 않고 있습니다.

 

 

아래는 babel-preset-env에 대한 설명이다.

[번역] babel-preset-env는 무엇이고 왜 필요한가?

쉽게 설명하면, 바벨은 바벨만 설치한다고 해서 예전 문법으로 컴파일 해주는 것이 아니라 어떤 문법을 바꿀지에 대한 해당 문법의 플러그인을 설치해줘야한다. 그런데 그 플러그인들을 일일히 하나씩 설치하기에는 귀찮으니까 그걸 모아놓은 것이 preset이다.

 

하지만.. 이렇게 설치를 다 해도 이것을 빠뜨리면 오류가 난다..

그것은 바로 .babelrc 파일이다. 이 파일에 ES6문법을 어떻게 컴파일 할 것인지에 대해 적어놔야 한다.

따라서, .babelrc파일을 만들고 플러그인이나 preset을 적어줘야한다. (예를 들어, preset-env를 설치했다면 아래처럼..)

// .babelrc
{
  "presets": ["@babel/preset-env"]
}

 

 

---

nodemon으로 넘어왔다.

nodemon은 vscode의 Live Server와 비슷한 기능을 한다.

Live Server가 새로고침을 하기 귀찮아서 생겼다면, nodemon은 서버를 재시작하기 귀찮아서 생겼다고 생각한다.

 

 

 

 

3. 필요한 여러 Middleware 설치하기

미들웨어는 양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 한다. - 위키백과
미들웨어는 요청과 응답의 중간에 위치하여 미들웨어라고 부른다. - https://velog.io/@smooth97/1

[ Node.js ] - Middleware

 

설치할 미들웨어

morgan - 요청에 대한 정보를 콘솔에 기록해준다.

helmet - 보안 모듈로 웹 서버 HTTP 헤더 설정을 바꿔준다.

cookie-parser - 요청된 쿠키를 쉽게 추출할 수 있도록 도와준다.

body-parser - API 요청에서 받은 body 값을 파싱하는 역할을 수행한다.

 

 

 

express 미들웨어 body-parser 모듈

굉장히 설명이 잘 되어있다..

특히 parser를 알게 됨으로써 cookie-parser와 body-parser가 더 잘 이해됬다.

가지고 있는 데이터를 내가 원하는 형태의 데이터로 ‘가공'하는 과정을 parsing 이라 하며 그 과정을 수행하는 모듈 혹은 메소드를 parser라 일컫는다.

 

import express from "express"; //바벨 덕분에 가능!!
import morgan from "morgan";
import helmet from "helmet";
import cookieParesr from "cookie-parser";
import bodyParser from "body-parser";
const app = express();

const PORT = 4000;

const handleListening = () => console.log(`Listening on: http://localhost:${PORT}`);
const handleHome = (req, res) => res.send("Hello from Home");

app.use(helmet());
app.use(cookieParesr());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(morgan("dev"));

app.get('/', handleHome);

app.listen(PORT, handleListening);

bodyParser.urlencoded({ extended: true }) 에 대한 설명
bodyParser 미들웨어의 여러 옵션 중에 하나로 false 값일 시 node.js에 기본으로 내장된 queryString, true 값일 시 따로 설치가 필요한 npm qs 라이브러리를 사용한다.
queryString 과 qs 라이브러리 둘 다 url 쿼리 스트링을 파싱해주는 같은 맥락에 있으나 qs가 추가적인 보안이 가능한 말 그대로 extended 확장된 형태이다. 기본이 true 값이니 qs 모듈을 설치하지 않는다면 아래와 같이 false 값으로 따로 설정을 해주어야 한다.

 

지금까지는 기본 개념들에 대해서 알아봤고 이제 본격적으로 굵직한 골격들을 만들어보자.

라우터와 컨트롤러를 만들어야 하는 데.. 코드는 적지 않겠다.. 귀찮..기도 하고 github에 다 있으니까..

 

혹시나 미래에 라우터와컨트롤러를 까먹었을 나를 위해서 라우터와 컨트롤러에 대해 간단히 설명한다면,,

 

라우터는 라우트들을 모아놓은 것인데..

라우트란 어떤 URL에 대한 요청이 왔을 때, 그 URL을 어떻게 처리할 것인지에 대한 것이다.

예를 들어, 제일 위의 코드블럭에서 app.get('/', handleHome);는 /으로 URL을 받았을 때, handleHome이라는 함수를 실행시키는 라우트이다.

 

컨트롤러는 라우트에서 실행부분에 들어있는 함수이다. 여기서는 handleHome함수가 컨트롤러라고 볼 수 있다.

 

router와 constrollers라는 폴더를 만들어서 수 많은 라우트와 컨트롤러를 생성해보자..

 

그리고 이 과정에서 URL이 많이 생기니까 URL을 따로 저장해놓는 routes.js라는 파일도 만들자.