업무 (11) 썸네일형 리스트형 리액트 리소스 로딩 속도 개선하기 최근 나는 회사 업무로 약관 동의를 구하는 화면을 개발하고 있다. 사용자가 약관 동의하기를 누르면 약관서를 서버로 부터 다운받아서 PDF로 보여주는데 우리 PO가 이 PDF 로딩이 너무 느리다는 QA를 남겼다. 처음엔 당황스러웠다. 로딩 속도는 네트워크 속도에 달려있는데 프론트엔드 개발자가 개선이 가능한가? 생각난 방법은 흔히 next.js의 image 컴포넌트에서 priority를 설정하듯이 html 첫 부분에서 리소스를 다운받게 하는 방법도 있지만 PO가 원하는 수준의 개선은 어려워 보였다. 고민하고 삽질한 시간은 길었지만 결론을 말하자면 브라우저의 캐시 정책을 이용하기로 했다. 브라우저는 리소스를 네트워크에서 다운로드 받으면 메모리 캐시 또는 디스크 캐시에 보관하는데 크기가 큰 pdf 파일 같은 경.. 이전 1 2 다음