웹 인증 공부하기 - 쿠키 cookie

카테고리 없음

웹 인증 공부하기 - 쿠키 cookie

creamymood 2025. 5. 16. 11:57

쿠키(Cookie)란?

브라우저(클라이언트)가 작은 데이터를 저장해 두는 기술.

http의 무상태성을 보완하는 기술이다.

주로 로그인 상태 유지, 유저 설정 저장 등에 쓰인다

클라이언트에 저장되며,
브라우저가 자동으로 서버에 보내주는 점이 핵심

프론트엔드에서 꼭 알아야 할 개념

1. 쿠키는 클라이언트에 저장된다

브라우저에서 document.cookie를 통해 접근 가능
서버로 요청할 때마다 자동으로 포함되어 전송됨 (같은 도메인일 경우)

2. 보안상 민감한 정보는 저장하면 안 된다

쿠키는 노출될 수 있어서, 절대로 비밀번호, 토큰 등의 민감 정보 저장 X
대신 HttpOnly 쿠키는 JS에서 접근 불가 (서버에서만 설정 가능)

3. 프론트에서 쿠키를 어떻게 설정/가져오는지 알아야 해

실무에서 쿠키가 쓰이는 예

사용 예시	설명
로그인 유지	JWT 토큰을 쿠키에 저장 (HttpOnly로 설정)
다크모드 상태 저장	브라우저 쿠키로 테마 설정 유지
언어 설정	사용자의 언어를 저장해서 다음 방문 시 적용

예제 코드

🍪 1. 쿠키 설정하기 (프론트에서)

// 쿠키 설정하기
document.cookie = "theme=dark; path=/; max-age=3600"; // 1시간 유지

// 다른 예: 로그인 후 닉네임 저장
document.cookie = "nickname=Jane; path=/";

🍪 2. 쿠키 가져오기 (프론트에서)

// 모든 쿠키 가져오기
console.log(document.cookie);
// 출력 예: "theme=dark; nickname=Jane"

// 특정 쿠키 값 가져오는 함수
function getCookie(name) {
  const cookieArr = document.cookie.split("; ");
  for (const cookie of cookieArr) {
    const [key, value] = cookie.split("=");
    if (key === name) return value;
  }
  return null;
}

console.log(getCookie("theme")); // dark

🍪 3. 서버(Node.js)에서 쿠키 설정 (Express)

// 설치 필요: express, cookie-parser
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();

app.use(cookieParser());

app.get('/set-cookie', (req, res) => {
  res.cookie('nickname', 'Jane', { maxAge: 3600000 }); // 1시간
  res.send('쿠키 설정됨');
});

app.get('/get-cookie', (req, res) => {
  const nickname = req.cookies.nickname;
  res.send(`쿠키 값: ${nickname}`);
});

app.listen(3000, () => console.log('Server running'));

🍪 4. 쿠키 삭제하기 (프론트)

document.cookie = "nickname=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

💡 프론트엔드 실무에서 꼭 알아야 할 포인트 정리

포인트	설명
document.cookie	브라우저 쿠키 접근
서버에서 HttpOnly 설정된 쿠키는 JS에서 못 읽음	보안용으로 자주 씀
SameSite 설정	다른 사이트에서 쿠키 자동 전송 막을 수 있음
CORS + 쿠키 같이 쓰려면 credentials: include 필요	중요한 실무 포인트

// fetch 시 쿠키 포함 (CORS 대응)
fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include'  // 쿠키 자동 포함
});

로그인 상태를 상태(state)에 저장하면 안 돼?

👉 "일시적으로는 가능하지만, 안전하지 않고 지속되지 않아서 실무에서는 쿠키나 로컬스토리지를 같이 써."

왜 상태(state)에만 저장하면 안 될까?

1. 새로고침하면 날아가

React, Vue, Svelte 같은 프론트 프레임워크는 상태를 메모리에 저장해.
새로고침하거나 페이지 이동하면 상태 초기화돼.

const [isLoggedIn, setIsLoggedIn] = useState(false);

로그인하고 true로 바꿔도, 새로고침하면 다시 false 됨.

2. 보안상 중요 정보 저장에는 부적절

state는 쉽게 조작 가능하고, 브라우저에 저장되지 않음.
로그인 정보를 클라이언트 측 상태로만 관리하면 보안에 취약해.

실무에서 어떻게 해야 해?

"서버 세션 or 토큰" + 쿠키 or 로컬스토리지 조합이 일반적이야.

가장 많이 쓰는 방식:

저장소 쓰임

저장소	쓰임
HttpOnly 쿠키	백엔드에서 설정한 JWT 토큰을 안전하게 저장
로컬스토리지	로그인 유무, 닉네임 등 일부 비민감 정보 저장
state	로그인 여부 표시 등 UI 상태 표시용으로만 사용

예시 흐름

