여러 운영 페이지와 외부 SPA 에 흩어진 폼 12 개가 각자 다른 검증·정규화·에러 표시 흐름을 갖고 있었다. zod 공용 스키마를 `lib/validations/` 에 모으고, react-hook-form + zodResolver + shadcn/ui Form 한 흐름으로 묶으면서 입력 정규화·필드 에러·BE 에러 매핑까지 한 줄의 표준으로 정착시킨 구현기.
외부 뷰어 리포트의 4탭에 인사이트 카드와 빈 데이터 폴백을 같이 깔고 나니 일부 motion.section의 whileInView 애니메이션이 트리거되지 않았다. 같은 컴포넌트가 같은 코드로 어떤 탭에서는 정상이고 어떤 탭에서는 opacity 0으로 그대로 멈췄다. 원인은 조건부 마운트 시점에 IntersectionObserver의 첫 콜백이 framer-motion 이펙트 부착 전에 끝나 버린 레이스 + viewport.once 기본값 false의 합이었다. once:true 표준화 + sentinel ref + ESLint 가드를 같이 깐 트러블슈팅을 정리한다.
QA Round 2에서 EC-3 엣지 케이스가 잡은 타이머 NaN:NaN 버그. 같은 컴포넌트가 같은 코드로 한 화면에서 정상, 다른 화면에서 NaN:NaN으로 뜨던 패턴이다. 원인은 BE 응답 DTO에서 한 필드 누락 + FE 무방어 + seed 데이터 부족 세 가지의 합이었다. 응답 스키마 검증과 콘텐츠 후보 0건 방어를 같이 깐 라운드 회고.
Unity WebView 안에서 동작하는 웹 콘텐츠 10종을 같은 PostMessage 브릿지 규격으로 묶는 마일스톤 작업을 정리한다. bridge/ 폴더 하드카피와 useProblemResults 훅으로 콘텐츠별 차이를 흡수하고, 통계 필드 8개·2개·contentType·problems 배열을 네 차례에 걸쳐 점진적으로 확장하면서 마주친 400 Bad Request·accuracyPct 재정의·시간 정확도 변환 로직 회수의 결정 사유와 트레이드오프를 기록한다.
Unity WebView 호스트가 보낸 첫 contentInit 메시지를 웹 콘텐츠가 0개로 인식하는데 에러는 없다. window.vuplex가 비동기로 주입되는 탓에 detectMode()가 'standalone'을 오판하고, isStandalone() 가드가 메시지 핸들러 등록을 막은 침묵 실패를 추적해 해결한 기록.
Unity 네이티브 앱이 WebView로 웹 콘텐츠를 임베드할 때, 호스트와 콘텐츠는 PostMessage로만 대화한다. Vuplex·iframe·Standalone 세 환경을 런타임에 자동 감지하는 ContentBridge 모듈을 설계하고, contentInit·contentReady·contentResult·contentExit 메시지 규격을 한곳에 고정한 과정을 정리한다. 핵심 제약은 Standalone 모드에서 기존 콘텐츠 코드가 100% 그대로 동작해야 한다는 것이었다.
Vite 프로젝트에서 새 패키지를 설치한 뒤 Invalid hook call 에러가 발생하는 원인은 의존성 사전 번들링 캐시(.vite/deps)다. React 중복 인스턴스 문제의 근본 원인부터 node_modules/.vite 삭제, vite --force, optimizeDeps 설정까지 실전 해결법과 예방 전략을 정리한다.
Refine의 useCustom hook에서 config.query 객체에 number 타입 값을 전달해도, URL 쿼리 파라미터로 직렬화되면서 문자열이 된다. NestJS @Type(() => Number) 검증과 조합하면 targetClassId must be an integer number 400 에러가 터진다. URL 직접 삽입 패턴으로 해결한 실전 사례를 정리한다.
react-hook-form과 Zod를 연동할 때 자주 발생하는 6가지 트러블슈팅 사례를 정리합니다. zodResolver 미연결, defaultValues 타입 불일치, mode 설정 누락 등 실전에서 놓치기 쉬운 함정과 해결법을 코드와 함께 설명합니다.
Framer Motion whileInView로 만든 스크롤 애니메이션이 Chrome DevTools MCP 스크린샷이나 OG 이미지 생성에서 보이지 않는 원인은 IntersectionObserver의 뷰포트 의존성이다. initial hidden 상태가 캡처되는 근본 원인과 3가지 해결 전략을 실전 코드로 정리한다.
shadcn init 실행 후 커스텀 CSS 변수가 기본값으로 덮어씌워지는 문제의 원인과 해결법을 정리합니다. 디자인 토큰이 초기화되는 근본 원인을 분석하고, git diff 기반 복구 및 예방 패턴을 코드와 함께 설명합니다.
API가 200 OK를 반환하는데 프론트엔드에서 에러 페이지가 뜬다면, BE 응답 래퍼 구조를 의심하세요. useCustom + ApiWrapper 패턴으로 2중 언래핑하는 실전 해결법을 정리합니다.
React useEffect의 비동기 cleanup이 Pixi.js RenderTexture를 파괴하는 레이스 컨디션 버그를 추적합니다. 웹 브라우저에서는 정상인데 Vuplex WebView + 고사양 GPU에서만 재현되는 3중 함정의 원인과 해결법을 정리합니다.
Refine 기반 React 어드민에서 DataProvider 커스터마이징 시 흔히 겪는 두 가지 함정을 정리합니다. BE가 객체를 반환하는데 useList를 쓴 경우, 그리고 total 파싱 경로가 어긋난 경우의 증상·원인·해결법입니다.
1인 개발로 NestJS 백엔드 + React 프론트엔드를 모노레포로 구성한 이유와 pnpm workspace + Turborepo 세팅 과정을 정리했다. 삽질 포인트와 구조 결정 기록. 초보자도 따라할 수 있게 정리했어요.
Vite 6.x 개발 서버 프록시 환경에서 PATCH 요청만 CORS 에러가 발생하는 원인은 HTTP 메서드 대소문자입니다. toUpperCase() 한 줄로 해결하는 방법과 프록시 디버깅 체크리스트를 정리합니다.