[Node.js] Express에서 쿠키&세션 사용방법

1. 세션(Session)이란?

정의

세션은 사용자가 웹사이트를 방문하고 있는 동안 서버에서 사용자 정보를 저장하는 방법입니다.

세션은 서버에 저장되며 사용자가 로그인하거나 특정 동작을 수행할 때, 서버는 세션을 사용해 사용자를 식별하고 유지합니다.

특징

서버 측 저장 : 세션 정보는 서버에 저장되므로 보안성이 높습니다.

유효 시간: 세션은 일정 시간이 지나면 만료됩니다. 이 유효 기간은 서버 설정에 따라 다릅니다.

식별자 : 세션 ID는 클라이언트 측(브라우저)에 저장되고, 이 세션 ID를 통해 서버는 클라이언트의 세션 정보를 조회합니다.

로그인 상태 유지 : 주로 로그인 상태 유지와 같은 사용자 상태를 관리하는 데 사용됩니다.

작동 과정

  1. 사용자가 웹사이트에 접속하여 로그인 시도.
  2. 서버는 사용자를 인증하고, 세션을 생성 후 고유한 세션 ID를 할당.
  3. 이 세션 ID는 클라이언트 측(브라우저)에 쿠키로 저장.
  4. 이후 사용자가 웹사이트 내에서 이동할 때마다, 세션 ID를 서버에 보내며 서버는 이 정보를 통해 사용자 상태를 유지.

세션의 장점

  - 서버에서 관리되므로 중요한 정보를 안전하게 저장 가능.
  - 클라이언트가 세션 정보에 직접 접근할 수 없어 보안성이 우수.

 

 

 2. 쿠키(Cookie)란?

정의

쿠키는 사용자의 브라우저에 저장되는 작은 텍스트 파일로, 웹사이트에서 사용자의 정보나 설정을 저장하는 데 사용됩니다. 이를 통해 사용자가 웹사이트를 재방문할 때, 쿠키를 통해 사용자 정보를 재활용할 수 있습니다.
  

특징

클라이언트 측 저장 : 쿠키는 클라이언트(브라우저)에 저장됩니다.

유효 시간 : 쿠키는 만료일을 설정할 수 있으며, 만료일이 지나면 쿠키는 삭제됩니다.

크기 제한 : 일반적으로 쿠키는 4KB 이하로 제한됩니다.

HTTP 통신 시 전송 : 클라이언트와 서버 간의 HTTP 요청 및 응답 시 쿠키가 함께 전송됩니다.

쿠키의 용도

자동 로그인 : 로그인 정보 저장.
사용자 선호 설정 : 사용자가 설정한 웹사이트 환경 저장.
세션 관리 : 세션 ID 저장.
트래킹 :사용자의 웹사이트 방문 기록을 추적하여 맞춤형 광고 제공.

작동 과정

  1. 사용자가 웹사이트에 접속 시, 서버는 필요한 정보를 쿠키에 저장해 클라이언트에게 전송.
  2. 클라이언트는 이 쿠키를 저장하고, 이후 동일한 웹사이트에 접속할 때마다 해당 쿠키를 서버로 전송.
  3. 서버는 쿠키를 분석하여 사용자 정보를 기반으로 맞춤형 서비스를 제공.

쿠키의 장점

  - 브라우저에 정보를 저장하므로 사용자 경험을 개선.
  - 세션에 비해 서버 부하가 적고, 일정 기간 동안 정보를 유지 가능.

 

예제 코드

// 모듈 임포트
const express = require("express");
const session = require("express-session");

// 익스프레스 객체 생성
const app = express();

// 포트 설정
const port = 3001;

// 세션 객체 초기화
app.use(
  session({
    name:'sessionId', // 미설정 시 기본값인 connect.sid로 설정
    secret: "soonCoding", // 암호화
    resave: false, // 세션이 수정될 때만 다시 저장
    saveUninitialized: false, // 세션이 초기화되어 있을 때만 저장
    cookie: { maxAge: 1000 * 60 * 30 }, // 30분 세션 만료 시간 설정
    rolling: true, // 요청할 때마다 세션 만료 시간 갱신(새로고침 시 만료시간 갱신됨)
  })
);

