본문 바로가기

트러블슈팅

React Query와 Next.js에서 헤더 데이터 캐싱 문제 트러블슈팅 이번 글에서는 실제 프로젝트에서 겪었던 헤더 데이터 로딩 이슈와 이를 React Query의 다양한 옵션을 활용해 해결한 경험을 공유합니다.문제 상황저희 웹사이트에서는 헤더가 공통 컴포넌트로 모든 페이지에 표시되고 있는 구조였습니다. 헤더에 표시될 배너 데이터를 효율적으로 관리하기 위해 처음에는 다음과 같은 접근 방식을 시도했습니다.Zustand를 사용하여 배너 데이터를 전역 상태로 관리React Query로 API 데이터를 가져와 Zustand 스토어에 저장컴포넌트에서는 Zustand 스토어의 데이터를 사용하여 렌더링그러나 이 방식에는 문제가 있었습니다. 콘솔에는 데이터가 정상적으로 로그되었지만, 이미지가 로드되지 않았고 페이지 이동 시 데이터가 유지되지 않았습니다.원인 분석불안정한 쿼리 키 구조: 함.. 더보기
웹사이트 사이트맵 자동 생성기 구현 트러블슈팅 최근 Next.js 환경에서 PHP 클라이언트로부터 데이터를 받아 사이트맵을 자동 생성하는 시스템을 구현하면서 겪었던 문제와 그 해결 과정을 공유하고자 합니다. 이 글이 비슷한 문제를 겪고 있는 개발자들에게 도움이 되길 바랍니다.도전 과제PHP 클라이언트에서 URL 데이터를 Next.js API로 전송합니다.구글 권장사항에 따라 이 데이터를 200개씩 묶어 XML 사이트맵 파일로 생성합니다.생성된 모든 사이트맵 파일을 가리키는 인덱스 파일을 생성합니다.대규모 사이트에서는 URL이 수천 개에 달할 수 있어, 하나의 사이트맵 파일에 모든 URL을 포함시키는 것보다 200개씩 분할하여 여러 개의 사이트맵 파일을 생성하는 방식이 권장됩니다. 하지만 구현 과정에서 예상치 못한 여러 문제가 발생했습니다. 문제 상황.. 더보기
React Coupon Selector에서 발생한 isToggle과 maxPriceCoupon 동기화 문제 해결하기 들어가며개발을 하다 보면 간단해 보이는 기능도 실제 구현 과정에서 예상치 못한 복잡성을 마주치게 됩니다. 최근 제가 경험한 쿠폰 선택 기능 구현 과정이 바로 그랬습니다. 자동/수동 쿠폰 선택이라는 겉보기에 단순한 기능이, 여러 상태값들이 얽히면서 꽤나 까다로운 문제로 발전했던 경험을 공유하고자 합니다. 구현하고자 했던 기능우리 프로젝트에서는 사용자에게 두 가지 쿠폰 선택 방식을 제공하고자 했습니다:자동 선택: 시스템이 자동으로 최대 할인 쿠폰을 선택수동 선택: 사용자가 직접 원하는 쿠폰을 선택이를 위해 isToggle이라는 상태값으로 자동/수동 모드를 전환하고, maxPriceCoupon으로 최대 할인 쿠폰을 관리하는 방식을 선택했습니다. 발생한 문제처음에는 단순하게 접근했습니다. isToggle이 fa.. 더보기
[react-beautiful-dnd] Could not find a declaration file for module 'react-beautiful-dnd'. 1. 에러가 발생한 이유이 에러는 타입스크립트 프로젝트에서 react-beautiful-dnd를 사용할 때 발생하는 문제로, 해당 라이브러리에 타입 정의 파일(.d.ts)이 포함되어 있지 않거나, 타입 패키지가 프로젝트에 설치되지 않은 경우에 나타납니다. 타입스크립트는 모든 모듈의 타입을 확인하려고 시도하지만, 타입 정의가 없으면 implicitly has an 'any' type 경고를 출력합니다. 2. 해결 방법1) 타입 정의 파일 설치react-beautiful-dnd는 커뮤니티가 관리하는 타입 정의 파일이 별도로 제공됩니다. 이를 설치하면 문제를 해결할 수 있습니다.npm install --save-dev @types/react-beautiful-dnd 혹은 yarn을 사용하는 경우:yarn ad.. 더보기
[Vercel] 배포 중 만난 에러와 해결 과정 들어가며Vercel을 통해 프로젝트를 배포하는 과정에서 예상치 못한 여러 에러를 만났습니다. 로컬에서는 잘 작동하던 프로젝트가 배포 환경에서 문제를 일으키는 경우가 종종 있는데, 이번 글에서는 제가 겪은 문제들과 해결 과정을 공유하고자 합니다.1. Prisma Type Error발생한 문제첫 번째로 만난 에러는 Prisma와 관련된 Type Error였습니다. 로컬 환경에서는 정상적으로 작동했기에 더욱 당황스러웠습니다.Error: Type error in Prisma Client원인 분석Vercel 배포 환경에서는 로컬 환경과 달리 Prisma 관련 명령어를 별도로 실행해줘야 한다는 것을 알게 되었습니다. 이는 배포 환경에서 Prisma Client가 제대로 생성되지 않아서 발생하는 문제였습니다.해결 방.. 더보기
SSE(Server-Sent Events)를 활용한 실시간 알림 시스템 개선 1. 프로젝트 배경이전 포스팅에서 SSE(Server-Sent Events)에 대한 기본 개념과 사용 사례를 설명드렸습니다. 이번에는 실전에서 SSE를 활용해 실시간 알림 기능을 구축하면서 겪은 문제와 그 해결 과정을 공유하고자 합니다. 이 글은 실시간 알림이 필요한 상황에서 SSE를 어떻게 효과적으로 적용하고, 성능 문제를 어떻게 해결했는지를 중심으로 작성하고 있습니다. 2. 문제 상황: 다수의 연결 시도로 인한 서버 성능 저하알림 시스템을 구현할 때 가장 큰 도전 과제는 동시에 많은 사용자가 접속해 실시간으로 알림을 받을 때 발생하는 서버 부하였습니다. 특히, 프로젝트 초기에는 사용자의 연결이 끊길 때마다 자동으로 재연결을 시도하게 설정해 놓았는데, 이로 인해 다수의 사용자가 알림을 동시에 요청하면 .. 더보기
[Prisma] 카테고리와 옵션 데이터의 중복 및 관리 문제 문제점이 프로젝트의 초기 구조에서는 각 Store별로 독립적인 Category, Size, Color 데이터를 가지고 있었기 때문에, 비슷한 카테고리나 옵션들이 중복 저장되는 문제가 있었습니다. 예를 들어 '의류'라는 카테고리가 여러 쇼핑몰에 각각 동일하게 생성되었으며, 각 쇼핑몰마다 동일한 '사이즈'와 '색상'이 중복되어 데이터베이스의 관리가 비효율적이고, 성능에도 영향을 미쳤습니다. 이러한 문제를 해결하기 위해 공통된 데이터를 관리하고 참조하는 방식으로 DB 테이블 구조를 변경하였으며, 이를 통해 성능과 관리 효율성을 개선했습니다. Before: 중복된 Category, Size, Color 테이블 관리문제: 각 쇼핑몰의 Category, Size, Color가 중복되어 저장되면서 데이터베이스가 불필.. 더보기
[error msg] A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. 리액트 인풋 관련 에러-Warning: A component is changing an uncontrolled input to be controlled. 문제상황처음 페이지에 들어갔을땐 발생하지 않는데 새로고침을 했을 시 콘솔에 위와 같은 에러메시지가 출력되는 상황이다. 아이디 해결과정아마 위의 컴포넌트는 부모 컴포넌트를 통해 props를 전달받아야 하는데 새로고침으로 값을 전달받지 못해undefined가 들어가서 그런 듯했다. 그래서 일단 인풋에 || 연산자로 undefined일 때 공백을 지정해주었다. 아이디   바로 해결이 되었다... 더보기

티스토리툴바