개요
사실 이번 내용은 기업과제라 자세하게 언급이 불가하다.
쨋든 간단하게 요약하자면 검색어 추ㅊ... 읍읍
기술 선정
기술 선정에 여러 고민이 있었다.
로컬 캐싱 구현 방법
로컬 캐싱을 구현하는데 논쟁이 있었다.
10명이 각자 과제를 구현해보고 괜찮은 부분들은 합치자고 했다.
근데 로컬 캐싱 부분에서 전부 WebStorage로 구현해 왔다.
나 혼자만 in-memory로 구현했다.
현 과제에는 in-memory 방식이 더 적합해 보였지만
나 혼자만 한 방식이라 계속 이 방식으로 하자고 주장했다간
내가 한 방식으로 하자고 하는거 같아 한 두번 말하고 말았다.
결국 SessionStorage와 cacheStorage로 방식이 나뉘었다.
in-memory 로컬 캐싱의 경우 개인적으로 3가지 선택지를 두고 고민이 생겼다.
캐시 변수 저장을
-
useState로 하면 setState마다 리렌더링이 일어나는데 굳이 캐시 데이터가
변할 때마다 리렌더링을 시킬 필요가 있을까? -
useRef 사용시 완벽하나 어디선가 useRef는 DOM 조작 목적외에는
지양하라는 글을 봤다. -
JS Object 일반 객체 리터럴로 만들어 export하여 받아 쓰면 된다.
하지만 리액트 스타일이 아니라 너무 Vanilla JS 스트가 아닌가 싶다.
강사님에게 여쭤보니 상태가 변할 때마다 화면에 리렌더링이 필요한 경우는
useState 아닐 경우는 useRef가 적당하다고 하셨다.
useRef가 DOM 조작에만 쓰라는 건 대체 어디서 나온 말이냐고 하셨다.
공식문서를 읽어보니 진짜 그랬다.ㅋㅋ
그냥 DOM 조작 용도로 자주 쓰인다고만 나와있고
변수 저장 목적으로도 사용하는법이 잘 나와있다. 왜 그런 말이나온거지?
근데 어차피 현업에서는 React-Query 같은 라이브러리 쓴다고 하셔서
뭐 딱히 더 이상 고민할 필요는 없어 보인다.
아래는 Cookie vs Session vs WebStorage 이다.
쿠키
- 각 브라우저별, 사이트별로 클라이언트에 저장
- DB 형태의 key-value로 문자열만 저장 가능
- 시간제한 설정가능하고 브라우저가 종료되어도 데이터 유지
- 빠르지만 보안에 취약
- 최대 쿠키 수 20개, 용량 4KB 제한
- 클라이언트에서 서버로 요청과 함께 보내진 쿠키가 서버에 존재하는 경우 첫 방문, 아닐 경우 재방문으로 취급한다.
세션
- 클라이언트에는 세션 쿠키가 발급되고 서버에는 세션 객체가 생성된다.
- 클라이언트에서 서버로 통신할 때,
세션쿠키의 세션 id와 세션 객체의 세션 id가 동일하면 재방문으로 취급한다. - 세션은 일반적으로 브라우저가 종료되는 순간 삭제되지만 기간 설정이 가능하다.
LocalStorage
- 저장한 데이터는 명시적으로 지우지 않으면 영구 보관된다.
(브라우저를 닫거나 새로고침해도 데이터가 유지된다.) - 2개 이상의 브라우저를 띄워놨을 때 도메인이 같으면 데이터를 공유한다.
- 용량은 브라우저별로 상이하나 평균 몇 MB로 추정 큰 데이터 저장에는 적합하지 않다.
- key-value 형태로 저장되나 문자열만 저장 가능
SessionStorage
- 같은 탭 내에서만 유지된다.
- 브라우저나 탭이 종료되면 데이터도 같이 지워진다.
indexedDB
- 대용량 저장에 용이하다
- javascript가 이해하는 어떠한 값이라도 모두 저장할 수 있다.
- 용량 제한은 특별히 없으나
HDD 저장소 상태 나 브라우저의 상태에 따라서 달라 질 수 있다. - same-origin policy 을 따른다 때문에, http 도메인에서 만든 IndexedDB 는 다른 https 도메인에서는 접근할 수 없다.
- 데이터는 영속적으로 유지되지만, 특정 상황에 따라 삭제될 수 있다.
cacheStorage
- 비동기로 동작해 메인 스레드를 차단하지 않고 Promise를 반환한다.
- 브라우저별로 디스크의 최대 60 ~ 80%까지 저장이 가능하다.
- DOM 등을 제외한 기본 JS 타입들을 저장 가능하다.
CORS
CORS 문제의 경우 전에 내가 직접 서버를 만들었을 때는
서버 측에서 cors 모듈을 써서 해결했지만
이번 과제에서는 정해준 api가 있어서 클라이언트 측에서 해결해야 했다.
React의 경우 Webpack에서 프록시 설정을 해주면 되는데 CRA로 프로젝트를 생성했기 때문에 package.json에서 프록시 설정을 해주니 해결되었다.