// 라우터 미들웨어 설정(localhost:3001/ 로 입장 시 실행)
app.get("/", (req, res, next) => {
  // 세션에 user가 존재한다면
  if (req.session.user) { // (req.session으로 세션 객체에 접근할 수 있음을 알 수 있다.)
    res.send(`세션이 이미 있는뎁쇼? \n 유저이름 >> ${req.session.user.name}`);
  } 
  // 세션에 user가 없다면
  else {
    req.session.user = { name: 'John Doe', authenticated: true }; // 세션이 없으면 user 객체 생성
    res.send("이녀석 ㅋㅋ 세션이 없구나~ 내가 세션을 줄게~");
  }
});

 

개인질문(feat. GPT4.0)

Q1

req.session.user = { name: 'John Doe', authenticated: true };

위 코드가 실행되면 아래 과정을 거치는 것이라고 이해했어. 검토해줘.

1. 서버에서는 세션 객체에 user 프로퍼티 속성을 만들어 객체 데이터를 삽입 후 서버측에 저장한다.

2. 브라우저는 해당 세션 객체를 찾을 수 있는 일종의 키인 세션 ID를 쿠키에 저장한다.

3. 이후 클라이언트가 서버로 요청을 보낼 때마다 세션 ID를 통해 세션 객체 데이터(유저 정보)를 얻어낸다.

4. 해당 객체 데이터(유저 정보)를 통해 렌더링한다.

A1.

네, 정확히 이해하셨습니다!

### 동작 요약

1. **서버 측에서 세션 데이터 저장**:
   - 코드 `req.session.user = { name: 'John Doe', authenticated: true };`가 실행되면, 서버 측에서는 `req.session` 객체에 `user`라는 프로퍼티가 생성되고, 그 안에 `{ name: 'John Doe', authenticated: true }`라는 데이터가 저장됩니다.
   - 이 세션 데이터는 **서버 측**에 저장됩니다. 서버는 이를 메모리, 데이터베이스, 파일 시스템 또는 Redis와 같은 세션 저장소에 저장할 수 있습니다.

2. **브라우저 측에 세션 ID 저장**:
   - 서버는 이 세션 데이터와 연결된 **고유한 세션 ID**를 생성합니다.
   - 이 세션 ID는 클라이언트(브라우저)에 **쿠키**로 저장됩니다. 브라우저는 이 쿠키를 저장한 후, 이후의 모든 요청에서 서버로 이 세션 ID 쿠키를 자동으로 전송합니다.

3. **요청 시 세션 ID로 세션 데이터 조회**:
   - 클라이언트가 서버로 요청을 보낼 때마다, 브라우저는 해당 세션 ID 쿠키를 서버로 전송합니다.
   - 서버는 이 세션 ID를 사용해 해당 세션 ID와 연결된 세션 데이터를 조회합니다. 즉, 서버는 세션 ID를 사용해 `req.session.user`에 저장된 데이터를 가져옵니다.

### 정리하면:

- **서버 측**: `req.session.user` 객체는 서버의 세션 저장소에 저장됩니다. 이 저장소에는 사용자와 관련된 상태 정보가 들어 있습니다.
- **클라이언트 측**: 브라우저에는 이 세션 데이터를 직접 저장하지 않고, **세션 ID**만 쿠키로 저장합니다. 이 세션 ID는 서버에서 세션 데이터를 식별하는 데 사용됩니다.

서버는 세션 ID를 사용해 클라이언트의 상태를 관리하고, 클라이언트는 이 세션 ID를 통해 서버의 세션 데이터에 접근할 수 있게 됩니다. 

이렇게 하면 클라이언트는 민감한 세션 데이터를 직접 보관하지 않으면서도, 서버와의 상태를 유지할 수 있습니다.

 

Q2

근데 그렇다면 세션이 만료될 때마다 사용자는 로그인을 수행해야해?

만약 세션 만료 시간이 30분이라면 30분마다 로그인으로 강제 리다이렉트 되는 거 아냐?

A2

세션 만료와 관련된 문제는 실제로 웹 애플리케이션에서 중요한 부분입니다. 세션 만료 시간이 설정되어 있다면, 세션이 만료될 때 사용자는 로그인 상태를 잃게 되며, 이후에 로그인이 필요한 페이지에 접근하면 로그인 페이지로 리다이렉트될 수 있습니다. 그러나 모든 상황에서 사용자가 세션 만료 시 즉시 로그아웃되거나 로그인 페이지로 강제 리다이렉트되지 않도록 세션 만료 처리 전략을 설계할 수 있습니다.

1. 세션 만료 처리 기본 동작

