저는 지난 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 탭을 열었을 때 마..

Redux Toolkit와 관련한 레퍼런스를 알아보던 중 흥미로운 Reddit Discussion을 읽었습니다. 의견 작성자는 Redux가 Context API의 어떠한 문제점을 해결해주는지에 대해 발제하였고, 이에 대해 Redux 개발팀의 maintainer가 답변을 달았습니다. maintainer분이 댓글로 달아준 내용도 의견 작성자의 질문에 대한 충분한 답변이 되었지만, 레퍼런스로 남겨주신 Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)에서 이에 대한 보다 심도깊은 내용을 다루고 있었기에 공유해보고 싶었습니다. 원문의 내용을 최대한 온전히 전달하고자 노력했으며, 추가적인 이해가 필요한 부분은 별..

프론트엔드의 관점에서 UX는 중요한 관심사입니다. 종종 다채롭고 직관적인 UI가 좋은 UX를 제공할 것이라고 생각하고 개발을 진행하기 쉽지만, 때로는 사용자의 편의를 위해 제공한 기능이 사용자에게 혼란을 가중시키곤 합니다. 이러한 측면에서 프론트엔드 개발자는 좋은 UX를 보장하는 원칙들에 대해 공부하고 고민해야 합니다. 여러분들은 이모지(Emoji)를 언제 사용하시나요? 저의 경우엔 메신저를 통해 대화를 할 때, 사적인 메일을 보낼 때 이모지를 자주 사용합니다. 그리고 때로는 공적인 포스팅과 문서를 작성할 때도 분위기를 편하게 가져가기 위해 이모지를 사용하고 있습니다. 이처럼 이모지는 복잡한 아이디어를 쉽게 전달하는 데 도움이 됩니다. 하지만 부주의한 이모지의 사용은 일부 사용자에게 불편을 야기할 수 있..

React에서는 전역상태 관리 라이브러리를 사용하여 체계적인 상태관리를 할 수 있습니다. React에서 활용되는 상태 관리 라이브러리들은 여러 개가 있습니다. 대표적으로 Redux, Recoil, Zustand, Jotai, MobX 등이 존재합니다. 그렇다면 이렇게 많은 상태 관리 라이브러리중에 어떤 라이브러리를 사용하면 좋을까요? 제 경우 사이드 프로젝트의 경우 가볍게 Recoil, Zustand를 많이 사용하곤 합니다. 저의 멘토님은 MobX의 열렬한 신봉자(?)이시고, 지인 중 한명은 Jotai 아이콘이 귀엽다는 이유로 Jotai공부를 최근에 시작했습니다. 물론 위와 같은 가벼운 이유로 상태 관리 라이브러리를 선정하기엔 리액트에서 상태 관리는 굉장히 큰 이슈입니다. 자신의 상황, 회사 내부 상황을..

Create React App으로 리액트 앱을 생성해본 적이 있으신 분들은 한번씩 App.test.js 파일을 들어본 경험이 있으실 겁니다. 제가 처음 React를 배웠을 땐 생성과 함께 과감하게 삭제해도 되는 파일로 간주하곤 했습니다. React는 생성과 함께 기본적인 테스팅 과정에서 React Testing Library를 사용하고 있습니다. 이러한 React Test Library는 App.test.js에 자동으로 추가되기 때문에 개발자는 프로젝트 생성과 함께 npm test 명령어를 실행해도 정상적으로 테스트가 동작하는 것을 확인할 수 있습니다. 이와같이 React에선 다양한 방식으로 테스트 코드를 작성하여 코드를 테스팅할 수 있습니다. 이번 포스팅에선 React Test를 진행할 때 알아야 할 ..