성능최적화

진행중인 프로젝트는 반려동물의 기록과 사진 공유가 주된 기능인 만큼, 이미지 최적화 작업이 중요하다고 생각했다.번들사이즈를 열심히 줄여도 KB단위지만.. 이미지는 단위부터 MB이므로, 이미지 최적화는 필수이다. Next.js의 이미지 최적화Next.js는 next/image를 통해 기본적으로 다음과 같은 이미지 최적화 작업을 수행해준다.But, 리액트는 이와 같은 이미지 최적화를 자동으로 처리해주지 않으므로, 직접 최적화 작업을 수행해야한다...!🫣  자동 resizingWebp 같은 최신 이미지 포맷 지원Lazy Loading로 페이지 로딩 속도 향상CDN 지원이미지 최적화를 위한 여러가지 방법들을 공부해면서, 적용해보았다.  1. browser-image-compression 활용한 이미지 폭, 타..

사진 공유가 메인 서비스 특성 상, 텍스트보단 이미지의 관심도가 높기 때문에 이미지를 먼저 배치하였다. 그러다보니, 우려했던대로 이미지가 로딩되고나서 텍스트가 밀리게되면서 대규모 레이아웃 현상이 발생하였다. 여러장의 이미지의 경우에 CLS 점수가 0.8로 어마어마하다... 👉🏻 placeholder로 레이아웃이 밀리는 현상을 방지하려고 한다.  ❗️ 문제점처음엔 이미지를 업로드하는 사용자 입장에서, 게시물의 이미지가 규정된 사이즈 (1:1, 3:4)을 사용하면 이미지 잘림현상이 발생하는것을 피하고 싶었기 때문에 이와 같이 이미지 사이즈를 정의할 수 없었다.하지만, 이 방식을 유지한다면 기존의 원본비율을 이미지 로딩전엔 알수가 없다보니 placeholder을 정의하기가 난감해진다placeholder만 ..

CSR의 대표적인 초기 로딩속도를 개선하기 위한 작업들을 수행해보았다. 1. React.lazy와 Suspense 적용하기 SPA의 대표적인 단점으로, 최초 로드시 필요하지 않을 수 있는 모든 파일을 다운받기 때문에, 초기 로딩속도가 길어진다는 점이 있다. 이를 개선하기 위한 대표적인 해결방법중 하나가 lazy Loading이다. 동적 load  해당 모듈이 필요할 때만 로드 → 코드 스플리팅(code splitting)과 지연 로딩(lazy loading)을 가능 → 사용자가 특정 페이지나 기능에 접근할 때 필요한 리소스만 다운로드멍냥생활 서비스의 라우트는 다음과 같이 정의되어 있다.const PATHS = { main: "/main", logIn: "/", signUp: "/signup", f..