Node.js / 쿠키(Cookie)

쿠키(Cookie)

서버가 클라이언트에 전송하는 작은 데이터 조각.

브라우저에서는 그 데이터 조각들을 저장했다가 동일한 서버에 재 요청 시 저장된 데이터를 전송하는 식으로 사용된다.

이를 이용해 HTTP의 무상태성을 보완해준다.

쿠키의 활용 사례

세션 관리(Session management) : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
개인화(Personalization) : 사용자 선호, 테마 등의 세팅
트래킹(Tracking) : 사용자 행동을 기록하고 분석하는 용도

실습

* express로 서버를 구축하고, axios로 서버를 연결해 쿠키를 추가하고 삭제하는 실습이다.

생성할 파일은 index.html, cookie.js, server.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="set_cookie">쿠키 추가</button>
  <button id="delete_cookie">쿠키 삭제</button>
  <!-- axios cdn -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="cookie.js"></script>
</body>
</html>

터미널

npm init -y #새로운 package.json 파일 만들기, 모듈 초기 세팅
npm i express cors cookie-parser #express, cors, cookie-parser 설치

* cookie-parser : Express에서 쿠키를 파싱하고 읽을 수 있게 도와주는 미들웨어

기본 설정

server.js

const express = require('express');
const cors = require('cors');
const cookieParser = require('cookie-parser');

// 서버 생성
const app = express();

app.use(
  cors({
    origin: ['http://127.0.0.1:5500', 'http://localhost:5500'],
    methods: ['GET', 'DELETE', 'OPTIONS'],
    credentials: true, // 인증정보. true로 해야 클라이언트에 쿠키 저장이 가능하다!
  }),
);

// 서버에서 클라이언트로부터 받아온 쿠키를 쉽게 파악할 수 있게 해주는 모듈 사용
app.use(cookieParser());

// 라우팅
app.get('/', (req, res) => {
  res.cookie('test-cookie', 'my cookie');
  res.send('쿠키 생성 완료');
});

app.listen(3000, () => console.log('서버 실행'));

cookie.js

const setCookieBtn = document.getElementById('set_cookie');
const deleteCookieBtn = document.getElementById('delete_cookie');

// 클라이언트에서 쿠키를 주고받기 위해 필요한 옵션
axios.defaults.withCredentials = true;

* live server로 열 때 127.0.0.1을 localhost로 바꿔야 하는 이유

대답 : 챗지피티...

127.0.0.1이랑 localhost는 결과적으로 **같은 IP 주소(루프백 주소)**를 가리키지만, 실제로 개발할 때는 두 가지가 미묘하게 다르게 동작할 수 있어. 특히 쿠키, CORS, SameSite 정책 관련해서 차이가 생겨!

✅ 127.0.0.1 vs localhost 차이 요약

항목127.0.0.1localhost

의미	루프백 IP 주소	루프백 도메인 이름
브라우저 인식	IP 주소	도메인
쿠키 도메인 처리	127.0.0.1로 저장	localhost로 저장
CORS origin 처리	http://127.0.0.1:5500	http://localhost:5500
쿠키와 CORS 충돌 위험	더 많음 ⚠️	더 안정적 ✅

🔍 왜 localhost가 더 나을까?

1. 도메인 일치 문제로 쿠키 공유가 깨질 수 있음

localhost에서 만든 쿠키는 127.0.0.1에선 안 보이고 그 반대도 마찬가지야.
서버에서 localhost로 만든 쿠키는 127.0.0.1에서는 전송이 안 돼.
그래서 테스트할 땐 브라우저에서 접속하는 주소와 서버의 origin이 완벽히 일치해야 해.

예: 쿠키 Domain이 localhost이면 → 127.0.0.1에서는 쿠키가 안 붙음.

2. SameSite 정책의 엄격함

SameSite=Lax 또는 Strict일 때,
브라우저는 origin이 다르면 쿠키를 보내지 않음.
localhost vs 127.0.0.1은 브라우저 입장에서 다른 origin이야.
→ 쿠키 안 붙고 CORS 오류나거나 clearCookie()가 동작 안 할 수 있어.

3. 서버에서 CORS origin 설정 시 불일치

cors({
  origin: ['http://localhost:5500'],
  credentials: true
});