사용자가 로그인 폼 작성
서버에서 로그인 성공 → JWT 발급
서버가 JWT를 HttpOnly 쿠키로 저장
프론트는 useEffect로 로그인 상태 확인 (ex: /auth/me 요청)
로그인 되어 있으면 isLoggedIn = true로 상태 업데이트

예제 코드 흐름

[서버]

// 로그인 성공 시 쿠키에 토큰 저장
res.cookie('token', jwtToken, { httpOnly: true, maxAge: 3600000 });
res.send({ message: 'Login success' });

[프론트]

// 로그인 상태 확인
useEffect(() => {
  fetch('/auth/me', { credentials: 'include' })  // 쿠키 포함
    .then(res => res.json())
    .then(data => {
      if (data.loggedIn) setIsLoggedIn(true);
    });
}, []);

“다시 보지 않기” 모달창 제어는 프론트 실무에서
쿠키를 활용하는 대표적인 예 중 하나야.

목표

웹사이트에 들어오면 모달이 뜬다
“다시 보지 않기” 체크하면, 쿠키에 저장
쿠키가 있으면 모달을 다시 안 보여준다

예제 코드 (Vanilla JS 기준)

📁 HTML

<div id="modal" style="display: none; position: fixed; background: white; border: 1px solid #ccc; padding: 20px;">
  <p>이 이벤트 다시 보지 않기</p>
  <button id="closeBtn">닫기</button>
  <label>
    <input type="checkbox" id="doNotShow"> 다시 보지 않기
  </label>
</div>

📁 JavaScript

