🔥 Trouble Shooting

무한스크롤 이벤트가 계속 동작하면서 발생한 문제와 그 해결 과정을 중점적으로 설명했어요.

개발 중 props의 타입이 명시되지 않아 발생한 다음 에러를 해결했습니다: handleSubmit' is missing in props validation PropTypes를 설정하여 컴포넌트의 안정성을 높이고, 타입 관련 버그를 사전에 방지했습니다! 👀

React 컴포넌트에서 key prop을 직접 접근하려 할 때 다음과 같은 경고가 발생했습니다 👀

🚨 문제 상황 프로젝트 진행시에 React 컴포넌트에서 PropTypes 정의 시 다음과 같은 에러가 발생했습니다!

미니 프로젝트 포켓몬 도감에서 중간에 위치한 포켓몬을 삭제할 때 선택 인덱스(selectedIdx)가 부적절하게 감소하는 문제가 발생했습니다.

React 컴포넌트의 return문 안에서 switch문을 직접 사용하려다 발생한 에러..React 컴포넌트의 return문은 선언적이어야 함!

React 프로젝트에서 Kakao SDK를 사용할 때 다음과 같은 에러가 발생했습니다

상품 등록/수정 페이지에서 기존 상품 정보를 불러올 때, 아무런 로직을 하지않아도 alert 경고 문구가 계속 뜨고 무한 루프가 발생했다...

Tanstack Query의 useQuery를 사용하는데 반환된 데이터가 data.data와 같이 중첩되어 있었다. return { data, error }; 코드가 문제가 되는 이유는 이중 래핑(double wrapping) 때문이다

zsh: command not found: yarn이전 포스트, yarn을 잘못 yarn install 했던것이 화근인지 또 문제가 발생했다. yarn으로 설정된 외부 프로젝트를 yarn 명령어를 시작하니.. 아래와 같은 경고 메시지가 출력되었다.

오늘 Next.js 프로젝트를 진행하면서 환경변수 사용 방식에 대해 다시 한번 확인했다. 또한 next js는 외부 링크를 사용 시에 따로 config 파일에 정의해두어야 한다.

Next.js에서 use() 쓰다가 generateMetadata()에서 터진 경험담. 왜 안 되는지, 언제 use() 쓰고 언제 await 써야 하는지 여러차레 시도해보면서 알아낸 것들 정리해봤어요

Next.js에서 next-themes로 다크모드 구현 중 발생한 하이드레이션 불일치 오류 해결기. SSR과 CSR 차이로 인한 문제 원인을 분석하고 suppressHydrationWarning을 활용한 해결 과정을 정리했습니다.

팀 프로젝트를 진행중에 만난 트러블 슈팅.. 라우터 핸들러를 호출하는데 데이터를 불러오지 못하는 문제가 발생..

문제 현상공유하기 모달을 처음 클릭할 때 모달이 바로 닫히는 현상이 발생하여 해결과정을 기록하였습니다..

클라이언트 사이드에서 계정별 페이지 분기 처리 시 초기 렌더링 깜빡임 문제를 해결한 과정. 비동기 상태 판단으로 인한 잘못된 UI 노출을 로딩 상태 관리로 해결하고, 서버 사이드 리다이렉트의 필요성을 깨달은 트러블슈팅입니다.

"모바일에서 왜 애니메이션이?" useState 초기값 타이밍 문제를 lazy initialization으로 해결한 React 렌더링 사이클 이해기.

TestPage에서 유저 정보를 가져오지 못함페이지 새로고침하면 user store 데이터가 사라짐Layout 컴포넌트에서 반복적인 API 호출 발생undefined가 찍히는 문제 발생

문제 상황 사용자가 이미지를 업로드한 후 간혈적으로 `blob:https://uuno.vercel.app/xxx:1 GET blob:https://uuno.vercel.app/xxx net::ERRFILENOT_FOUND`와 같은 오류가 발생하며 이미지가 표시되지 않는

"왜 안 되지?" Tailwind 동적 클래스명 문제를 JIT 컴파일 이해와 정적 매핑으로 해결한 삽질기.

React Router를 사용한 프로젝트에서 상세 페이지(/product/:id)에서 메인 페이지(/)로 뒤로가기를 했을 때, 헤더 로고 클릭 시 스크롤이 재차 동작하는 문제가 발생했습니다

uuno 프로젝트를 진행하다가 발생한 문제들을 기록하고자 정리해보았습니다.

트러블 슈팅: React 무한 렌더링 문제