기존 프로젝트에서 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..

📘 2025.03.22 TypeScript 정리@2025.03.29 곽지혜📑 주제조건부 타입 / 맵드 타입제네릭 심화 (제약 조건, 기본값, 다중 파라미터)타입 조작: Exclude, Extract, NonNullable, Partial 등📂 파일 구조 (예제 위치)src/├── 01_conditional_types.ts├── 02_mapped_types.ts├── 03_generics_advanced.ts├── 04_utility_types.ts├── 05_examples_comparison.ts 1. 조건부 타입 (Conditional Types)📁 예제: 01_conditional_types.tsT extends U ? X : Y 조건에 따라 타입을 분기할 수 있습니다.T가 U를 확장(ext..

상태란? 리액트(React)에서 state는 컴포넌트의 현재 상태를 나타내며, 사용자 상호작용이나 다른 이벤트에 의해 데이터가 변할 때 UI를 갱신하는 데 사용된다. state는 컴포넌트 내에서 캡슐화되어 있으며, React의 useState 훅을 사용해 관리된다. Counter.tsx import {useState} from 'react'; const Counter = () => { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); } const onDecrease = () => { setCount(count - 1); } return ( // 0에서 출발, 1씩 증가 / 1씩 감소 {count} ..

가 아닌 로 사용하는 것을 셀프 클로징 태그라고 한다. ES Module이란 무엇인가? ES6에 도입된 모듈 시스템. import, export를 사용해 분리된 자바스크립트 파일끼리 서로 접근할 수 있다. CSS 파일을 사용하여 스타일링하기 MyHeader.tsx 내보내기(export) const MyHeader = () => { // 컴포넌트 내에 return 필요 return 헤더; }; export default MyHeader; App.css .App, h2, #bold_text 추가 .App { background-color: black; } h2{ color: red; } #bold_text { color: green; } App.tsx React에서는 html 태그에서 class 속성..

Datepicker 설치npm install react-datepickerdatepicker를 사용하려면 터미널에서 datepicker를 설치한 후 import해야한다.더보기**리액트를 처음 사용하면서 공부 중이여서, 다소 잘못된 내용이 있을 수 있습니다. 기록용으로 적는거니 참고만 해주세요** 맥 터미널에서 root 권한으로 설치하고 vsc에서 실행하려고 하니까 계속 에러떠서 확인해보니 맥 기본 설치 경로랑 vsc에서 불러오는 경로랑 좀 다른가 보다. 계속 개발하면서 보니 맥터미널에 설치한건 인식이 안되서 vsc에서 해당 프로젝트 경로로 실행하여 설치해주어야했다. 그리고 프로젝트 폴더에 설치되는거라서 폴더를 삭제하고 동일한 폴더를 새로 생성하게되면, npm install 이 사라지기 때문에 재설치를 해..