사용법이 간단하고 효율적인 리액트 컴포넌트용 카루셀 라이브러리인 pure-react-carousel를 사용하였습니다.
email.js
웹 상에서 바로 동작하는 문의 페이지를 구현하기 위해 email.js를 사용했습니다.
google-analytics
마케팅 등에 활용하기 위해서 google-analytics를 script로 컴포넌트화 하여 적용하였습니다.
💥 트러블 슈팅
ISR 적용
정적인 포트폴리오 사이트로 속도가 중요하고 관리자가 데이터 업데이트시 즉각 반영되어야 했습니다. Next.js의 revalidatePath를 사용하여 on demand로 페이지가 업데이트되는 ISR을 적용했습니다.
많은 이미지 처리의 어려움
일러스트 작가의 홈페이지다보니 이미지파일이 무척 많습니다. 초기에는 모두 로딩 될 때까지 기다리는 방식을 사용했으나 Next.js Image 컴포넌트의 priority, sizes, unoptimized props 를 조합하여 최적의 이미지 로딩을 구현하였습니다. lighthouse 점수가 80점대에서 90점대로 상승했습니다.
