카
카카오엔터테인먼트FE
July 14, 20221회
Next/Image를 활용한 이미지 최적화
간단 소개
Next/Image를 사용하여 이미지 최적화, lazy loading, placeholder를 구현하고 발생한 이슈 해결 과정을 설명합니다.
AI Summary
- Next/Image 컴포넌트의 주요 기능
- Lazy loading: Intersection Observer 또는 scroll 이벤트를 사용하여 구현해야 하는 lazy loading을 자동으로 적용하여 초기 로딩 속도 향상.
- 이미지 사이즈 최적화: 디바이스 크기에 맞는 srcSet을 제공하고, webp와 같은 효율적인 포맷으로 변환하여 이미지 용량 감소. 최초 요청 시 Next.js 서버에서 최적화 후 캐싱.
- Placeholder 제공: 이미지 로드 전 placeholder를 제공하여 CLS(Cumulative Layout Shift) 방지.
- Next/Image 사용 시 장점 및 이슈 해결
- 성능 향상, 시각적 안정성, 빠른 페이지 로딩 등의 장점.
layout="fill"사용 시 과도하게 큰 이미지가 로드되는 문제 발생. width, height 속성의 의미를 정확히 이해하고, sizes 속성을 적절히 설정하여 해결.- 과도한 srcSet 생성을 막기 위해
layout="fixed"를 사용하거나,next.config.js에서images.imageSizes와images.deviceSizes를 조정하여 해결.
Next Feeds
9가지 프로그래밍 언어로 배우는 개념: 1편 - 타입 이론
타입 이론을 통해 다양한 프로그래밍 언어의 특징과 에러 처리 방식을 비교 분석하고, 이상적인 코드 구현에 대한 시각을 넓힌다.
타입 이론곱 타입합 타입Nullable패턴 매칭
2022. 7. 12.
데브시스터즈
React Query와 함께 Concurrent UI Pattern을 도입하는 방법
React Query와 Suspense, Error Boundary를 활용하여 Concurrent UI 패턴을 도입하고 선언형 컴포넌트를 구현하는 방법을 설명합니다.
React QuerySuspenseError BoundaryConcurrent UI 패턴선언형 컴포넌트
2022. 7. 11.
카카오페이
스크럼, 입고팀이 애자일하게 일하는 법 2부
스크럼 도입 후 개발자의 긍정적 경험 변화, 팀 협업 강화, 효율적인 업무 방식 학습 및 일정 관리의 합리성 확보.
스크럼애자일개발자협업회고
2022. 7. 11.
컬리
개발자에서 기술 작가로 전직하기까지 2년 간의 이야기
소프트웨어 엔지니어에서 기술 작가로 전직한 경험을 공유하며, 기술 작가의 역할, 중요성, 그리고 앞으로의 계획을 설명합니다.
기술작가문서화소프트웨어 엔지니어정보전달콘텐츠
2022. 7. 8.
데브시스터즈
우당탕탕 주문서 개발기
키친보드 팀의 주문서 도메인 개발 과정과 주요 고민, 해결 방안, 그리고 발생했던 이슈와 해결 과정을 공유합니다.
주문서동시성낙관적 잠금JPAhashCode
2022. 7. 8.
스포카
Webpack 빌드에 날개를 달아줄 Esbuild-Loader
Esbuild-Loader를 사용하여 Webpack 빌드 속도를 향상시키는 방법과 성능 비교 결과를 제시합니다.
WebpackEsbuild-LoaderBabel-Loader빌드 속도Transpilation
2022. 7. 7.
카카오엔터테인먼트FE