Tag: Frontend

All the articles with the tag "Frontend".

• React에서 Undo/Redo 구현: 워크플로우 에디터 히스토리 관리

  17 Sep, 2025

  워크플로우 에디터에 Undo/Redo를 추가한 과정. Snapshot(Memento) 패턴 선택 이유, useHistoryManagement 훅 설계, 키보드 단축키, HistoryPanel UI까지 이틀간의 구현기.

• 커스텀 노드 에디터: 드래그 앤 드롭 + 엣지 스냅핑 구현

  16 Jun, 2025

  워크플로우 에디터의 핵심 인터랙션 구현. 노드 드래그 앤 드롭, 엣지 스냅핑(자동 연결), 포트 타입 호환성 체크, 줌/패닝 최적화까지 실전 구현기.

• Next.js 기반 AI 워크플로우 에디터 만들기 (from scratch)

  11 Jun, 2025

  Next.js 15 + React 19 + TypeScript로 무한 캔버스 기반 워크플로우 에디터를 처음부터 구현한 과정. Canvas, Node, Edge 컴포넌트 설계부터 패닝/줌, 그리드 배경, 노드 드래그, forwardRef 패턴까지.

• RxDB 란 무엇인가? (OpenSearch 연동)

  3 Feb, 2025

  RxDB(Reactive Database)의 개념과 Frontend 애플리케이션에서의 활용법을 정리한다. OpenSearch 연동을 통한 실시간 상태 변경 감지와 NoSQL 기반 로컬 DB 구성 방식을 다룬다.