Next.js 캐싱 가이드를 읽고 나서, 지금 운영 중인 프로젝트의 캐싱 전략도 한 번 정리해봐야겠다는 생각이 들었습니다.

Next.js App Router의 캐싱은 레이어가 많습니다. Request Memoization, Data Cache, Full Route Cache, Router Cache를 각각 이해하는 것도 중요하지만, 실무에서는 그보다 먼저 물어야 할 질문이 있었습니다.

이 데이터는 모든 사용자에게 같은 값을 보여줘도 되는가?

이 질문에 대한 답에 따라 Next.js 캐시에 올릴 데이터, TanStack Query에 남길 데이터, 클라이언트에서만 요청할 개인화 데이터를 나눌 수 있었습니다.

이 글은 Next.js 캐싱 전체를 깊게 설명하는 글이 아닙니다. 원래 Next 캐싱을 적극적으로 쓰지 않던 프로젝트에 일부 캐싱을 도입하면서, 어떤 기준으로 경계를 나눴는지 정리한 실무 기록입니다.

"결제되었다고 알림이 왔는데, 왜 티켓 보관함에는 티켓이 없나요?"

공연 플랫폼 서비스 운영 중 CS가 접수되었습니다. 로그를 확인해 보니 결제 솔루션(PortOne) 콘솔에는 결제 내역이 있는데, 정작 우리 서비스 DB에는 해당 주문에 대한 상품(ex: 티켓)이 생성되지 않은 상태였습니다.

이 포스팅은 프론트엔드 중심의 결제 처리 방식에서 발생하는 이러한 구조적 취약점을 분석하고, 이를 Webhook 기반의 서버 주도(Server-Driven) 아키텍처로 전환하여 결제 누락 문제를 해결한 과정을 공유합니다.

지난주 유저 CS를 처리하던 중 Firebase 콘솔에서 예상치 못한 요금 폭탄을 발견했습니다.

이 서비스는 별도 백엔드 없이 Firebase를 사용 중인데요.

매칭 서비스 특성상 봄이 성수기이기에 유저 및 트래픽이 증가하긴 했지만, 특히 주요 페이지 개편 이후 요금이 비정상적으로 치솟았다는 사실을 알게 됐습니다.

이 문제를 계기로 새로 작성한 코드부터 레거시 코드까지 전수 점검했고, 결과적으로 현재까지 Firebase 비용을 기존 대비 80% 이상 절감할 수 있었습니다.

이 글에서는 그 과정을 공유합니다.

Vercel에 배포된 Next.js 프로젝트에서 <Image> 컴포넌트를 사용해 외부 이미지를 불러오는 경우, 원본 이미지를 교체해도 변경 내용이 반영되지 않는 문제가 발생할 수 있습니다.

Vercel 배포 환경을 기준으로 여러 계층의 캐시로 인해 발생하는 이 문제의 원인을 살펴보고, Vercel Cache Purge와 CloudFront Invalidation을 통해 해결하는 방법을 알아봅니다.

사용자는 내부 시스템을 알지 못하기 때문에, 사소한 멈칫거림이나 불친절한 에러 메시지 하나에도 쉽게 불안함을 느낍니다.
그리고 이 불안은 곧 "이 서비스는 믿을 수 없다" 는 인상으로 이어지곤 합니다.

프론트엔드 개발자는 단순히 API를 연결하고 화면을 그리는 것을 넘어, 사용자가 서비스를 안심하고 사용할 수 있도록 돕는 역할도 해야 한다고 생각합니다.

이 글에서는 우리가 무심코 놓치기 쉬운, 하지만 사용자의 불안을 덜어줄 수 있는 몇 가지 디테일을 살펴보려고 합니다.

이 글에서는 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가지 속성에 대해 알아보자.