Aidengoldkr – Tech Blog

이번 수업에서는 로그인 구현의 핵심인 쿠키와 세션, 서버와 클라이언트가 데이터를 주고받는 규칙인 REST API, 그리고 대용량 데이터를 다루는 페이징까지 한 번에 다뤘다.

---

쿠키 (Cookie)

쿠키는 서버가 브라우저에 심어두는 작은 텍스트 파일이다. 브라우저에 저장되기 때문에 유저가 직접 열어볼 수 있다. 그래서 보안에 민감한 정보는 넣으면 안 된다.

주로 이런 상황에 쓰인다: "오늘 하루 보지 않기", "아이디 저장", 쇼핑몰 장바구니. HTTP는 기본적으로 Stateless(상태 없음), Connectionless(연결 없음) 특성을 가지는데, 쿠키가 그 공백을 메운다.

// 쿠키 저장 (만료일 포함)
const setUserInfoCookie = (username, expirationDays) => {
    const date = new Date();
    date.setTime(date.getTime() + expirationDays * 24 * 60 * 60 * 1000);
    const expires = `expires=${date.toUTCString()}`;
    document.cookie = `username=${username};${expires};path=/`;
};

// 쿠키 읽기
const getUserInfoFromCookie = () => {
    const cookieName = 'username=';
    const decodedCookie = decodeURIComponent(document.cookie);
    const cookieArray = decodedCookie.split(';');
    for (let cookie of cookieArray) {
        while (cookie.charAt(0) === ' ') cookie = cookie.substring(1);
        if (cookie.indexOf(cookieName) === 0) {
            return cookie.substring(cookieName.length);
        }
    }
    return '';
};

// 로그아웃 (쿠키 만료 처리)
const logoutUser = () => {
    document.cookie = 'username=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;';
};

로그아웃은 쿠키를 삭제하는 게 아니라 만료일을 과거로 설정해서 브라우저가 스스로 버리게 한다. 확인은 브라우저 개발자 도구 → 응용 프로그램 → 쿠키 탭에서 할 수 있다.

---

세션 (Session)

세션은 쿠키가 클라이언트에 저장하는 것과 달리, 민감한 정보를 서버 측에서 관리한다. 로그인 상태 유지가 대표적인 사용 사례다.

개념	저장 위치	적합한 정보
쿠키	브라우저 (클라이언트)	공개돼도 괜찮은 정보
세션	서버	외부에 공개되면 안 되는 정보

 

흐름은 이렇다. 서버가 로그인 시 고유한 세션 ID를 생성해 서버에 저장하고, 그 ID만 쿠키로 브라우저에 내려준다. 이후 요청마다 브라우저가 세션 ID를 쿠키에 담아 보내고, 서버는 그걸로 사용자를 식별한다.

세션을 서버 어디에 저장하느냐에 따라 3가지로 나뉜다.

저장 방식	특징
In Memory	코드 변수에 저장. 서버 재시작 시 전부 날아감
File Storage	텍스트 파일로 저장
Database	DB에 저장. 가장 안정적

 

---

API & REST API

API는 두 소프트웨어가 통신할 수 있게 해주는 창구다. 웹에서는 주로 클라이언트가 서버에 데이터를 요청하거나 전달하는 엔드포인트 URL을 뜻한다.

REST API는 그 창구를 만드는 규칙이다.

규칙	설명	예시
Resource 중심 URL	URL은 자원(명사)을 표현	/users, /posts/1
HTTP 메서드로 행위 표현	동사는 URL에 넣지 않음	/getUser ❌ → /users ✅
HTTP 상태코드 사용	결과를 코드로 명확히 전달	200, 201, 404, 500

HTTP 메서드와 CRUD 매핑.

메서드	CRUD
GET	Read (조회)
POST	Create (생성)
PUT / PATCH	Update (수정)
DELETE	Delete (삭제)

---

페이징 (Paging)

전체 데이터를 한 번에 내려주면 서버도 클라이언트도 다 죽는다. 페이징은 필요한 만큼만 잘라서 보내는 기법이다.

방식	설명	사용 사례
Offset 기반	page와 limit으로 슬라이싱	게시판, 검색 결과
Cursor 기반	마지막으로 본 항목 기준으로 다음 요청	인스타그램·유튜브 무한 스크롤

Offset 방식은 구현이 단순하지만 데이터가 많아질수록 뒤 페이지 조회가 느려진다. Cursor 방식은 구현이 복잡하지만 성능이 일정하다.

---

마무리: 세션과 쿠키는 "어디에 저장하느냐"의 차이고, REST API는 URL 설계 규칙이다. 페이징은 성능 문제가 생길 때 비로소 체감하는 개념인데, 미리 알고 설계하면 나중에 훨씬 편하다.