저는 지난 8월, 신한 해커톤 with SSAFY에서 3위를 수상한 '돈기부여' 프로젝트에 참여했습니다. 돈기부여는 신한은행 예치금을 걸고 금융 목표에 도전하는 SOL 인앱 챌린지 서비스로, 사용자의 이체 내역을 자동으로 추적하여 커피/술/배달비 줄이기 챌린지, 행운의 777 적금, 매일 금융 퀴즈 등 다양한 금융 챌린지를 제공하는 서비스였습니다. 프로젝트가 성공적으로 마무리되고 시연까지 완료했지만, 개발 과정에서 겪었던 한 가지 문제가 계속 머릿속을 맴돌았습니다. 바로 React Query의 query key 관리 문제였죠. 이번 포스팅에서는 규모가 있는 프로젝트에서 효율적으로 Query Key를 관리하기 위한 React Query팀의 추천 라이브러리에 대해 소개하고, 적용 과정에서 얻은 인사이트를 공..

"next-sitemap이 TypeScript 파일을 못 읽는다고요?" 제가 Poromy 프로젝트의 SEO를 개선하던 중 만난 당황스러운 순간이었습니다. 기업 상세 페이지들을 sitemap에 포함시켜야 했는데, next-sitemap이 제 TypeScript 데이터 파일들을 읽지 못하는 문제가 발생했죠. 단순히 ID들을 하드코딩하면 끝날 일이었지만, 그건 제 개발자 자존심이 허락하지 않았습니다. 이번 포스팅에서는 Next.js 15 환경에서 TypeScript 파일을 next-sitemap과 통합하는 과정에서 겪은 시행착오와 최종 해결 방법을 공유하고자 합니다. 특히 동적 데이터 기반의 sitemap을 자동으로 생성하는 확장 가능한 시스템을 구축한 경험을 나누겠습니다. 문제 상황저는 Poromy라는 서비..

최근 취준생을 위한 AI 자소서 프롬프트 생성 서비스 Poromy AI를 개발하면서 흥미로운 기술적 도전에 직면했습니다. 우리 서비스는 사용자가 공유한 채용공고 URL을 분석하여 해당 기업의 로고, 채용 페이지 미리보기 이미지 등 다양한 외부 이미지를 표시해야 했습니다. 하지만 Next.js의 보안 정책으로 인해 예상치 못한 문제가 발생했죠. 이번 포스팅에서는 Next.js의 외부 도메인 이미지 제한 문제를 이미지 프록시 API로 해결한 경험을 공유하고자 합니다. 특히 채용 플랫폼 특성상 수백 개의 기업 도메인을 다뤄야 했던 상황에서 어떻게 유연하고 확장 가능한 솔루션을 구현했는지 상세히 다루겠습니다. 문제 상황: 채용 플랫폼의 특수한 요구사항Poromy AI는 취준생들이 채용공고를 분석하여 맞춤형 자기..

"로딩이 왜 이렇게 느려요?" 최근 Next.js 15로 개발한 서비스 Poromy AI의 문의 페이지에서 이런 피드백이 들어왔습니다. 페이지 로딩에 5-7초가 걸리는 문제였죠. 개발 환경에서는 전혀 느끼지 못했던 문제였는데, 프로덕션 환경에서 사용자들이 겪는 경험은 완전히 달랐습니다.처음엔 막막했습니다. Next.js 15의 새로운 기능들을 제대로 활용하지 못한 건가? Supabase 쿼리가 문제인가? 아니면 배포 환경의 문제일까?이번 포스팅에서는 Chrome DevTools Performance 탭을 활용해 실제 병목 지점을 찾아내고, 성능을 57% 개선한 과정을 공유하려고 합니다. 문제 상황Chrome DevTools Performance 분석 결과제가 처음 Performance 탭을 열었을 때 마..