2025.3.24 월요일의 공부기록
쿠키(Cookie)와 세션(Session)의 개념과 iron-session 활용하기
이 글에서는 웹 개발에서 자주 등장하는 쿠키(Cookie)와 세션(Session)의 개념을 명확히 구분하고, 실무에서 자주 사용하는 JavaScript 세션 관리 라이브러리인 iron-session의 사용법을 알아본다.
내용 3줄 정리
- 쿠키는 클라이언트 측에 저장되는 텍스트 데이터로, 사용자 인증 정보나 임시 데이터를 저장하고 서버와 주고받는다.
- 세션은 서버 측에서 사용자 상태를 관리하며, 쿠키에 세션 ID를 저장해 서버가 클라이언트를 식별하고 세션 데이터를 제공한다.
- iron-session은 암호화된 쿠키를 사용해 서버에 세션을 저장하지 않는(stateless) 방식으로, Next.js 15 이상에서는 cookies() 함수를 await로 호출해야 정상적으로 동작한다.
쿠키(Cookie)와 세션(Session)의 차이점과 개념 정리
쿠키(Cookie)란?
쿠키는 클라이언트(브라우저) 쪽에 저장되는 작은 크기의 텍스트 데이터로, 서버가 클라이언트의 상태 정보를 저장하기 위해 사용한다. 브라우저는 서버로부터 받은 쿠키를 저장하고, 이후 요청을 보낼 때 해당 쿠키를 다시 서버에 전달한다.
쿠키는 주로 아래와 같은 용도로 사용된다.
- 사용자 인증 정보 저장(자동 로그인, 로그인 유지 등)
- 장바구니와 같은 임시 정보 저장
- 사용자 방문 이력 또는 설정값 저장
세션(Session)이란?
세션은 서버 측에서 관리하는 상태 데이터이다. 세션을 활용하면 사용자의 로그인 상태와 같은 민감한 정보를 클라이언트 측에 직접 저장하지 않고, 서버에 안전하게 보관할 수 있다.
세션은 일반적으로 다음과 같은 흐름으로 작동한다.
- 클라이언트가 서버에 접속한다.
- 서버가 클라이언트에게 고유한 세션 ID를 발급하여 쿠키에 담아 전달한다.
- 클라이언트는 이후 서버에 요청을 보낼 때 쿠키에 저장된 세션 ID를 함께 전송한다.
- 서버는 세션 ID를 통해 사용자 세션 데이터를 검색하여 적절한 데이터를 제공한다.
이러한 구조 덕분에 민감한 데이터를 클라이언트가 아닌 서버에 안전하게 저장할 수 있다.
쿠키와 세션의 작동 방식 예시
브라우저(Client)의 쿠키 구조
브라우저에 저장되는 쿠키는 일반적으로 다음과 같은 형태이다.
// 브라우저 쿠키의 예시
Cookie = {
session_id: "some_unique_session_value",
};서버(Server)의 세션 구조
서버는 세션 ID를 키(key)로 하여 세션 데이터를 관리한다.
// 서버의 세션 데이터 예시
session = {
'session_id_1': {
user_id: "123",
user_name: "kim-chulsu",
},
'session_id_2': {
user_id: "456",
user_name: "happyCat",
}
};세션 저장 방식
세션 데이터를 어디에 저장하는지는 구현 방식에 따라 달라질 수 있다.
- PHP의 경우 기본적으로 세션 ID를 데이터베이스가 아니라 파일 이름으로 저장하는 방식을 사용하여 성능을 높인다.
- 보안이 중요한 대부분의 환경에서는 세션 데이터를 데이터베이스에 저장하는 방식을 권장한다.
iron-session으로 JavaScript 세션 관리하기
iron-session이란?
iron-session은 JavaScript(Node.js) 환경에서 안전하고 간편하게 쿠키 기반 세션을 구현할 수 있게 해주는 라이브러리이다. 이는 암호화된 쿠키를 사용하여 서버에서 상태를 유지하지 않고(stateless), 쿠키만으로 세션 데이터를 안전하게 관리한다.
- 암호화된 쿠키를 통해 보안성을 높인다.
- 서버에 세션을 별도로 저장하지 않으므로, 서버가 Stateless하게 작동할 수 있어 확장성(scalability) 측면에서 유리하다.
iron-session 설치 방법
다음 명령어를 사용하여 설치한다.
npm i iron-sessioniron-session을 Next.js 15버전 이상에서 사용할 때 주의할 점
Next.js 15부터는 cookies() 함수가 비동기(async) 함수로 변경되었으므로, 아래와 같이 반드시 await를 붙여야 한다.
import { getIronSession } from 'iron-session';
import { cookies } from 'next/headers';
const session = await getIronSession(await cookies(), {
cookieName: "carrot-market",
password: process.env.COOKIE_PASSWORD!,
});iron-session을 활용한 실제 예시 코드 (Next.js 기반)
다음은 iron-session을 사용하여 로그인 상태를 저장하는 간단한 예시이다.
세션 생성하기
import { getIronSession } from 'iron-session';
import { cookies } from 'next/headers';
export async function login(userId: string) {
const session = await getIronSession(await cookies(), {
cookieName: "my-app-session",
password: process.env.COOKIE_PASSWORD!,
});
session.userId = userId;
await session.save();
}세션에서 데이터 읽기
export async function getUserSession() {
const session = await getIronSession(await cookies(), {
cookieName: "my-app-session",
password: process.env.COOKIE_PASSWORD!,
});
return session.userId ?? null;
}쿠키와 세션 사용 시 보안상 주의점
- 세션 데이터는 가급적 민감한 정보를 최소한으로 담는다.
- iron-session의 비밀번호(
COOKIE_PASSWORD)는 절대 외부에 노출하지 않고.env파일로 보호한다. - 쿠키의 만료 시간(expiration)을 적절히 설정하여 사용자의 보안을 강화한다.
- 쿠키에
HttpOnly및Secure옵션을 설정하여 XSS 및 네트워크 공격에 대비한다.
