[Toy Project - Omuk] 4. 미들웨어 추가

모니터링

 

npm i nodemon -d

nodemon은 node + monitor로 노드에서의 변화를 감지하여 디렉터리 내에서 수정이 발생하면 자동으로 노드 어플리케이션을 재시작해준다. 실무가 아닌 개발 환경에서만 사용할 것이기 때문에 -d 옵션으로 devDependencies로 설치해준다.

 

package.json 파일에서 scripts 프로퍼티의 객체안에

"start": "nodemon [메인 js 파일]"

을 추가한 다음 터미널에서 npm start를 입력하여 실행할 수 있다.

 

쓰다보면 ctrl + c로 서버를 닫고 다시 npm start로 여는 것보다 자동으로 재시작해주기 때문에 상당히 편리하다.

 

 

로그

언제 어디서든 기록을 남기는 것이 좋다. 콘솔에 어떤 요청이 들어왔으며, 그에 대한 HTTP 코드와 응답 시간을 체크하면 더욱 개발하는 데 있어서 용이할 것이다.

npm i morgan

모건을 설치해주도록 한다. 테스트로 어떠한 경로에 방문할 때마다 로그에 기록이 된다.

 

설치가 완료된 후에는 메인 app 파일로 복귀하여 아래와 같이 작성해준다.

import morgan from "morgan";

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

morgan에 입력한 "dev"라는 인자는 개발 환경에서의 로그이다. 이외에도 다양한 값을 넣을 수 있는데, 실무 등에서는 "combined"를 쓴다고 한다.

morgan이 콘솔에 출력한 로그

정적 폴더 지정

 

img, html, css 등 바뀌지 않는 파일인 정적 파일들이 담긴 정적 폴더를 지정하여 사용할 수 있도록 해준다.

 

import path from "path";
import { findURLToPath } from "url";
const __dirname = path.dirname(fileURLToPath(import.meta.url));

app.use(express.static(path.join(__dirname, "public")));

ES6에서는 __dirname을 사용에 오류가 발생해서 위와 같이 __dirname을 직접 가져와서 저장해준다.

 

HTTP 패킷 바디 해석

 

HTTP 패킷에서 전송되는 헤더와 바디 중 바디를 읽어내기 위해서는 JSON 데이터를 읽을 수 있어야 한다. 요즘은 거의 JSON으로 클라이언트와 통신하기 때문이다.

 

app.use(express.json());

따로 body-parser를 설치하지 않아도 된다.

 

폼 제출 데이터 해석

form 의 제출 데이터 형태인 x-www-form-urlencoded를 받아내기 위해서 따로 미들웨어를 설정해줘야 한다.

app.use(express.urlencoded({ extended: false }));

extended를 true라고 지정하면 qs 모듈을 사용하는데, 이미 express에 querystring이 있기 때문에 false로 지정했다.

 

쿠키 사용

 

쿠키를 사용하기 위해서 cookie-parser를 사용한다. req 객체에 cookie 속성을 사용할 수 있으며 읽어낼 수 있다. 이때, 서버에서 만든 쿠키값임을 저장해야 하므로 secret 암호값을 사용하도록 했다.

 

app.use(cookieParser(process.env.COOKIE_SECRET));

이때 process.env.COOKIE_SECRET 값은 따로 .env에 COOKIE_SECRET 값을 저장해두었다. 이 설정 방법은 바로 다음에 작성하였다.

 

환경변수 저장 및 사용

 

환경변수를 저장하고 사용할 수 있도록 새롭게 라이브러리를 설치한다.

npm i dotenv

 

루트 디렉터리 폴더에서 .env 파일을 만들고 그 파일 안에 변수와 값을 저장하도록 한다.

 

<.env 파일>
COOKIE_SECRET=[쿠키 암호 값 지정(자유롭게)]

이 파일에는 중요한 암호값이 있으므로 반드시 .gitignore에 지정해 보안 문제가 없도록 해야 한다.

 

import dotenv from "dotenv";
dotenv.config();

위와 같이 코드를 작성하여 환경변수를 사용하도록 한다.

 

세션 사용

 

웹 브라우저는 쿠키를 통해 사용자를 인식하는데, 이 쿠키에 비밀번호가 담겨있다면 그것 자체로 문제가 된다. 그렇기 때문에 세션이라는 것을 사용해서 인증된 사용자인 경우에만 데이터를 전송하는 방식을 사용한다. 즉, 브라우저는 세션 아이디라는 고유 값만을 갖고 있고, 서버에서 데이터를 관리하는 것이다.

 

npm i express-session

express-session이라는 패키지를 설치한다. 이때 세션을 사용하기 위해서는 쿠키가 반드시 필요하므로 cookie-parser 미들웨어 다음에 미들웨어를 설정해야 한다.

 

import expressSession from "express-session";

app.use(
	expressSession({
		resave: false,
    		secret: process.env.COOKIE_SECRET,
    		saveUninitialized: false,
    		cookie: {
    			httpOnly: true,
        		secure: false,
    	}
	})
);

각 옵션들을 설정한다.

 

resave: 세션이 바뀌지 않더라도 세션을 저장한다. 매 request 마다 세션을 저장

secret: cookie의 sign 값

saveUninitialized: 세션을 uninitialized인 상태로 저장한다. 생성한 후 아무런 것도 하지 않은 순수한 세션 파일을 저장하는 것으로 false로 저장한다.

 

기타 미들웨어

 

이것들 외에도 다양한 미들웨어가 있다. 인증 등 미들웨어는 내용이 많기 때문에 나중에 따로 지정해주도록 할 예정이다.