[유튜브 클론코딩] 2.7 Express Core: Middlewares part. 2

2.7 Express Core: Middlewares part. 2

Morgan

• logging에 도움을 주는 미들웨어
• 로깅(logging): 무슨 일이 어디서 일어났는지를 기록하는 것
• 설치방법 : 콘솔창에 npm install morgan
• import 하기: index.js 상단에 import 해준다.

import morgan from "morgan";

아까 만들었던 middleware는 지워준다.

 

app.use(morgan("tiny"));

 

이렇게 실행했을 때 profile로 접속하면 로깅 기능을 갖게 된 것을 볼 수가 있다.

이제 어떤 접속(GET)인지 정보를 알 수 있고 어디에 접속하는지 알 수 있다.

• morgan의 인자로 쓸 수 있는 것들
• "tiny"
• "combined"
• "common"
• "dev" → 우리가 사용할 것

우리는 "dev"를 사용할 것이므로 코드를 수정해준다.

 

Helmet

• node.js 앱의 보안에 도움이 되는 미들웨어
• Helmet 설치: npm install helmet
• Helmet import하기 : 상단에 import helmet from "helmet";
• Helmet 사용하기 : app.use(helmet());
• 별 건 없고 그냥 보안에 도움되는 것이다.

 

가끔은 middleware가 연결을 끊을 수도 있다

const middleware = (req, res, next) => {

    res.send("not happening");

}

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

• 만약 미들웨어가 res.send를 실행하는 코드가 있다면 연결을 끊을 수도 있다. (next 함수대신에)

 

Cookie Parser/Body Parser

• 둘 다 express의 미들웨어로 cookie와 body를 다루는 것을 돕는다
• 누군가 form을 채워서 너에게 전송한다면 이 form은 서버에 의해서 받아져야만 한다.

       만약 내가 이름과 비밀번호를 입력하고 전송했다면 서버에 의해 받아져야만 한다.

       이 경우에 지금 하려고 하는 것은 form을 받았을 때 그 데이터를 갖고 있는 request object에 접근할 수 있기를 원한다.

         → body parser 설치

• npm install body-parser / npm install cookie-parser로 각각 설치한다.
• body-parser: body로부터 정보를 얻을 수 있게 해준다.
• cookie-parser: cookie에 유저 정보를 저장한다.
• body-parser와 cookie-parser 모두 import 해준다.
• app.use로 둘다 use 해준다.
• 이 때, body-parser에는 정의해야할 옵션이 있다. 서버가 우리가 무엇을 전송하는지 알 수 있어야 하기 때문
• 예를 들어 만약 json을 전송했다면 서버가 json을 이해하길 바래야 할 것이다.
• 우리가 일반적인 html form을 전송한다면 서버가 urlencoded라는 걸 이해하길 바래야할 것이다.
• 이게 서버가 유저로부터 받은 데이터를 이해하는 방법이다.

import express from "express";
import morgan from "morgan";
import helmet from "helmet";
import cookieParser 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!!');

const handleProfile = (req,res) => res.send("You are on my profile");

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

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


app.get("/", handleHome);
app.get("/profile",handleProfile);
app.listen(PORT, handleListening);

▲ index.js