이번 포스팅에서는 express를 사용할 때 express-session모듈을 이용해 세션을 사용하는 방법을 간단히 정리해서 소개하려고 합니다.
1. express-session 설치 및 설정
먼저 터미널에서 모듈 설치를 해주세요.
npm i --save express-session
이제 서버 쪽 코드를 작성해볼 건데요. 지금 진행 중인 프로젝트가 이미 있다면 서버를 실행시키는 파일이 있을 수도 있습니다. 없으시면 지금 만드시면 됩니다. 코드는 아래에 있는 데로 하면 되니까요. 여하튼 그 서버를 실행하는 파일에서 express-session 모듈을 불러와서 사용합니다. 그리고 저의 경우 그 파일의 이름은 server.js로 하겠습니다. 코드는 아래와 같습니다.
* server.js
const express = require('express');
const session = require('express-session');
const server = express();
const port = 3000;
server.use(session({
HttpOnly: true,
secure: true,
secret: process.env.SECRET,
resave: false,
saveUninitialized: true,
cookie: { maxAge: 24000 * 60 * 60 }
}));
server.listen(devPort, () => {
console.log(`#### webpack-dev-server is listening on port ${port}. ${new Date().toLocaleString()} ####`);
});=
서버는 node.js 환경입니다. express를 사용하고 있고요. 마지막 세 줄은 서버를 여는 코드입니다. express-session을 사용하는 코드는 그 위에 있습니다.
express는 use()로 미들웨어를 사용합니다. server.use(session))은 session 미들웨어를 사용하겠다는 뜻이고, session() 안에 파라미터는 세션의 설정값들을 넣은 객체입니다. 속성을 하나씩 살펴보겠습니다.
HttpOnly: 값을 true로 하면 사용자가 자바스크립트를 통해서 세션을 사용할 수 없도록 강제합니다. 보안을 생각하면 반드시 true값으로 해야겠습니다.
secure: 값을 true로 하면 https에서만 세션을 주고받을 수 있습니다. http에서는 세션을 주고받는 것이 불가능합니다.
참고: https는 클라이언트와 서버 사이의 데이터 전송 과정에서 보안을 책임지기 때문에 전송 과정에서 세션을 탈취당할 염려가 없어집니다. 반면 http를 사용하면 전송 과정에서 탈취당할 염려가 생깁니다.
secret: 세션을 발급할 때 사용되는 키입니다. 보안상 중요하기 때문에 절대 소스코드에 노출하면 안 되고, 환경변수 파일에서 따로 관리하도록 합니다.
resave: 세션을 저장하고 불러올 때 세션을 다시 저장할지 여부를 정합니다.
saveUninitialized: 세션에 저장할 때 초기화를 할지 여부를 정합니다.
cokie.maxAge: 쿠키의 생명 기간이고 단위는 ms입니다.
모든 옵션을 다 설정해줘야하는 것은 아닙니다. 필요한 옵션만 설정해주시면 됩니다. express-session은 이렇게 객체에 프로퍼티: 값 형태로 옵션들을 넣어주기만 하면 됩니다. 이제 세션 발급을 위한 준비가 끝났습니다.
tip. 환경변수 파일 따로 만들어서 관리하는 법
위에서 환경변수 파일을 따로 만들어서 키값을 보관하라고 했는데요. 환경변수 파일을 따로 만들어 사용하는 방법도 소개해드리겠습니다. 밑에 내용을 따라 해 주세요.
1. 프로젝트에 dotenv 모듈을 설치합니다.
npm i --save dotenv
2. 프로젝트 루트 디렉터리에. env 파일을 생성하고 그 안에 환경변수를 집어넣습니다.
*.env
# session
SECRET = ilovepizza#을 붙이면 해당 줄은 주석 처리됩니다. 그 2번째 줄을 보면 SECRET이라는 환경변수를 만들었고 값을 할당한 것을 볼 수 있습니다.
3. 이제 서버 쪽 코드에서 process.env.SECRET라는 변수로 SECRET 키값에 접근할 수 있습니다.
4. 만약 github에 public으로 코드를 저장하고 계신다면 .gitigonre에 .env를 추가해야 합니다. 중요한 변수의 값을 노출하는 것을 방지하기 위해서이죠.
2. 세션 발급
위에서 안내한 필요한 세팅이 모두 끝난 상태에서 세션을 발급해보도록 하겠습니다. 서버에 어떤 요청이 들어왔을 때 세션을 발급하는 로직을 만들겠습니다.
express에서 브라우저에서 오는 request는 라우터에서 req 파라미터로 받을 수 있습니다.
일단 라우터부터 만들어보겠습니다.
* router.js
const express = require('express');
const router = express.Router();
router.get('*', (req, res) => {
res.sendFile('./index.html');
}
module.exports = router;
그냥 간단하게 모든 경로의 요청에 대해 index.html 파일을 보내주는 라우터를 만들었습니다.
* server.js
const express = require('express');
const session = require('express-session');
const router = require('./router');
const server = express();
const port = 3000;
server.use(session({
HttpOnly: true,
secure: true,
secret: process.env.SECRET,
resave: false,
saveUninitialized: true,
cookie: { maxAge: 24000 * 60 * 60 }
}));
server.use(router);
server.listen(devPort, () => {
console.log(`#### webpack-dev-server is listening on port ${port}. ${new Date().toLocaleString()} ####`);
});=
server.js에서 해당 라우터를 사용해줘야 합니다.
그리고 post방식으로 /auth라는 경로로 요청이 들어올 때 세션을 발급해보겠습니다.
* router.js
const express = require('express');
const router = express.Router();
router.post('/auth', (req, res) => {
req.session.userId = req.body.userId;
req.session.save();
res.send();
}
router.get('*', (req, res) => {
res.sendFile('./index.html');
}
module.exports = router;
요청이 들어왔을 때, 간단하게도 req.session.save()만 실행해주면 해당 클라이언트에게 세션이 발급됩니다.
그 윗 줄에 있는 req.session.userId는 세션 id가 아닌 유저 아이디를 제맘대로 저장해본 것입니다.
세션 id는 express-session이 발급하는 값이고, 유저 아이디는 req.body에 담긴 브라우저로부터 받은 값입니다. 이런 식으로 해당 세션에 추가적인 데이터를 담을 수 있다는 것을 보여드리기 위해 이 코드를 넣었습니다.
이렇게 하면, 세션을 발급받은 유저가 다음번에 또 다른 요청을 보낼 때 서버에서는 req.session.userId값에 접근할 수 있게 됩니다. 이를 통해 데이터베이스 쿼리문에 필터로 사용할 수도 있고, 다양하게 활용을 할 수 있습니다.
마무리
express-session 미들웨어는 express환경에서 사용하도록 만들었기 때문에 호환성 걱정을 할 필요도 없고 사용하기가 정말 편리합니다. 세션을 구현하기 정말 편리한 라이브러리라고 생각합니다. express의 장점은 개발이 쉽고 빠르다는 점인데, 그런 장점을 한층 더 잘 살려줄 수 있는 좋은 모듈인 것 같습니다.
최근댓글