CDN 이미지 파일 교체 후 Next.js <Image> 컴포넌트 캐싱 문제 해결하기
· 약 7분
Next.js의 <Image> 컴포넌트를 사용해 외부 이미지를 불러오는 경우, 이미지 파일을 교체해도 변경 내용이 반영되지 않는 문제가 발생할 수 있습니다.
이 문서에서는 여러 계층의 캐시로 인해 발생하는 이 문제의 원인을 살펴보고, 이미지 URL 변경과 CloudFront Invalidation을 통해 해결하는 방법을 소개합니다.
"Next.js" 태그로 연결된 4개 게시물개의 게시물이 있습니다.
모든 태그 보기Yarn v4, Next.js 환경 세팅과 마주했던 이슈들
· 약 13분
개인 Next.js 보일러 플레이트를 세팅하면서 Yarn 4 의 PnP(Plug And Play)와 Zero-install로 환경을 구성을 시도해보았다. 이번에 환경을 세팅하며 마주했던 상황들과 이슈들을 정리해본다. 편의상 Yarn PnP를 Yarn berry라 부르겠다.
좋은 코드를 위한 ESLint 정적 분석 딥 다이브
· 약 23분
"개발자에게 버그란 항상 따라다니는 그림자와 같다. 모든 개발자들이 버그가 없는 제품을 만들기 위해 최선을 다하지만 늘 그렇듯 버그는 예기치 못한 곳에서 매번 발생한다."
모던 리액트 Deep dive 중
버그와 예기치 못한 작동을 방지하기 위한 여러 가지 방법이 있는데, 그중 가장 빠르게 시도해 볼 수 있는 방법은 정적 코드 분석이다. 자바스크립트 생태계에 가장 많이 사용되는 정적 코드 분석 도구 ESLint가 무엇인지 어떻게 사용하면 좋을지 살펴보자.
Next.js를 중심으로 한 코어 웹 바이탈 최적화
· 약 20분
이전 포스팅에서 코어 웹 바이탈에 대해 살펴보고, 웹을 개선하기 위해 어떻게 코어 웹 바이탈을 측정할 수 있는지에 대해 알아보았다. 두 번째 단계로, 측정한 코어 웹 바이탈을 어떻게 개선할지 알아보자.
현재 담당하고 있는 프로젝트의 개발 환경인 Next.js 를 기준으로 정리해 보았다.