→ 그런데 클라이언트가 127.0.0.1:5500으로 접속하면? ❌ CORS 막힘

✅ 결론

개발 중에는 항상 localhost로 통일해서 접속하는 게 안전하고 호환성 문제를 줄일 수 있어!

💡 팁: 실제 배포 환경에선?

보통 도메인 이름을 쓰니까 localhost 방식이 실제 서비스에 더 가까움.
127.0.0.1은 주로 네트워크 디버깅이나 내부 서버 테스트에 사용돼.

쿠키 추가

cookie.js

setCookieBtn.onclick = () => {
  axios.get('http://localhost:3000').then((res) => console.log(res));
};

버튼을 클릭하면 다음과 같이 쿠키를 생성하고 콘솔에 출력하도록 했다.

생성된 쿠키는 네트워크나 애플리케이션 탭에서 확인해볼 수 있다

쿠키 옵션

Expires / Max-Age : 쿠키가 언제 만료되는지, 얼마나 지속되는지를 나타내는 만료 날짜/시간.
현재 값 세션은 아무 설정도 하지 않아 자동으로 들어온 값인데, 이는 브라우저를 닫으면 쿠키가 바로 날아가게 된다.
HttpOnly : 쿠키를 JavaScript (document.cookie)로 접근할 수 없게 막는 보안 옵션, 클라이언트에서 직접 읽거나 수정할 수 없으며 서버에서만 접근 가능
현재는 아무 설정도 하지 않아서 브라우저의 콘솔창에서 document.cookie를 입력하면 바로 내 쿠키들이 훤히 들여다보이게 된다.... => 때문에 true로 꼭 설정해줘야함!
Secure : HTTPS 연결에서만 전송되도록 하는 옵션
지금은 localhost라서 개발할 때 많이 확인하기 때문에 크롬 내부에서는 http라도 쿠키가 전송되는 것을 확인할 수 있지만 그 이외는 안된다고 한다.

server.js (옵션 추가)

// 라우팅
app.get('/', (req, res) => {
  res.cookie('test-cookie', 'my cookie', {
    maxAge: 100000, // 100초 뒤에 만료됨
    httpOnly: true,
    secure: true,
  });
  res.send('쿠키 생성 완료');
});

쿠키 삭제

cookie.js

deleteCookieBtn.onclick = () => {
  axios.delete('http://localhost:3000').then((res) => console.log(res));
};

server.js

app.delete('/', (req, res) => {
  res.clearCookie('test-cookie', {
    maxAge: 100000, // 유동적인 옵션이라 maxAge는 필수로 적어주지 않아도 된다
    httpOnly: true,
    secure: true,
  });
});

localhost에서 테스트 시에는 옵션을 적어주지 않아도 쿠키 삭제가 잘 동작한다!

'Node.js' 카테고리의 다른 글

Node.js / 토큰(Token) (0)	2025.05.15
Node.js / 세션(Session) (0)	2025.05.14
Node.js / 네트워크 기초 (0)	2025.05.12

hykim

Node.js / 쿠키(Cookie)

쿠키(Cookie)

쿠키의 활용 사례

실습

기본 설정

✅ 127.0.0.1 vs localhost 차이 요약

🔍 왜 localhost가 더 나을까?

1. 도메인 일치 문제로 쿠키 공유가 깨질 수 있음

2. SameSite 정책의 엄격함

3. 서버에서 CORS origin 설정 시 불일치

✅ 결론

💡 팁: 실제 배포 환경에선?

쿠키 추가

쿠키 삭제

'Node.js' 카테고리의 다른 글

티스토리툴바

Node.js / 쿠키(Cookie)

쿠키(Cookie)

쿠키의 활용 사례

실습

기본 설정

✅ 127.0.0.1 vs localhost 차이 요약

🔍 왜 localhost가 더 나을까?

1. 도메인 일치 문제로 쿠키 공유가 깨질 수 있음

2. SameSite 정책의 엄격함

3. 서버에서 CORS origin 설정 시 불일치

✅ 결론

💡 팁: 실제 배포 환경에선?

쿠키 추가

쿠키 삭제

'Node.js' 카테고리의 다른 글

'Node.js' Related Articles

티스토리툴바