Next.js의 <Image> 컴포넌트를 사용해 외부 이미지를 불러오는 경우, 이미지 파일을 교체해도 변경 내용이 반영되지 않는 문제가 발생할 수 있습니다.
이 문서에서는 여러 계층의 캐시로 인해 발생하는 이 문제의 원인을 살펴보고, 이미지 URL 변경과 CloudFront Invalidation을 통해 해결하는 방법을 소개합니다.

사용자는 눈에 띄는 에러나 불완전한 작동을 경험하는 순간, 서비스 대한 신뢰를 잃습니다. 신뢰를 잃은 사용자는 이탈하거나 부정적인 인상을 가지기 쉽습니다.

프론트엔드 개발자로서 우리는 "허점이 보이지 않는 UX" 를 목표로 해야 합니다.

이 글에서는 왜 허점 없는 UX가 중요한지, 구체적으로 어떤 상황을 대비해야 하는지, 그리고 실제 적용할 수 있는 전략과 코드 예시를 함께 살펴봅니다.

이 글에서는 TanStack React Query에서 쿼리 키(queryKey)를 효율적이고 안전하게 관리하기 위해 사용하는 쿼리 키 팩토리(QueryKey factory) 패턴에 대해 살펴보고, TanStack React Query v5에서 도입된 queryOptions를 활용하여 쿼리키와 쿼리를 통합하여 관리하는 쿼리 팩토리(Query factory) 에 대해 알아봅니다.

개인 Next.js 보일러 플레이트를 세팅하면서 Yarn 4 의 PnP(Plug And Play)와 Zero-install로 환경을 구성을 시도해보았다. 이번에 환경을 세팅하며 마주했던 상황들과 이슈들을 정리해본다. 편의상 Yarn PnP를 Yarn berry라 부르겠다.

Element implicitly has an 'any' type because expression of type 'string'
can't be used to index type 'data'
No index signature with a parameter of type 'string' was found on type 'Data'

객체의 키 배열을 뽑아냈지만, string[] 타입으로 강제되어 위와 같은 에러를 만난 적이 있을 것이다.

이를 이해하기 위해 타입스크립트 인덱스 시그니처와 자바스크립트 덕 타이핑 관계를 알아보자.

프론트엔드라면 주로 사용하는 프로그래밍 언어 중 하나인 타입스크립트의 특히 '유틸리티 타입'이라는 매우 유용한 기능을 알아보려고 한다.

타입스크립트는 자바스크립트의 슈퍼셋으로, 자바스크립트에 정적 타입 기능을 추가한 언어다. 이를 통해 코드의 안정성을 높이고 버그를 줄일 수 있게 되는데, 이러한 타입스크립트의 장점 중 하나가 바로 '유틸리티 타입'이다.

프로젝트 대부분을 sass를 사용하면서, 프로젝트 멤버가 바뀌거나 다른 개발자의 스타일을 수정하며 사뭇 두려워질 때면 style도 js,ts 코드와 마찬가지로 개선해 나가는 게 중요하다고 느끼게 된다.

style도 레거시가 될 수 있는데 이에 도움될뿐 아니라 심지어 스크립트를 제거하여 손쉽게 사용자 경험의 성과를 보여줄 수 있는 최신 css의 12가지 속성에 대해 알아보자.

"개발자에게 버그란 항상 따라다니는 그림자와 같다. 모든 개발자들이 버그가 없는 제품을 만들기 위해 최선을 다하지만 늘 그렇듯 버그는 예기치 못한 곳에서 매번 발생한다."

모던 리액트 Deep dive 중

버그와 예기치 못한 작동을 방지하기 위한 여러 가지 방법이 있는데, 그중 가장 빠르게 시도해 볼 수 있는 방법은 정적 코드 분석이다. 자바스크립트 생태계에 가장 많이 사용되는 정적 코드 분석 도구 ESLint가 무엇인지 어떻게 사용하면 좋을지 살펴보자.

이 글은 '모던 리액트 Deep Dive' 를 읽고 실무 개발자의 관점에서 느낀 점을 정리한 서평입니다.
책의 주요 내용, 개인적으로 인상 깊었던 부분, 아쉬운 점 등을 솔직하게 공유합니다.
React를 이미 사용해본 독자라면 이 책이 어떤 도움이 될지 구체적인 힌트를 얻을 수 있을 것입니다.

이전 포스팅에서 코어 웹 바이탈에 대해 살펴보고, 웹을 개선하기 위해 어떻게 코어 웹 바이탈을 측정할 수 있는지에 대해 알아보았다. 두 번째 단계로, 측정한 코어 웹 바이탈을 어떻게 개선할지 알아보자.

현재 담당하고 있는 프로젝트의 개발 환경인 Next.js 를 기준으로 정리해 보았다.

이전 포스팅:
웹 성능 지표, 코어 웹 바이탈(CWV)
코어 웹 바이탈 측정을 위한 도구 모음