effortDev

Express Core 미들웨어 설치(morgan, helmet, cookie-parser, body-parser)

1. morgan 설치

npm install morgan

node js에서 쓰는 HTTP 요청 logger 미들웨어이다. ( HTTP request logger middleware for node.js )

logging에 도움을 준다.

2. helmet 설치

npm install helmet

Helmet은 다양한 HTTP 헤더를 설정하여 Express 응용 프로그램의 보안을 유지하도록 도와준다.

(Helmet helps you secure your Express apps by setting various HTTP headers.)

보안에 도움을 준다.

3. cookie-parser 설치

npm install cookie-parser

쿠키 헤더를 파싱하고 req.cookies를 쿠키 이름으로 키가 된 객체로 채웁니다.

(Parse Cookie header and populate req.cookies with an object keyed by the cookie names.)

쿠키 사용에 도움을 준다.

4. body-parser 설치

npm install body-parser

nodejs 바디파싱 미들웨어이다. ( Node.js body parsing middleware. )

req.body 속성 아래에서 사용할 수있는 처리기보다 먼저 미들웨어에서 들어오는 request body를 파싱합니다.

(Parse incoming request bodies in a middleware before your handlers, available under the req.body property.)

body 파싱에 도움을 준다.

1. middleware란 무엇인가?

middleware는 우리가 어떤 경로로 라우팅할 때 최종 response 전에

중간에 가로채서 실행하는 함수를 말한다.

여기서 로그인 여부를 체크한다던가, 접속로그를 쌓는다는가 요청한 데이터를 반환하기 전에

필요한 과정을 거치는 것을 말한다.

2. connection 함수

우리는 express에서 홈 경로(/)로 route할때

response로 다음과 같이 html 화면에서 Hello Home 이라고 반환할수 있었다.

const handleHome = (req, res) => res.send("Hello Home");
app.get("/", handleHome);

handleHome 함수와 같이

connection 다루는 것은 reqeust, response, next를 갖는다.

총 인자를 3개를 갖지만 위에서 req,res 인자 2개만 사용한 이유는 next 인자를 쓰지 않을 것이고

response로 반환하기 때문에 next가 필요없는 인자이고

다음으로 넘길 함수가 없기 떄문에 3번쨰 인자를 생략한 것이다.

connection을 다루는 함수는 아래와 같이 3개의 인자(req, res, next)를 가진다.

const handleHome = (req, res, next) => res.send("Hello Home");

미들웨어로 중간에서 처리하기 원한다면 다음과 같이

라우팅 할 경로와 response할 함수 사이에 미들웨어로 처리를 원하는 함수를 명시하면 된다.

( app.get("/", betweenHome, handleHome); )

const handleHome = (req, res, next) => res.send("Hello Home");

const betweenHome = (req, res, next) => {
    console.log("between");
    next();
}

app.get("/", betweenHome, handleHome);

위 소스를 보면 홈경로로 들어왔을때 betweenHome 함수가 middleware가 되고

console.log를 찍고 next()를 통해 handleHome 함수로 가게된다.

handleHome 에서 response인 Hello Home을 화면에 반환하고 종료된다.

next()는 다음으로 진행할 수 있게 도와준다.

만약 middleware가 있고 next()가 없다면 화면은 계속 loading상태가 된다.

middleware를 중간에 여러개 놓을수 있어서 express서버는 양파와 같다.

middleware를 통해 유저의 로그인 여부 확인, 로그를 쌓을수도 있다.

import express from "express";
const app = express();
const PORT = 5000;

const handleListen = () => console.log(`http:localhost:${PORT} Server OPEN`);
const handleDefault = (req, res) => res.send("Hello HOME");
const handleJoin = (req, res) => res.send("Welcome JOIN");

const middleware1 = (req, res, next) => {
    console.log("middleware1");
    next();
}

const middleware2 = (req, res, next) => {
    console.log("middleware2");
    next();
}

app.get('/', middleware1, middleware2, handleDefault);
app.get('/join', handleJoin);

app.listen(PORT, handleListen);

하지만 middleware를 여러개 설정하고 여기저기서 쓰게 된다면

라우팅 할 경로 모두( /, /main/, /member ... )에 필요한 미들웨어 함수를 중간중간에 명시해줘하므로 어려움이 생긴다.