// 쿠키 설정 함수
function setCookie(name, value, days) {
  const date = new Date();
  date.setDate(date.getDate() + days);
  document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/`;
}

// 쿠키 가져오는 함수
function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (let cookie of cookies) {
    const [key, val] = cookie.split('=');
    if (key === name) return val;
  }
  return null;
}

// 모달 제어 로직
window.addEventListener('DOMContentLoaded', () => {
  const modal = document.getElementById('modal');
  const closeBtn = document.getElementById('closeBtn');
  const doNotShow = document.getElementById('doNotShow');

  // 쿠키에 modal=hidden 이 없으면 보여주기
  if (getCookie('modal') !== 'hidden') {
    modal.style.display = 'block';
  }

  closeBtn.addEventListener('click', () => {
    modal.style.display = 'none';

    if (doNotShow.checked) {
      // 7일 동안 다시 안 보이게 설정
      setCookie('modal', 'hidden', 7);
    }
  });
});

작동 흐름 요약

페이지 로드 시, 쿠키에 modal=hidden이 없으면 모달을 보여줌
“다시 보지 않기” 체크하고 닫으면 → 쿠키에 저장됨 (modal=hidden)
다음에 페이지 방문 시 쿠키 때문에 모달이 안 뜸

React로 구현하려면?

원한다면 React 버전도 짜줄 수 있어!
useState, useEffect로 상태 관리하고,
js-cookie 같은 라이브러리로 더 쉽게 구현할 수 있어.

리액트(React) 버전으로
“다시 보지 않기” 모달창 구현 !✨

기능 요약 (React 버전)

모달이 처음엔 보여진다
“다시 보지 않기” 체크 후 닫으면 쿠키에 저장
쿠키가 있으면 다음 방문 시 모달 안 뜸

설치할 라이브러리

npm install js-cookie

코드 전체 (React + js-cookie)

// ModalComponent.jsx
import React, { useEffect, useState } from 'react';
import Cookies from 'js-cookie';

const ModalComponent = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [doNotShowAgain, setDoNotShowAgain] = useState(false);

  useEffect(() => {
    const cookie = Cookies.get('hideModal');
    if (cookie !== 'true') {
      setIsVisible(true);
    }
  }, []);

  const handleClose = () => {
    if (doNotShowAgain) {
      Cookies.set('hideModal', 'true', { expires: 7 }); // 7일간 저장
    }
    setIsVisible(false);
  };

  if (!isVisible) return null;

  return (
    <div style={{
      position: 'fixed', top: '20%', left: '30%', padding: '20px',
      background: '#fff', border: '1px solid #ccc', zIndex: 1000
    }}>
      <p>🎉 이벤트! 이 모달은 다시 보지 않기 설정이 가능해요.</p>
      <label>
        <input
          type="checkbox"
          checked={doNotShowAgain}
          onChange={(e) => setDoNotShowAgain(e.target.checked)}
        />
        다시 보지 않기
      </label>
      <br />
      <button onClick={handleClose}>닫기</button>
    </div>
  );
};

export default ModalComponent;

App.jsx에서 사용

import React from 'react';
import ModalComponent from './ModalComponent';

function App() {
  return (
    <div>
      <h1>홈페이지</h1>
      <ModalComponent />
    </div>
  );
}

export default App;

실행 결과

모달이 처음 뜸
"다시 보지 않기" 누르고 닫으면 → 쿠키 저장됨
페이지 새로고침하거나 다시 들어와도 모달 안 뜸!

추가 팁 (실무에서 자주 씀)

🎨 react-modal 같은 라이브러리 써서 스타일을 더 예쁘게 가능
❗ 팝업이 아닌 배너에도 같은 원리 사용 가능 (광고, 공지 등)

필요하면 디자인 살짝 예쁘게 다듬거나,
localStorage 버전도 알려줄 수 있어!
(쿠키는 기간 설정이 좋고, localStorage는 설정이 간편해)

지금 하고 있는 프로젝트랑 연관 지어 고민해보기!

1. 영화 페이지에 쿠키 활용하기 (예: 모달창)

영화 페이지를 만든다면, 쿠키를 이런 식으로 경험형 기능에 활용할 수 있어:

예시: 영화 추천 모달

처음 방문 시 영화 추천 모달 보여주기
“일주일간 안 보기” 누르면 → 쿠키로 저장
일주일 동안 다시 안 뜨게!

또 다른 아이디어

"이 영화 보셨나요?" 체크 → 쿠키에 저장
좋아요 누른 영화 리스트 → localStorage 혹은 쿠키에 저장해서 즐겨찾기 구현 가능

이런 식으로 쿠키를 사용하면 사용자 맞춤형 UI 경험을 줄 수 있어!

실무에서 직접 적용해보기. (코드)

좋아! 🎬
“영화 추천 모달”을 예로 들어서,
"이 영화 추천 모달은 하루에 한 번만 보여주기"
→ 쿠키에 저장해서 처리하는 방법

목표

- 페이지 열었을 때, 모달이 자동으로 뜨고

- 사용자가 닫으면 쿠키에 "hideMovieModal=true" 저장

- 다음 날 다시 열리기 전까진 안 뜸

핵심 포인트

- 쿠키에 값을 저장하고 (document.cookie)

- 다음 페이지 로딩 시 그 쿠키를 읽어서 (document.cookie.includes(...))

- 모달을 보여줄지 말지 결정해요

예제 코드 (HTML + JS)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>영화 추천</title>
  <style>
    #modal {
      display: none;
      position: fixed;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 2rem;
      box-shadow: 0 0 10px gray;
    }
    #modal.show {
      display: block;
    }
  </style>
</head>
<body>
  <div id="modal">
    🎬 오늘의 영화 추천!<br><br>
    <button onclick="closeModal()">닫기</button>
  </div>

  <script>
    // 쿠키 읽기
    function getCookie(name) {
      const value = document.cookie
        .split('; ')
        .find(row => row.startsWith(name + '='));
      return value ? value.split('=')[1] : null;
    }

    // 모달 닫기 + 쿠키 저장 (하루)
    function closeModal() {
      document.getElementById('modal').classList.remove('show');
      document.cookie = "hideMovieModal=true; max-age=86400"; // 1일
    }

    // 페이지 열렸을 때 쿠키 확인해서 모달 보여주기
    window.onload = function() {
      const hideModal = getCookie('hideMovieModal');
      if (!hideModal) {
        document.getElementById('modal').classList.add('show');
      }
    };
  </script>
</body>
</html>

설명 요약

max-age=86400 → 쿠키가 24시간 유지됨 (86400초)

getCookie() → 쿠키에서 원하는 키 찾기

closeModal() → 모달 닫고 쿠키 저장

근데 고민이 들었다. 쿠키에 다 저장하는건가 ?

아주 좋은 포인트 짚었어요, Jane!
장기적으로 사용자 정보를 유지하거나 사용자별로 다른 행동을 해야 할 때는 서버에 저장하는 게 가장 확실해요.

하지만 언제나 서버 저장이 정답은 아니고, 상황에 따라 나뉘어요. 아래에 간단하게 정리해볼게요:

🐰 서버에 저장하는 게 좋은 경우

로그인한 개별 사용자 정보일 때 (예: “이 영화 봤는지”, “좋아요 눌렀는지”)

여러 브라우저나 디바이스에서도 상태를 공유해야 할 때

추후에 분석/로그나 개인화된 서비스를 위해 데이터를 활용해야 할 때

정보가 중요하고 정확하게 유지되어야 할 때

예: 유튜브에서 "이 영상 봤어요" → 서버에 저장 (로그인 기반)

🐰 클라이언트(쿠키/로컬스토리지)에 저장하는 게 좋은 경우

로그인하지 않은 사용자에게도 적용하고 싶을 때

가볍고 빠르게 처리해야 할 때 (예: 팝업 다시 보지 않기)

개인정보가 아닌 간단한 상태일 때

서버 트래픽을 줄이고 싶을 때

예: "오늘 하루 이 팝업 보지 않기" → 로컬스토리지나 쿠키로 충분

📝 결론

로그인 사용자 + 중요한 상태 → 서버 저장이 베스트
비로그인 + 간단한 상태 → 쿠키 or 로컬스토리지로도 충분