최종 프로젝트 Uuno
1.캔버스 기반 에디터 개발: React Konva vs Fabric.js의 기술 선택 과정
Uuno 에디터 개발 강지수디지털 명함 에디터 프로젝트를 시작하면서 기술적 결정을 마주했다. 사용자가 자유롭게 배치하고 스타일을 조정할 수 있는 에디터를 만들어야 했는데 이를 구현하기 위한 고민이 필요했다.처음엔 React-dnd + React-rnd를 활용한 Dom요
2.캔버스의 영역과 범위에 관한 기술적 고민[Konva]
Uuno 에디터 개발 중 캔버스 범위 설정에 관한 고민과 해결 과정 공유.미리캔버스나 다른 캔버스 기반 편집 툴과 우리 프로젝트의 차이점.캔버스 기본 틀을 작성하는 도중 캔버스 내부에는 html태그가 안 먹힌다는 사실을 발견. 원래 의도는 캔버스를 전체 화면으로 두고
3.캔버스 기반 에디터의 크기 관리 : 동적 리사이징 vs 고정 크기 [Konva]
Uuno 에디터 개발 강지수지난 포스팅에서 작성한 캔버스의 영역과 범위에 관한 기술적 고민에 대한 후속으로, 실제 구현 과정에서 발견한 문제점과 해결책에 대한 글프로젝트 초기에는 사이드바가 열리고 닫힐 때 Stage의 크기를 동적으로 조절하는 방식을 선택했습니다. 이론
4.Undo/Redo 기능 구현에 대한 고민
Uuno 에디터 강지수디지털 명함 에디터를 개발하면서 가장 깊이 고민했던 기능 중 하나는 바로 Undo/Redo 기능이었다. 단순해 보이지만 실제로 구현하려면 복잡한 상태 관리, 요소 추적, ID 문제, 그리고 사용자 경험까지 고려해야 하는 만만치 않은 문제였다. 이
5.Supabase Storage 이미지 업데이트 지연 문제 해결기 (CDN 캐시와의 싸움)
문제 상황: 이미지를 분명히 바꿨는데 왜 예전 모습 그대로인가? 디지털 명함 에디터 개발 중, 사용자가 Konva 캔버스에서 디자인한 명함 앞/뒷면을 이미지로 저장하는 기능을 구현했다. Konva.Stage 객체의 toDataURL() 메서드를 사용해 캔버스 내용을 P
6.React + Konva에서 forwardRef 사용 시 TypeScript 오류 해결기
들어가며 디지털 명함 에디터 프로젝트를 진행하면서 Konva 라이브러리를 기반으로 사용자가 캔버스에 요소를 추가하고 조작하는 기능을 개발하고 있었다. 이때 React의 forwardRef를 활용하여 Rect, Circle, Group 등 다양한 Konva 노드 컴포넌트