(/경로, /join 경로에도 미들웨어를 설정해줘야한다.)

그래서 middleware를 globally 하게 사용할 수도 있다.

3. globally middleware 사용

import express from "express";
const app = express();
const PORT = 5000;

const handleListen = () => console.log(`http:localhost:${PORT} Server OPEN`);
const handleDefault = (req, res) => res.send("Hello HOME");
const handleJoin = (req, res) => res.send("Welcome JOIN");

const middleware1 = (req, res, next) => {
    console.log("middleware1");
    next();
}

const middleware2 = (req, res, next) => {
    console.log("middleware2");
    next();
}

app.use(middleware1);
app.use(middleware2);
app.get('/', handleDefault);
app.get('/join', handleJoin);

app.listen(PORT, handleListen);

app.use()를 사용하면 전역적으로 미들웨어를 실행할 수 있다.(top to bottom 실행으로 순서 중요)

홈 경로(/), /join경로에 접근 시 미들웨어 함수부터 실행되고(middleware1 실행, middleware2 실행) 처리한 다음 response를 반환한다.

1. babel 이란?

js es6 최신문법을 사용해도 예전 문법으로 바꿔주는 역할을 한다.

1.1 babel 설치

npm install @babel/node

npm install @babel/preset-env

npm install @babel/core

1.2 .babelrc 파일 생성, index.js 및 package.json 수정

- .babelrc 파일 생성 후 내용 추가

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

- index.js 수정

// const express = require('express');
import express from "express";

- package.json 수정

  "scripts": {
    "start": "babel-node index.js"
  }

- 설치 후 재시작

npm start

2. nodemon이란?

nodemon이란 변경사항이 발생시 서버를 자동으로 껏다 켜주는 역할을 한다.

2.1 nodemon 설치

- nodemon 설치

npm install nodemon -D

- 설치가 완료되면 package.json 파일에 nodemon이 추가된다.

  "devDependencies": {
    "nodemon": "^1.19.0"
  }

2.2 .package.json 수정

- 설치완료 후 package.json 파일을 수정한다.

  "scripts": {
    "start": "nodemon --exec babel-node index.js"
  },

- 설치 후 재시작

npm start

- 잘 설치 되었는지 확인 하려면 서버 index.js를 재저장 하면 자동으로 서버를 껐다 켜주는것을 반복한다.

1. node js

자바스크립트는 웹브라우저 프론트에서 꼭 필요한 언어였고, 웹브라우저에 종속적이었다.

웹에 종속적이었던 자바스크립트를 분리하여 실행가능하게 한 것이 nodejs이다.

nodejs는 js runner이다.

자바스크립트를 실행하는 언어이고 자바스크립트 명령이 실행된다.

다음과 같이 nodejs를 설치하고

cmd창에서 node를 치고

console.log('hello'); 를 입력하면

웹브라우저에서 쓰던 js 문법인 console.log 메세지가 나타난다.

2. npm (node package manager)

그럼 node js를 깔고 node js 프로젝트를 시작하려면 어떻게 해야할까?

node js를 설치하면 정말 가장 가볍게 기본적으로 필요한 구성만 깔리게 된다.

( 내가 쓰지않더라도 필요할지도 모르는? 다 구성되어 있는 모든 것이 깔리지 않는다.)

그리고 nodejs를 깔면서 npm이라는 것이 같이 깔리게 된다.

( 너는 npm이라는것을 이용해서 필요한것을 불러오고 받아라~ nodejs는 빈깡통일 뿐이다.)

아 그럼 내가 nodejs를 이용해서 

내가 필요한 것만 선택적으로 npm을 통해 install하면 되는구나

그럼 nodejs 프로젝트를 시작할 폴더를 만들고(mkdir npmTest)

이동한다음(cd npmTest)

$ npm init

npm init 명령을 입력한다.

여러가지를 물어보는데 입력하지않고 기본값만 enter 치며 넘어간다.

y까지 입력하면 package.json이 생성된다.

package.json 파일을 편하게 보고 싶으니 VSC( Visual Studio Code )를 깔자.

$ code .

code . 명령을 치면 해당 위치의 프로젝트 폴더가 VSC로 열리게 된다.

package.json 파일은 초기 입력한 값에 따라 다를 수 있다.

이 파일을 통해 기본 설정값을 바꿀수 있고 프로젝트에 필요한 파일도 지정할 수 있다.

다음은 index.js 파일을 하나 만들고 console.log('hi index'); 를 입력 후 저장한다.

터미널에서 node index.js를 입력해본다.

hi index 가 나오면 성공이다.

3. express란?

nodejs라는 빈 깡통에 내가 필요로 한 것들을 채워넣을 것이다.

express는 node js를 설치하고 

서버를 띄우기 위해 사용하는 자바스크립트 프레임워크이다.

$ npm install express

npm install express명렁을 입력해 express를 설치한다.

설치가 끝나면 node_modules폴더와 package-lock.json 파일이 생성된다.

이 파일들은 express를 설치하며 가져온 파일들이다.

또한 package.json 파일을 열어보면 dependencies에 express 버전이 나타날 것 이다.

express 설치가 완료되었으니 express 서버를 띄울 차례다.

index.js에 다음내용을 입력 후 저장한다.

위에 내용은 require는 express가 필요한데 받아오고 없으면 node_modules에서 찾아서 가져와.

express 가져온걸 app 으로 담고 app의 포트와 함수를 지정해서 함수가 실행되면 console.log를 찍을거야. 이다.

node index.js 를 입력했을 시 다음과 같이 나오면 성공이다.

하지만 http://localhost:5000 을 입력하면 Cannot GET / 이 떨어진다.

우리가 포트로 서버를 열긴했지만 http://localhost:5000/ 

경로에 맞게 바인딩 된 어떤 데이터가 없기 때문이다.

기본경로는 '/' 이므로 index.js에 다음을 추가해준다.

그리고 node index.js 명령을 통해 서버를 껐다 다시 켜면 hello가 나오게 된다.

소스검사를 해보면 hello는 html 태그 안의 body 태그 안의 text로 들어갔다.

현재는 res.send('hello'); 를 넣었지만 나중에 경로에 따른 구조적인 html파일을 넣게 된다.

index.js 전체 소스

4. npm start

우리는 그동안 node index.js라고 node 명령에 js파일명을 입력하여 실행하였다.

하지만 js파일이 많아지고 이름도 달라진다면 처음 프로젝트 파일을 받아 구동하려는 사람에게

어려움이 있을 것이다.

js파일명을 모르더라도 실행할수 있게 npm start로 실행할 파일을 지정할 수 있다.

처음 프로젝트 파일을 받아 구동하려는 사람에게도 npm start 명령 하나만으로 

프로젝트를 띄울수 있는 것이다.

package.json 파일을 열어 다음과 같이 수정하고 저장한다.

"scripts" : { "start" : node index.js" } 부분이 수정 된 것이다.

서버를 다시 껐다 킨다. 

킬때는 node index.js 가 아닌 npm start를 사용한다.

$ npm start

npm start 명령을 통해 구동이 잘 되는 것을 확인할 수 있다.

5. git에 올리기, .gitignore 생성

git init을 하면 파일올려야 할 갯수가 320개 까지 나타나는 것을 확인한다.

express를 설치하며 받은 node_modules, package-lock.json을 올리지 않아도 된다.

우리는 index.js, package.json, 그리고 생성할 .gitignore 파일 총 3개만 올리면 된다.

.gitignore 파일을 만든다.

그리고 우리가 올릴 필요 없는 node_modules, package-lock.json을 추가한다.

그러면 올릴파일은 총 3개가 나타난다.

추가적으로 .gitignore nodejs를 구글링하면

nodejs 프로젝트에 올릴필요없는 기본설정 파일을 확인할 수 있다.

( https://github.com/github/gitignore/blob/master/Node.gitignore )

그 내용을 복사해서 붙여넣는다.

이제 3개 파일을 git remote repository에 올리겠다.

git repository 로 3개 파일이 올라간것을 확인 할 수 있다.

그러면 git에 올린 파일을 처음 받는 사람은 

node_modules, package-lock.json을 git에 올리지 않았으니깐

못받는거 아닌가? 라고 생각할 수 있는데 그렇지 않다.

package.json에 설치할 파일들이 모두 명시 되어 있으므로 

새로 소스를 받는 사람은

$ npm install

npm install 명령 하나로 프로젝트에 필요한 파일을 모두 받을 수 있다.