저장 코드 몰아넣기오늘 공부한 내용 🌤️
웹 페이지를 구현할 때 컴포넌트 방식으로 생각하는 법과 Client Side에서 데이터를 저장하는 방법에 대해 배웠다.
새로 알게된 내용 🌱
컴포넌트
지난 수업에서render라는 내부 함수는 왜 꼭 쓰이는 걸까가 궁금했었다.
굳이 render 함수에 넣어놓지 않아도 작동할 것 같아보였기 때문이다.
render 함수로만 검색해서 답을 찾진 못했는데 컴포넌트로 검색하니 관련 내용이 있는 것 같다.
컴포넌트 설계의 기반이 되는 것이 상태와 상태 변화에 뒤따라오는 DOM 조작, 즉 렌더링이기 때문이다.
단순히 웹페이지 부분부분을 객체로 쪼갠다고 컴포넌트가 되는게 아니라 상태를 통한 렌더링 기능이 있어야 하는 것 같다.
스크립트 태그 순서
그동안 Vanilla JS는 스크립트 파일이 하나만 있는 간단한 경우만 경험했다보니 스크립트 태그의 순서를 생각해본 적이 없었다.
HTML이 위에서 아래로 순차적으로 실행하니 어찌보면 당연한데, 의존성이 내려가는 순서대로 파일을 배치해야 한다.
이 이유 때문에라도 컴포넌트간의 의존성이 복잡해져서 트리 형태를 벗어나는 경우가 생기면 안될 것 같다.
리마인드된 내용 🔨
쿠키
document.cookie 는 key=value 의 형태를 가진 쌍으로 이루어져 있으며 각 쌍은 ; 으로 구분된다.
쿠키를 갱신하면 같은 key를 가진 쌍의 값만 변경되고 다른 쌍들은 유지된다.
쿠키의 키와 값엔 모든 글자가 허용되지만 형식의 유효성을 일관성있게 유지하기 위해 encodeURIComponent 를 사용해야한다.
인코딩 후 각 쌍은 4KB를 넘을 수 없고 도메인 하나당 저장할 수 있는 개수는 20여개이다.
키값 쌍 뒤에 옵션을 나열해서 지정해줄 수 있다.
expires나 max-age를 지정하면 유효기간을 설정할 수 있고 둘 다 지정하지 않으면 브라우저를 닫을 때 사라진다.
보안 취약점이 있기 때문에 사용을 주의해야한다.
보안 관련 옵션으로는 secure, samesite, httpOnly가 있다.
쿠키 허용 알림이 있는 이유는 쿠키를 이용해 사용자를 추적, 식별시 동의가 필요하기 때문이다.
잘 모르던 시절에는 쿠키 알림뜨면 뒤로가기 누른 적이 많아서 내꺼엔 안 쓰고싶다.
로컬 스토리지
세션 스토리지는 탭 한정인 반면, 로컬 스토리지는 도메인 기반이기 때문에 탭이 달라도 도메인이 같으면 공유된다.
따로 삭제하거나 비우지 않는 한 유지되기 때문에 캐시나 임시 저장 용도로도 쓰인다.
localStorage의 property로 조작할 수 있지만 setItem 으로 생성하는 것을 권장한다.
내부함수를 덮어 씌우는 위험성이 있기 때문이다.
객체를 넣을 때는 JSON.stringify 로 인코딩해서 넣고 뺄 때는 JSON.parse 로 꺼낸다.
그냥 넣으면 .toString() 이 자동 실행되기 때문에 [object Object] 가 들어간다.
브라우저 같은 곳에서 직접 수정을 해서 데이터 형식을 붕괴시킬 수도 있고, 너무 많은 양이 이미 저장되어 있으면 setItem 자체가 오류가 날 수도 있다.
따라서 스토리지를 다룰 땐 안전하게 다뤄야해서 보통 하나의 파일에 몰아서 관리한다고 한다.
예외 처리나 데이터 가공, 기본값 설정 등의 작업이 필요하다.
느낀점 🎬
벨로그 클론 토이프로젝트를 만들 때 임시 저장글 페이지도 담당했었는데 백엔드에서 임시글 스키마 구성이 어려울 것 같다고 해서 임시 저장 기능을 빼버렸었다. 근데 로컬 스토리지의 용도를 알고나니 내가 구현해야 했던게 아닌가 싶어서 반성했다..
참조