• 세션 만료 시간: 서버에서 세션 만료 시간이 설정된 경우, 세션이 만료되면 서버는 더 이상 해당 세션 ID를 유효한 것으로 인식하지 않습니다. 따라서 세션과 연결된 데이터(예: 로그인 상태)는 유지되지 않습니다.
  • 예를 들어, 세션 만료 시간이 30분으로 설정되어 있으면, 사용자가 30분 동안 아무 활동이 없을 경우 세션이 만료됩니다.
• 로그인 페이지 리다이렉트: 사용자가 만료된 세션으로 인증이 필요한 페이지에 접근하면, 서버는 해당 사용자가 더 이상 인증되지 않았다고 판단하고, 보통 로그인 페이지로 리다이렉트 시킵니다.

2. 세션 만료 문제 해결 방법

세션 만료 시간에 따라 사용자 경험이 나빠질 수 있으므로, 이를 완화하기 위한 몇 가지 전략이 있습니다.

2.1. 세션 갱신 (Session Renewal)

• 활동 기반 세션 갱신: 사용자가 서버와 상호작용할 때마다(예: 페이지 이동, 버튼 클릭 등) 세션 만료 시간을 갱신할 수 있습니다. 이 방법을 사용하면 사용자가 활동할 때마다 세션이 연장되므로, 계속해서 웹사이트를 사용하는 동안에는 세션이 만료되지 않습니다.
  javascript

  코드 복사

  app.use((req, res, next) => { if (req.session) { req.session.touch(); // 세션 갱신 (만료 시간 연장) } next(); });
  • 위 코드에서 req.session.touch()는 사용자가 요청할 때마다 세션의 만료 시간을 연장시킵니다.

2.2. 자동 세션 연장 (Sliding Expiration)

• Sliding Expiration은 세션 만료 시간이 사용자가 마지막으로 서버에 접근한 시간부터 다시 카운트되도록 하는 방식입니다. 즉, 사용자가 활동할 때마다 세션이 연장되고, 일정 시간 동안 아무런 활동이 없을 때만 세션이 만료됩니다.
• 이를 구현하려면 세션의 만료 시간을 사용자가 서버에 접근할 때마다 갱신하는 방식으로 설정합니다.

2.3. 쿠키 만료 시간 설정

• 쿠키의 maxAge 속성을 사용해 세션 ID 쿠키의 만료 시간을 설정할 수 있습니다. maxAge는 밀리초 단위로 설정되며, 이 시간이 지나면 쿠키가 자동으로 삭제됩니다. 이 설정과 함께 세션 갱신 전략을 사용하면, 쿠키와 세션이 함께 갱신됩니다.
  javascript

  코드 복사

  app.use( session({ secret: 'soonCoding', resave: false, saveUninitialized: false, cookie: { maxAge: 1000 * 60 * 30 } // 30분 세션 만료 시간 설정 }) );
  • 위 코드에서 maxAge: 1000 * 60 * 30은 세션 쿠키가 30분 후에 만료되도록 설정합니다. 사용자가 활동할 때마다 세션과 쿠키가 갱신될 수 있도록 추가 설정할 수 있습니다.

2.4. "기억하기" 옵션 제공

• 사용자에게 "로그인 상태 유지" 또는 "기억하기" 옵션을 제공해 세션 만료 시간이 길게 설정된 세션을 사용할 수 있습니다. 이 옵션을 선택한 사용자의 경우, 서버에서 더 긴 세션 만료 시간을 적용하여 더 오랜 시간 로그인 상태를 유지할 수 있습니다.

2.5. 세션 복구 전략

• 사용자가 세션 만료 후에 다시 로그인해야 하는 불편을 최소화하기 위해, 세션이 만료된 경우에도 로그인을 빠르게 복구할 수 있는 메커니즘을 제공할 수 있습니다.
  • 예를 들어, 사용자가 세션이 만료되었을 때 간단히 비밀번호만 입력하면 로그인 상태를 복원할 수 있도록 하는 방식입니다.

3. 요약

• 기본적으로 세션이 만료되면 사용자는 다시 로그인을 해야 합니다. 만약 세션 만료 시간이 30분으로 설정되어 있다면, 사용자는 30분 동안 아무 활동이 없을 경우 로그인 페이지로 리다이렉트될 수 있습니다.
• 그러나, 사용자가 계속 활동할 경우 세션 만료 시간을 자동으로 연장하거나, 로그인 상태를 유지하는 옵션을 제공하는 등 다양한 전략을 통해 세션 만료 문제를 완화할 수 있습니다.