기존 프로젝트에서 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';// 이후..

Merge Conflict 후 커밋 무한 대기feat 브랜치를 develop 기준으로 병합하면서 충돌을 해결하고 커밋까지 했는데, 커밋이 진행되지 않고 끝나지 않았다. 😱오늘 feat 브랜치를 develop 기준으로 최신화하려고 merge했는데, 충돌 해결 후 커밋이 멈춰버린 문제를 겪었다. 이를 해결하며 정리한 내용을 공유한다. CLI로도 시도해보고, GitHub Desktop에서 “continue merge”를 눌러도 계속 로딩 상태였다.IntelliJ에서 롤백을 하면 Unversioned Files 상태로 빠져서 다시 `git add`가 필요했는데, GitHub Desktop에서는 변경 파일 전체를 선택해서 “Discard all changes” 하니까 자동으로 `merge` 커밋이 생성되어 바로..

Settings(`cmd` + `,` ) 열여서 Plugins에서 Jira Integration을 깔아준다.Sever URL: https://{조직명}.atlassian.netUser and pass 선택 시 Password는 웹 로그인 비밀번호가 아닌 API Token을 입력해야함. 아래 URL에서 Atlassian API Token 생성https://id.atlassian.com/manage-profile/security/api-tokens Atlassian account id.atlassian.com 더보기기존에 Bitbucket에 쓰고 있던 토큰이 있어서 사용해보려고 했는데, Atlassan Account랑 토큰이 달라서 안되더라Bitbucket 전용 Personal Access Token (P..

VSCODE 기본 UI 기능1️⃣ 좌측 Activity Bar (사이드 바)아이콘/기능설명📁 Explorer (탐색기)파일 열고 닫기, 구조 확인🔍 Search (검색)`Cmd` + `Shift` + `F` 전체 프로젝트 내 검색🔀 Source Control (소스컨트롤)깃 연동, 변경사항 확인, 커밋🐞 Run and Debug디버깅 세션 관리, launch.json📦 Extensions (확장)확장 프로그램 관리🕘 Timeline (타임라인)(💡많이 모름) 선택한 파일의 git 히스토리⚙️ Settings / Manage환경설정 2️⃣ 타임라인 (Timeline)`Git` 이나 `SCM`을 쓸 때 연동됨.파일 하나 선택 → Timeline 탭 보면:이 파일의 변경 이력커밋 히스토리별 변경..

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 → 런타임 에러 왜 로컬환..

개인적으로 Cursor를 종종 쓰고 있었으나 무료는 사용 횟수에 제한이 있어 결제를 고려하던 도중, 회사에서 지원받게 되어 본격적으로 Cursor를 사용하고자 셋팅해보는 중이다. VSCode 설정 가져오기기존에 VSCode를 사용중이여서 setting, extensions는 끌고 왔다.설정 > 일반에서 import 해준다.텍스트 편집기에서 커서 스타일을 지정해줬다. Cursor Blinking커서가 텍스트 입력 위치를 표시할 때 깜빡이는 옵션 설정 cursor smooth caret animation옵션설명off커서 애니메이션 사용 안 함 (기본적인 점프 이동)on항상 부드러운 커서 이동 사용explicit사용자가 직접 커서를 움직일 때만 부드러운 애니메이션 적용됨 (마우스 클릭이나 키보드 입력 등) ..

한가로이 기존에 개발한 기능을 테스트하다가 찾은 이슈 기록 올 초에 리팩토링한 칸반 보드를 테스트하다가 보니 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..