해당 포스트는
Session에 대해 정리한 포스트입니다.
📝 세션
세션이란 서버에 클라이언트 인증에 대한 데이터를 서버에 저장하는 기술을 의미합니다.
HTTP가 갖는 특징인 무상태(stateless)를 극복하기 위해 사용할 수 있습니다.
( 세션은 memory, file, database 등에 저장됩니다. )
stateless가stateful보다 안 좋다는 것은 아니고stateless이기 때문에 겪는 문제를 보완하기 위해서session을 사용한다는 의미입니다.
0️⃣ 특징
세션을 사용하면 서버의 자원을 이용해서 데이터를 저장하기 때문에 HTTP의 특징인 stateless에서 stateful하게 동작합니다.
즉, 상태를 유지하기 때문에 어떤 유저가 요청을 보냈는지 서버에서 자체적으로 구분이 가능하게 됩니다.
하지만 세션은 서버의 자원을 사용하기 때문에 장단점이 발생합니다.
- 장점
- 서버에서 세션을 관리할 수 있음 ( 강제 로그아웃, 하나의 계정만 인증 등의 기능이 가능 )
- 단점
- 서버의 메모리 사용
- 서버가 여러 대인 경우 서버끼리 세션을 공유해야 함
( 서버 스케일링에 불리함 )
1️⃣ 동작 흐름
세션은 서버에 저장된다고 앞에서 설명했습니다.
그러면 데이터는 서버에 저장하지만 해당 데이터를 식별할 식별자를 브라우저에서 보내줘야 세션을 이용해서 유저를 식별할 수 있습니다.
이 세션의 식별자를 주고 받는데 Cookie를 사용합니다.
쿠키에 세션을 식별할 수 있는 식별자(이하 Session ID)를 넣고 브라우저의 요청마다 쿠키를 이용해서 Session ID를 찾고 해당 유저의 정보를 구분합니다.
Session ID를 갖는 쿠키와 세션 쿠키는 의미가 다릅니다.
세션 쿠키는 유효기간을 정하지 않아서 브라우저가 종료되면 사라지는 쿠키를 의미합니다.
Session+Cookie동작 방식- 클라이언트가 로그인 요청을 서버로 보내고 로그인에 성공
- 서버에서 해당 유저의 식별자를 담은
Session을 만들고Session을 식별할 식별자를Cookie에 담아서 (암호화해서) 클라이언트로 전달 - 클라이언트는 받은
Cookie를 브라우저에 저장했다가 같은 서버에게 요청을 보내는 경우Cookie를 같이 실어서 전달 - 서버에서 클라이언트에서 받은
Cookie를 통해서Session식별자를 얻고Session식별자를 이용해서 유저의 식별자를 얻어 로그인한 유저인지 판단 및 로그인한 유저의 정보 흭득
📜 사용 예시
Node.js의 Express.js를 이용해서 간단하게 예시를 작성했습니다.
0️⃣ 설치
express를 이용해서 세션을 관리하고 메모리 보다는 file로 관리하기 위해서 아래 패키지들을 설치했습니다.
1
npm i express express-session session-file-store cooike-parser
1️⃣ 코드 작성
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const express = require("express");
const cookieParser = require("cookie-parser");
const expressSession = require("express-session");
const FileStore = require("session-file-store")(expressSession);
const app = express();
app.use(express.static("public"));
app.use(cookieParser());
app.use(
expressSession({
secret: "keyboardcat",
resave: false, // 요청마다 세션을 모두 다시 생성 ( 어떤 목적으로 있는 옵션인지 모르겠네요...😥 )
saveUninitialized: true, // ?
cookie: {
httpOnly: true,
},
name: "my-cookie-using-session", // 쿠키 이름 ( 생략 시 "connect.sid" )
store: new FileStore(),
})
);
app.get("/session", (req, res) => {
if (req.session.count === undefined) {
req.session.count = 1;
} else {
req.session.count += 1;
}
console.log("접근 >> ", req.session.count);
res.json({ count: req.session.count });
});
app.listen(8080, () => console.log("8080번 대기중"));
public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express Session</title>
</head>
<body>
<button type="button">click me</button>
<script>
const $button = document.querySelector("button");
$button.addEventListener("click", async () => {
try {
const result = await fetch("/session", { method: "GET" });
console.log("result >> ", result);
} catch (error) {
console.error(error);
}
});
</script>
</body>
</html>
2️⃣ 설명
위 코드는 Session이 동작하게 만드는 단순한 코드라 중요하지는 않습니다.
중요한 것은 세션이 어떤 것이고 어떤 방식들로 서버에 저장되고 어떻게 브라우저에게 세션을 구별할 식별자를 주는지에 대한 전체적인 흐름이 중요합니다.
이전에 설명했듯이 세션은 서버의 자원을 사용해서 상태를 유지하는 기술입니다.
위 예시에서는 상태를 유지하기 위해 파일을 사용했습니다.
현재 세션의 상태를 파일에 기록하고 다시 읽는 과정을 반복합니다.
그리고 읽은 파일의 데이터 즉, 세션을 미들웨어인 expressSession를 통해서 req.session에 저장합니다.
서버를 실행하면 sessions/uY5fma9O10MD4AFyURGfEzgv3SQf_Deh.json이라는 폴더와 파일이 생성됩니다.
이것은 express-session 미들웨어와 session-file-store를 통해서 자동으로 생성됩니다.
( .json 파일의 이름은 랜덤으로 결정되기 때문에 제가 작성한 것과는 다릅니다. )
req.session을 수정할 때마다 자동으로 .json 파일이 수정되게 됩니다.
그리고 서버에서 응답을 하면 SessionID 값을 갖는 쿠키를 동봉해서 보냅니다.
쿠키의 이름은 기본적으로 connect.sid가 됩니다.
그리고 쿠키의 값은 s%3A + 파일명 + .asd%atruvb과 같이 생성되게 됩니다.
( s%3AkhJXuy4n0Av8pL0dr5oTwF0P9PQWyzPf.%2FODB%2FKYy4%2BJJhNG%2BI%2F2wU940l3PbjkHJmaXTii1Iyzk )
s%3A는 express-session을 이용하는 쿠키라면 접두사처럼 갖는 값이고 . 뒤에 부분은 어떤 것인지 모르겠습니다.
중요한 것은 세션을 식별할 수 있는 식별자를 갖는다는 점입니다.
해당 쿠키를 이용해서 서버에서 유지하고 있는 세션인 파일의 특정 데이터를 찾을 수 있습니다.
또한 세션이 파일에 저장되기 때문에 서버가 껐다가 켜져도 데이터가 유지되게 됩니다.