🌐 클라이언트 프론트엔드 개발 시 알아야 할 브라우저 옵션 완벽 가이드
쿠키, 스토리지, 히스토리 등 브라우저의 클라이언트 측 기능을 완전 정복하기
🧩 1. 개요
프론트엔드 개발에서 브라우저는 단순한 렌더러(renderer) 가 아니라,
데이터를 저장하고, 세션을 관리하며, 사용자 행동을 추적하고, 페이지
상태를 조작할 수 있는 플랫폼입니다.
이번 글에서는 ES5 문법 기준으로 브라우저 환경에서 사용할 수 있는 주요 기능들을 다룹니다:
- 🍪 Cookie (쿠키)
- 📦 Web Storage (localStorage, sessionStorage)
- 💾 IndexedDB
- 🧭 History API
- 🗺️ Location, Navigator 객체
- 🔄 Cache 및 Service Worker
🍪 2. Cookie (쿠키)
✅ 기본 개념
쿠키는 서버와 클라이언트 간에 상태 정보를 저장하기 위한 작은 데이터
조각입니다.
로그인 세션, 사용자 설정, 방문 기록 등을 유지할 때 사용됩니다.
⚙️ 생성 및 사용법 (ES5)
// 쿠키 생성
document.cookie = "username=JohnDoe; path=/; expires=Fri, 31 Dec 2025 23:59:59 GMT";
// 쿠키 읽기
console.log(document.cookie); // "username=JohnDoe"
// 쿠키 삭제
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";💡 실무 팁
Secure옵션은 HTTPS 환경에서만 전송됩니다.\HttpOnly옵션은 JS 접근 차단 (보안 강화).\SameSite속성은 CSRF 방어에 유용합니다.
📦 3. Web Storage
브라우저의 localStorage와 sessionStorage는 쿠키보다 더 많은
데이터를 안전하게 저장할 수 있는 공간입니다.
구분 설명 수명 크기 제한
localStorage 브라우저에 브라우저 약 5MB
영구 저장 닫아도 유지
sessionStorage 세션 단위 저장 브라우저 탭 약 5MB
닫으면 삭제
✅ 예제 코드 (ES5)
// 저장
localStorage.setItem("theme", "dark");
sessionStorage.setItem("sessionId", "xyz123");
// 읽기
console.log(localStorage.getItem("theme")); // dark
// 삭제
localStorage.removeItem("theme");
sessionStorage.clear();🧠 JSON 데이터 저장
Storage는 문자열만 저장 가능하므로, JSON을 문자열화해야 합니다.
var user = { name: "Alice", age: 28 };
localStorage.setItem("user", JSON.stringify(user));
var saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.name); // "Alice"💾 4. IndexedDB
🧩 개요
IndexedDB는 대용량 구조화된 데이터를 브라우저 내부 데이터베이스에
저장할 수 있는 API입니다.
스토리지보다 훨씬 많은 데이터를 다룰 수 있고, 비동기로 동작합니다.
⚙️ 사용 예시 (ES5)
var request = indexedDB.open("MyDatabase", 1);
request.onupgradeneeded = function(e) {
var db = e.target.result;
db.createObjectStore("users", { keyPath: "id" });
};
request.onsuccess = function(e) {
var db = e.target.result;
var tx = db.transaction("users", "readwrite");
var store = tx.objectStore("users");
store.put({ id: 1, name: "Alice", age: 28 });
};💡 실무 팁
- 오프라인 앱에서 데이터를 캐싱할 때 유용합니다.
- 구조화된 데이터 저장에 적합합니다.
🧭 5. History API
✅ 기본 개념
History 객체는 브라우저의 세션 기록(stack)을 조작할 수 있게 해주는
API입니다.
SPA(Single Page Application) 개발에서 자주 사용됩니다.
⚙️ 주요 메서드
메서드 설명
history.back() 뒤로 가기
history.forward() 앞으로 가기
history.go(n) n단계 이동
history.pushState(state, title, url) URL 변경하며 상태 추가
history.replaceState(state, title, url) 현재 상태 덮어쓰기
📘 예제 (ES5)
// 상태 추가
history.pushState({ page: 1 }, "title 1", "?page=1");
// 상태 변경 감지
window.onpopstate = function(event) {
console.log("현재 상태:", event.state);
};🗺️ 6. Location & Navigator 객체
📍 Location
현재 페이지의 URL 정보를 다루는 객체입니다.
console.log(location.href); // 전체 URL
console.log(location.hostname); // 도메인
console.log(location.pathname); // 경로
// 리디렉션
location.href = "https://example.com";🌐 Navigator
사용자의 브라우저, 운영체제, 네트워크 정보 등을 제공합니다.
console.log(navigator.userAgent);
console.log(navigator.language);
console.log(navigator.onLine);// 클립보드 복사 (HTTPS 환경 필요)
navigator.clipboard.writeText("복사할 텍스트");🔄 7. Cache & Service Worker
⚙️ Cache API (ES5)
if ('caches' in window) {
caches.open("my-cache").then(function(cache) {
cache.add("/styles.css");
});
}⚙️ Service Worker 등록
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/sw.js").then(function() {
console.log("Service Worker 등록 완료");
});
}🧠 8. 데이터 관리 전략
데이터 유형 유지 기간 보안 수준 용도
Cookie 단기 낮음 로그인 세션 localStorage 장기 중간 사용자 설정 sessionStorage 단기 중간 임시 상태 IndexedDB 장기 높음 대용량 캐싱 Cache 장기 중간 정적 파일 관리
🧭 9. 결론
현대 프론트엔드 개발자는 단순히 화면만 만드는 것이 아니라,
브라우저가 제공하는 다양한 저장소와 API를 효율적으로 활용해야
합니다.
✅ 핵심 요약\
- 쿠키: 인증 정보 저장\
- 스토리지: 클라이언트 데이터\
- IndexedDB: 대용량 데이터\
- History: 탐색 제어\
- Cache/Service Worker: 성능 최적화