2021-05-31 TIL

2021-05-31 TIL

• 오늘 한 것

  1. 짤해 프로젝트 lazy load, spinner - lazy load 구현을 위해 React 내장 유틸인 lazy와 Suspense를 사용했다. 기존에 카드 컴포넌트를 Suspense 컴포넌트로 감싸고 카드 이미지 컴포넌트를 하나 더 만들어서 이를 카드 컴포넌트에서 lazy 메소드를 이용해 import를 해서 사용했다. Suspense 컴포넌트의 fallback으로 spinner를 보여주도록 하였다.

  2. 짤해 프로젝트 auto complete - ant design의 AutoComplete 컴포넌트를 이용해 검색어 자동완성을 구현했다. AutoComplete의 option datasource는 util 폴더에 따로 파일을 빼서 작성했다. 수 많은 검색어를 모두 이 곳에 작성해야하는걸까? 그건 너무 비효율적이다. 주소나 지명 같은 데이터는 오픈소스 데이터를 받아서 사용할 수 있지만, 한글로 된 검색어 자동완성 데이터는 도대체 어디서 나오는걸까..

  3. 짤해 프로젝트 infinite scroll - react-virtualized 패키지를 이용해 이를 구현하려했으나, 현재 나의 레벨로는 이 패키지의 사용법을 이해할 수 없었다. 그렇다고 scroll event를 걸어서 DOM에 접근하는 방식은 하기 싫었다. 찾아보던 중 javascript에서 지원하는 IntersectionObserver라는 것을 알게 되었다. 타겟의 상위 엘리먼트와 뷰포트가 교차되는 부분을 비동기적으로 관찰하는 녀석인데, scroll event는 스크롤시 매번 함수를 호출해서 비효율적인 반면, 옵저버는 호출 수를 제한하고 reflow를 하지 않는 등 성능면에서 훨씬 뛰어나다. 다만 이를 react에 어떻게 적용시킬 것인가에 대해서 계속 삽질하며 어찌어찌 구현했다만, google custom search api의 하루 요청 할당량을 초과하고 말았다…. 24시간 후에 계속

• 내일 할 것
  1. 타입스크립트 이론 정리
  2. 짤해 프로젝트 - 상세페이지 작성, 카드 액션 추가
  3. 리액트 tutorial 프로젝트

• 끝으로

6월은 더욱 빡세게 살아보자

오늘의 한 줄 총평 : 지금까지 사놓은 책, 강의 전부 다 보기