25년 3월, 팀에 합류한 저는 주로 매칭 서비스의 프론트엔드 개발을 담당하고 있습니다.
이 서비스는 별도 백엔드 없이 Firebase를 사용 중인데요.
지난주 유저 CS를 처리하던 중 Firebase 콘솔에서 예상치 못한 요금 폭탄을 발견했습니다.
매칭 서비스 특성상 봄이 성수기이기에 유저 및 트래픽이 증가하긴 했지만, 특히 주요 페이지 개편 이후 요금이 비정상적으로 치솟았다는 사실을 알게 됐습니다.
이 문제를 계기로 새로 작성한 코드부터 레거시 코드까지 전수 점검했고, 결과적으로 현재까지 Firebase 비용을 기존 대비 80% 이상 절감할 수 있었습니다.
이 글에서는 그 과정을 공유합니다.
Next.js의 <Image> 컴포넌트를 사용해 외부 이미지를 불러오는 경우, 이미지 파일을 교체해도 변경 내용이 반영되지 않는 문제가 발생할 수 있습니다.
이 문서에서는 여러 계층의 캐시로 인해 발생하는 이 문제의 원인을 살펴보고, 이미지 URL 변경과 CloudFront Invalidation을 통해 해결하는 방법을 소개합니다.
개인 Next.js 보일러 플레이트를 세팅하면서 Yarn 4 의 PnP(Plug And Play)와 Zero-install로 환경을 구성을 시도해보았다. 이번에 환경을 세팅하며 마주했던 상황들과 이슈들을 정리해본다. 편의상 Yarn PnP를 Yarn berry라 부르겠다.
"개발자에게 버그란 항상 따라다니는 그림자와 같다. 모든 개발자들이 버그가 없는 제품을 만들기 위해 최선을 다하지만 늘 그렇듯 버그는 예기치 못한 곳에서 매번 발생한다."
모던 리액트 Deep dive 중
버그와 예기치 못한 작동을 방지하기 위한 여러 가지 방법이 있는데, 그중 가장 빠르게 시도해 볼 수 있는 방법은 정적 코드 분석이다. 자바스크립트 생태계에 가장 많이 사용되는 정적 코드 분석 도구 ESLint가 무엇인지 어떻게 사용하면 좋을지 살펴보자.
이전 포스팅에서 코어 웹 바이탈에 대해 살펴보고, 웹을 개선하기 위해 어떻게 코어 웹 바이탈을 측정할 수 있는지에 대해 알아보았다. 두 번째 단계로, 측정한 코어 웹 바이탈을 어떻게 개선할지 알아보자.
현재 담당하고 있는 프로젝트의 개발 환경인 Next.js 를 기준으로 정리해 보았다.