'8월 6일' 칠십아홉 번째 기록 [TIL]

가은·2024년 8월 6일

👩‍🏫 오늘의 출석

❓칠십아홉 번째, 9 to 9을 해 본 소감❓

튜터님과 거의 2/3를 함께한 하루..!

📑오늘 학습한 내용

로컬 스토리지: 웹 애플리케이션의 영구적인 데이터 저장소

로컬 스토리지는 웹 브라우저에서 데이터를 영구적으로 저장할 수 있는 웹 스토리지 객체이다. 이 객체는 키-값 쌍으로 데이터를 저장하며, 브라우저를 종료하더라도 데이터가 사라지지 않는다. 로컬 스토리지는 쿠키와 달리 5MB에서 10MB 정도의 비교적 넉넉한 저장 용량을 제공한다.

로컬 스토리지의 특징

키-값 쌍으로 데이터 저장
로컬 스토리지는 데이터를 키-값 쌍으로 저장하며, 키와 값 모두 문자열로 저장된다. 이를 위해 setItem, getItem, removeItem, clear 메서드를 사용할 수 있으며, 일반 객체처럼 속성 접근도 가능하다.

// 데이터 저장
localStorage.setItem('name', 'jelly');
localStorage.setItem('age', '27');

// 데이터 불러오기
console.log(localStorage.getItem('name')); // 'jelly'

// 데이터 삭제
localStorage.removeItem('name');
localStorage.clear(); // 모든 데이터 삭제

// 객체처럼 사용
localStorage.name = 'jelly';
console.log(localStorage.name); // 'jelly'
delete localStorage.name;

영구적인 데이터 저장
로컬 스토리지에 저장된 데이터는 브라우저를 닫거나 컴퓨터를 재부팅해도 유지된다. 이는 사용자 설정이나 상태 정보를 장기간 보관해야 하는 상황에서 매우 유용하다.
실무 활용 예시
특정 기능이 단 한 번만 실행되어야 할 때 로컬 스토리지를 활용할 수 있다. 예를 들어, 사용자가 상품 구매 후 최초 로그인 시 "서비스 정식 가입이 완료되었습니다."라는 팝업을 한 번만 띄우고 싶다면, 다음과 같은 방식으로 구현할 수 있다.

useEffect(() => {
  const isFirstPopupShown = localStorage.getItem('isFirstPopupShown');
  
  if (!isFirstPopupShown && userInfo.is_first === 1) {
    openModalAlert('서비스 정식 가입이 완료되었습니다.');
    localStorage.setItem('isFirstPopupShown', 'true');
  }
}, [userInfo]);

주의할 점

보안 문제
브라우저의 개발자 도구를 통해 쉽게 접근할 수 있기 때문에 로컬 스토리지에 민감한 정보를 저장하지 않는 것이 좋다.
용량 제한
데이터 저장 용량은 브라우저마다 다르지만, 보통 5MB에서 10MB 정도로, 큰 데이터를 저장할 때는 주의가 필요하다.

Access-Control-Expose-Headers 헤더를 통해 서버는 교차-출처 요청 (cross-origin request)에 대한 응답으로 브라우저에서 실행 중인 스크립트가 사용할 수 있는 응답 헤더를 지정할 수 있다.
기본적으로 CORS 안전 목록 응답 헤더만 노출되며, 클라이언트가 다른 헤더에 접근할 수 있도록 하려면 서버는 Access-Control-Expose-Headers 헤더를 사용하여 헤더를 나열해야한다.