브라우저 저장소와 position

오늘도 개발 공부 시작!

 

브라우저 저장소

웹 브라우저가 사용자의 데이터를 로컬에 저장할 수 있도록 하는 기술이다.

종류에는

• 쿠키 (Cookies)
• 로컬 스토리지 (LocalStorage)
• 세션 스토리지 (SessionStorage)
• 인덱스 DB (IndexedDB)

가 있다.

 

쿠키 (Cookies)

주로 인증 정보 (로그인 상태 유지), 사용자 설정에 대한 값 등에 사용되는데 서버와 함께 자동으로 전송(HTTP 요청 시마다)되고, 유효기간을 설정할 수 있다.

단, 저장한 정보가 쉽게 탈취될 가능성이 높기 때문에 민감한 정보를 저장하진 말아야 한다. 

 

로컬 스토리지 (LocalStorage)

브라우저 세션이 종료되어도 데이터가 유지되기 때문에 로그인한 사용자의 정보나 UI 설정값 등 창이 닫혀도 데이터 기억하고 있어야 하는 경우에 적합하다. 각 도메인 당 5~10MB 저장이 가능한데 서버에는 자동 전송되진 않는다.

localStorage.setItem('key', 'value')
localStorage.getItem('key')

세션 스토리지 (SessionStorage)

탭 또는 창 단위로 임시 데이터를 저장할 때 사용한다. 같은 브라우저의 탭 또는 창에서만 접근 가능하고, 브라우저를 닫으면 데이터가 삭제된다.

sessionStorage.setItem('key', 'value')
sessionStorage.getItem('key')

IndexedDB

구조화된 데이터(객체, 대용량 등)를 저장할 수 있는 고급 저장소이다. 비동기 처리가 가능하다. 검색 인덱스를 지원하기 때문에 특정 필드 기준으로 빠른 검색이 가능하도록 인덱스를 지정 가능하고, 로컬 스토리지 (LocalStorage)보다 많은 데이터를 저장할 수 있다.

오프라인 웹앱에서 많이 사용다. (예: PWA, 오프라인 메모앱 등)

 

표로 정리해보면

항목	쿠키	로컬 스토리지	세션 스토리지	IndexedDB
용량 제한	~4KB	~5-10MB	~5MB	수백 MB 이상 가능
만료 시점	설정 가능	사용자가 직접 삭제 전까지	브라우저 탭 종료 시	명시적 삭제 필요
서버로 전송 여부	O (HTTP에 포함)	X	X	X
접근 방식	동기	동기	동기	비동기
복잡도	낮음	낮음	낮음	높음
최대 용량	4KB	5MB-10MB	5MB-10MB	수백 MB ~ 수 GB (일반적으로 디스크 용량의 50% 이하)

 

브라우저가 용량 제한을 넘으면 QuotaExceededError 예외가 발생한다. 민감하거나 중요한 데이터는 항상 서버에 저장하고 암호화된 토큰만 브라우저에 저장하는 방향으로 사용되어야 한다!

 

Position

CSS에서 요소를 배치할 때 사용하는 속성이다.

속성 값은 5가지가 있다.

• static
• reletive
• absolute
• fixed
• sticky

static (기본값)

특별한 위치 지정 없이 요소의 흐름 (flow)대로 배치한다.

top / right / bottom / left (offset) 속성이 무시되며, 다른 요소와 겹치지 않고 자연스럽게 배치된다.

 

relative

기본 위치를 기준으로 상대적인 위치 조정이 가능하다.

원래의 기본 위치에서 top / right / bottom / left (offset) 속성으로 이동할 수 있다.

 

absolute

가장 가까운 position: relative, absolute, fixed, sticky를 가진 조상 요소를 기준으로 위치 조정이 가능하다.

요소와 겹칠 수도 있고, 조상 중 position이 설정된 요소가 없다면 body를 기준으로 위치를 잡는다.

 

fixed

브라우저 창(뷰포트: 화면에 실제 내용이 표시되는 영역)을 기준으로 고정된 위치에 배치한다. 스크롤해도 위치가 변하지 않고, 주로 상단 고정 헤더나 플로팅 버튼에 사용된다.

 

sticky

부모의 요소를 벗어나지 않은 채로 지정된 방향 (op / right / bottom / left)으로 위치가 도달하면 fixed처럼 동작한다. 부모 요소에 overflow: hidden 속성이 있는 경우 의도대로 동작하지 않을 수 있다.