NextAPI (1) 썸네일형 리스트형 이미지 최적화 및 성능 개선 기존 프로젝트의 이미지가 온전히 원본 이미지를 img src를 사용해서 가져오고 있었기 때문에 이미지 관련 작업이 필요했다. 1) 우선은 프론트 단에서는 이미지를 viewport에 잡힐 때 load 시키고 (Intersection Observer) 2) 빠르게 구현했어야 했기 때문에 이미지 캐싱, 레이지 로딩 및 압축 포매팅 등 기능을 제공하는 next image를 사용했다. 3) 업로드 하는 부분도 Toast UI 에디터를 사용하고 있었기 때문에 사진을 에디터에 불러오는 훅을 커스텀해서 s3에 업로드 하기 전에 Next API를 사용해서 해당 이미지 최적화 로직을 구현하고, s3에 업로드한 후 백엔드에 업로드된 이미지 주소를 보내주었다. 이 외에도 웹폰트, 스크롤, 스켈레톤 등을 통해서 성능을 개선할 .. 이전 1 다음
