JS 동적 계산과 CSS Flex의 상관관계문제 상황페이지에서 등록 폼을 만들었다. 목록을 선택하는 MultiChipSelectSearch 이라는 현재 프로젝트 내부의 커스텀 컴포넌트를 썼는데, chip을 3~4개 이상 선택하면 화면이 계속 떨렸다. 1~2개일 때는 괜찮았는데 개수가 늘어나니까 갑자기 깜빡거리기 시작했다. chip이 많아져서 input 크기를 넘어가게되면, 더보기로 볼 수 있게 개수가 표시되는 구조인데, 그게 표시될 때 무한 렌더링이 발생했다. 이전에 개발하면서 테스트할 때는, 목록 데이터의 길이가 짧아서 위 사항을 테스트하지 못했었던 것이다.사실 다른 오류가 있어서 수정하다가 확인하다보니 이것도 문제 였던 거지만.. API 응답조차 너무 느려서 더미 데이터로 교체하고 테스트 해봤다. 원..

"제 enabled가 무시당했습니다만??” 분명히 enabled: false를 걸어놨는데, refetch()를 부르니 API가 호출된다. "어? 나 비활성화한 것 같은데 왜 동작해?"라고 당황했다면 축하한다. 지극히 정상이다. 오늘은 이에 대해 알아보자. enabled와 refetch의 관계보통 특정 데이터가 준비 안 됐을 때 API 자동 호출을 막으려고 enabled: false 옵션을 쓴다. 그런데 이 상태에서도 useQuery에서 꺼낸 refetch()를 직접 실행하면? 설정값을 무시하고 무조건 요청이 발생한다.결론부터 말하자면, 이건 버그가 아니라 리액트 쿼리의 설계이다. 원인: "자동"과 "수동"의 명확한 선 긋기이건 라이브러리 설계팀의 의도된 동작(Expected behavior)이다.자..

기록용으로 찾아보며 정리한 글로, 해당 내용에 대해 틀린 내용이 있을 수 있습니다! 틀린 내용은 지적해 주시면 감사하겠습니다:)개요개발 서버에 배포하면 간헐적으로 모든 라우터에서 에러바운더리가 발생하고 화면이 뜨지 않는 문제가 종종 발생하였다.새로고침 시나 라우터 이동 으로는 해결되지 않고 모든 페이지에서 발생했다. 그리고 브라우저에서 캐시 비우기 및 강력 새로고침을 하면 정상 동작하였다. 강력 새로고침만 했을 때는 동작하지 않음.즉, 캐시 비우기가 핵심인데 왜 이런 건지? 왜 개발 서버에서만 발생하고 로컬 환경에선 괜찮은 건지 이유가 궁금했다.강력 새로 고침: `Cmd + Shift + R` 예를 들어 스타일시트 수정이나, 이미지 수정은 크롬 브라우저에서 일반 새로고침 시에 캐시 때문에 반영이 안 되는..

React Query에서 `queryFn`에서 언랩(unwrapping) 하는 것과 `select` 옵션으로 언랩하는 것의 차이를 정리합니다. 언랩(unwrapping)이란?"언랩(unwrapping)"은 일반적으로 감싸여 있거나 포장된 데이터를 풀어내어 원하는 실제 값이나 내용을 추출하는 과정을 말한다.React Query나 API 호출에서 언랩은 보통 API 응답 객체 내 여러 계층 중 실제 필요한 데이터 부분만 꺼내서 사용하는 것을 의미한다. 언랩(unwrapping)의 의미예를 들어, API 응답이 다음과 같이 복잡한 구조일 때:{ "status": "success", "data": { "user": { "id": 1, "name": "Alice" } }, "message": "OK"..

기존 프로젝트에서 reactflow를 사용하고 있었는데, xyflow에 대한 마이그레이션 글을 보고 정리하는 글입니다.https://reactflow.dev/learn/troubleshooting/migrate-to-v12 Migrate to React Flow 12 - React FlowUse this guide to migrate from React Flow 11 to 12.reactflow.dev 패키지명 변경 및 모노레포 통합• 기존 reactflow 패키지가 이제는 `@xyflow/react`로 완전히 대체되었습니다. 더 이상 기본(`default`) 방식이 아닌 네임드(`named`) import 형태로 사용해야 합니다.예:// 이전import ReactFlow from 'reactflow';..

JavaScript 객체 초기화 순서와 const 객체 참조 구조 때문에 생기는 “실행 시점 의존성” 문제객체 리터럴 내부에서 자기 자신 참조는 시점상 정의 전 참조가 된다. export const pageMngQueryKeys = { all: ['pageMng'] as const, detail: (id: number) => [...pageMngQueryKeys.all, 'detail', id] as const,};여기서 pageMngQueryKeys.detail은 객체 초기화가 아직 끝나지 않은 시점에 pageMngQueryKeys.all을 참조 즉, pageMngQueryKeys는 아직 완전히 만들어지지 않았는데 그걸 내부에서 쓰고 있음 → undefined.all → 런타임 에러 왜 로컬환..

한가로이 기존에 개발한 기능을 테스트하다가 찾은 이슈 기록 올 초에 리팩토링한 칸반 보드를 테스트하다가 보니 API로 받은 데이터는 분명 1건인데, 화면엔 같은 태스크가 2번씩 표시되는 이상한 현상을 겪었다. (벌써 v3.. 그 이유는 더보기에서)더보기1. 최초 기능 개발2. 라이브러리 교체 (beautiful-dnd -> dnd-kit)3. 디자인 전환작업으로 인한 리팩토링 이번에 전체 검색 기능을 넣으면서, 검색 기능을 전반적으로 테스트하다가 발견했다.처음에는 계층 구조 때문에 백엔드에서 중복 데이터를 잘못 가져오는 줄 알았지만 실제로는 렌더링 로직의 문제였다. API 응답 자체에는 이상이 없었으며, 실제 원인은 React 내부의 reconciliation 알고리즘과 컴포넌트에 할당한 key 사용 방..

React.useId()란?React.useId()는 React 18에 도입된 훅으로, 컴포넌트 렌더링마다 고유한 ID 문자열을 생성해 주는 기능을 제공한다.HTML의 id, htmlFor 속성 같이 접근성과 연관된 DOM 요소를 연결할 때 유용SSR(Server Side Rendering) 시에도 클라이언트와 일관된 ID 보장주로, HTML의 id, htmlFor 속성처럼 접근성과 관련된 DOM 요소를 연결할 때 사용되며, SSR(server Side Rendering) 환경에서 클라이언트와 서버 간 ID 일치(hydration-safe)를 보장한다.또한 React 내부적으로 렌더 트리 순서를 기준으로 ID를 생성하기 때문에, 렌더링 간에 ID 충돌 없이 고유한 값을 갖는다.하지만 리액트 내부에서 ke..