[새싹x코딩온] 풀스택 개발자 부트캠프 과정 7주차-1 session, cookie

SAC

[새싹x코딩온] 풀스택 개발자 부트캠프 과정 7주차-1 session, cookie

비너발트 2024. 12. 17. 15:13

세션이란?

세션은 사용자를 식별하고 그에 따른 상태나 정보를 서버 에서 유지하기 위한 일반적인 메커니즘입니다 세션은 주로 쿠키Cookie와 연동하여 작동합니다 클라이언트는 서버가 발급한 세션을 쿠키로 보관하고, 이후 요청 시 해당 쿠키를 서버에 전송함으로써 사용자가 누구인지 식별할 수 있고 그 사용자에 해당하는 상태나 데이터를 서버 측에 저장해둘 수 있게 됩니다

Node.js 의 세션사용!

const express = require('express');
const session = require('express-session');

const app = express();

app.use(session({
  secret: '비밀 키 문자열',  // 세션 암호화를 위한 키
  resave: false,            // 요청마다 세션을 다시 저장할지 여부
  saveUninitialized: true,  // 초기화되지 않은 세션을 저장할지 여부
  cookie: {
    maxAge: 1000 * 60 * 30  // 세션 쿠키 만료 시간
  }
}));

app.get('/', (req, res) => {
  // 세션 데이터에 접근 혹은 생성
  if (!req.session.views) {
    req.session.views = 0;
  }
  req.session.views++;
  res.send(`방문 횟수: ${req.session.views}`);
});

app.listen(3000, () => {
  console.log('서버 3000번 포트');
});

세션의 용도

사용자 인증 상태 유지: 사용자가 로그인에 성공하면 해당 사용자에게 고유한 세션 ID를 할당하고, 이 세션 ID를 통해 사용자의 인증 정보를 저장합니다. 이렇게 하면 사용자가 다른 페이지로 이동하거나 추가 요청을 보낼 때도 로그인 상태를 인식하고, 별도의 로그인 절차 없이 인증된 서비스를 지속적으로 이용할 수 있습니다 그리고 추가적으로 인증과 관련된 기능에서 쓰이는데 이메일인증이나 OTP같은 서버와 통신하며 검증이 필요한 인증을 구현할때도 쓰입니다

개인화된 설정 및 정보 저장: 사용자가 웹사이트에서 특정 설정(테마, 언어, 정렬 방식)을 선택하면, 이 정보를 세션에 저장하여 페이지 이동 시에도 계속 동일한 설정을 적용하여 사용자의 원하는 설정값에 맞게 이용할 수 있도록 만들 수 있습니다

장바구니나 임시 데이터 관리: 전자상거래 웹사이트에서는 사용자가 상품을 담은 장바구니 정보를 세션에 저장함으로써 페이지 이동 시에도 해당 정보가 사라지지 않게 유지할 수 있습니다

서버 리소스 관리 및 상태 추적: 서버는 사용자의 세션 정보를 통해 접속 중인 사용자가 몇 명인지, 각 사용자가 어떤 데이터에 접근했는지 등을 추적할 수 있습니다

정리하자면, 세션은 사용자별 맞춤 상태나 정보를 유지하기 위한 편리한 수단이라고 볼 수 있고 각 사용자의 최적화된 이용환경을 제공할 수 있습니다

쿠키란?

웹 브라우저를 통해 사용자(클라이언트 측)에 저장되는 작은 텍스트 파일이며 웹사이트가 사용자의 방문 정보나 상태를 유지하는데 사용됩니다

const express = require('express');
const session = require('express-session');

const app = express();

app.use(session({
  secret: 'keyboard cat', // 세션 암호화에 사용될 비밀키
  resave: false,           // 세션을 항상 저장할지 여부
  saveUninitialized: true, // 초기화되지 않은 세션을 저장할지 여부
  cookie: {
    secure: false,         // HTTPS가 아닌 환경에서 secure 옵션 false로 설정
    maxAge: 1000 * 60 * 60 // 쿠키 유효 기간 (예: 1시간)
  }
}));

app.get('/', (req, res) => {
  if (!req.session.views) {
    req.session.views = 1;
  } else {
    req.session.views++;
  }
  res.send(`이 페이지를 ${req.session.views}번 조회하셨습니다.`);
});

app.listen(3000, () => console.log('Server started on http://localhost:3000'));

쿠키는 웹 사이트를 방문하는 사용자의 브라우저에 저장되는 작은 텍스트 데이터입니다 주로 사용되는 용도로는 세션 유지 로그인 상태를 유지하거나 장바구니 정보 저장, 사용자 별 설정 정보 등을 서버 측 세션과 연계하여 관리할 때 쿠키를 사용하는데 예를 들어 사용자가 사이트에 로그인하면 서버는 로그인 정보와 연계된 세션 ID를 쿠키로 발급하고, 브라우저는 이후 요청마다 해당 쿠키를 함께 보내 서버가 사용자를 식별하고 상태를 유지할 수 있게 합니다

개인화 사용자의 취향, 선호 언어, 지역 정보 등을 쿠키에 저장할 수 있습니다 우리가 웹 사이트를 돌아다닐때 광고가 각각 다르게 나타나는 경우가 많습니다 특히 쇼핑을 하면서 의자에 대해 검색하면 의자와 관련된 광고가 자주 보이는걸 가끔 볼텐데 이렇게 노출되는 맞춤형 정보들은 사용자가 주로 찾는 데이터를 쿠키로 수집하여 나타내 클라이언트의 취향에 맞춰 콘텐츠나 UI를 맞춤 제공할 수 있습니다 그리고 캐싱 및 성능 개선을 개선 할 수 있는 장점도 있습니다 특정 사용자 관련 설정이나 상태 정보를 쿠키로 관리해 불필요한 데이터 재전송을 줄여 로딩속도나 서버의 부하를 줄일 수 도 있습니다

단점 및 보안 이슈

개인정보 유출 우려 브라우저에 저장된 쿠키가 제3자나 공격(외부) 으로 인해노출될 경우 개인정보나 인증 정보가 유출될 수 있습니다 기본적으로 쿠키는 클라이언트에 저장되는 값으로 암호화를 하여 저장한다 하여도 위험리스크가 굉장히 커 보안상 위험이 있는 데이터는 쿠키로 절대 사용하지않습니다

브라우저 설정 및 만료 기한 사용자는 브라우저 설정을 통해 쿠키 저장을 거부하거나, 기존에 저장된 쿠키를 삭제할 수 있습니다 또한 쿠키는 유효기간(만료 기한)이 있어 일정 시간이 지나면 자동으로 폐기됩니다.

보안 강화 기법 필요 HTTPS를 통한 전송, Secure 및 HttpOnly 옵션 설정 등을 통해 쿠키를 안전하게 전달하고 관리할 수 있습니다

쿠키와 세션의 차이?

쿠키는 브라우저가 로컬에 저장하는 키-값 형태의 작은 데이터입니다 클라이언트 측에 저장되며 서버에 요청을 보낼 때마다 HTTP 헤더를 통해 전송됩니다

세션은 주로 서버 측에서 관리되는 사용자 상태 정보이며 실제 사용자 정보나 데이터는 서버 메모리나 외부 저장소 DB 등에 저장하고, 클라이언트에겐 해당 정보를 식별할 수 있는 세션 ID가 담긴 쿠키만 전달합니다