자체 이미지 최적화 작업 #654
Comments
hanyugeon
added
🐥 프론트
This was referenced Jul 2, 2024
Merged
hanyugeon
added a commit
that referenced
this issue
Jul 10, 2024
* setting: Sharp 설치 * feat: sharp를 활용한 외부 이미지 최적화 api routes 작성 * feat: SharpImage 컴포넌트 src, width, height, alt props 구현 * feat: 로컬 이미지 최적화 기능 추가 * fix: 이미지 요청이 중복해서 2, 3번 가던 버그 수정 * feat: 이미지 리사이징 기능 추가 * feat: img태그를 unoptimized 옵션의 Next/Image로 대체 * feat: gif 지원 기능 추가 * fix: 절대경로 인식 못하던 버그 수정 * refactor: SharpImage를 Image로 변경 * feat: 각 페이지에 새로운 Image 컴포넌트 적용 * chore: 필요없는 콘솔 로그 제거 * fix: api routes를 app 라우터 컨벤션으로 수정 * fix: BookCover를 제외한 곳에서는 임시적으로 Next/Image 활용 * fix: Vercel build 에러 해결 (Sharp를 0.32.6으로 다운 그레이드) * fix: api 컨벤션 수정 * chore: common/Image.tsx 컴포넌트의 NextImage import문 수정 * fix: common/Image 타입 선언 수정
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
목적
Next/Image컴포넌트를 통해 vercel이 제공하는 이미지 최적화는최근 30일 기준 최대 1000개까지 이미지 캐싱이 가능해요.
(1000개가 넘어가면 이미지가 패칭되지 않아요.)
해당 이슈를 통해서 도서 검색기능과 같이
이미지 요소를 많이 불러오는곳에 활용될
자체 Image 컴포넌트를 제작합니다.Sharp + API routes 조합을 활용합니다..!
참고
The text was updated successfully, but these errors were encountered: