Uuno
1.Supabase Storage에 이미지를 덮어썼는데, 왜 이전 이미지가 보일까?
문제 상황 unno 프로젝트에서 명함을 이미지로 저장할 때, 다음과 같은 경로로 Supabase Storage에 PNG 파일을 저장하도록 설계하였다. 즉, 하나의 slug에 대해 frontimg.png, backimg.png 같은 고정된 경로에 저장되는 구조다. 정상 케이스 최초 저장 시에는 문제없이 잘 작동한다. 문제 발생 같은 slug로 다시 ...
2.Konva toBlob() 이슈와 Supabase 이미지 CORS
문제 상황 unno 프로젝트에서 사용자가 이미지를 업로드하면 해당 파일은 Supabase Storage에 저장된다. 이후 명함을 새로 만들 때도 기존에 업로드한 이미지들을 재사용할 수 있도록 DB에 저장된 이미지 URL을 기반으로 캔버스(Stage)에 추가하는 구조로
3.Canvas 좌표와 HTML 좌표 사이의 간격
Konva를 이용해 캔버스 기반의 편집기를 개발하며, HTML 요소와 Canvas 요소 간의 좌표 차이 때문에 발생했던 문제점들에 대해 작성해보려고 한다. 특히 사용자가 보는 위치와 실제 Canvas에서 인지하는 위치가 달라서 예상치 못한 결과를 자주 발생하였다. 따라
4.Next.js 14 + Konva로 명함 편집기 초기 세팅하기
Next.js 14 프로젝트에서 Konva와 react-konva를 사용하는 법을 정리하려고 한다.특히 SSR(Server Side Rendering) 환경에서 Konva를 클라이언트 전용으로 설정하는 방법과 react-konva의 버전 호환 문제를 해결해야지 자유롭게
5.DOM기반 방식보단 캔버스 방식을 택한 이유
프로젝트 구상과 초기 기술 선택 처음 프로젝트를 구상할 때 React-DnD와 React-RnD를 이용해 명함 편집 도구를 구현하는 방식을 택했다. DOM 기반의 편집 방식이 React와의 친화성이 높고, 드래그 앤 드롭과 리사이징 기능을 쉽게 관리할 수 있을 것이라 생각했기 때문이다. 기획 변화와 UX 중심의 고민 하지만 상세하게 기획을 하다보니 조금씩...
6.unsplah api 호출 제한 변경기
🚨 문제 상황 무료 Unsplash API는 1시간당 50회 호출 제한이 있어, 다음과 같은 UX 흐름에서 빠르게 한도에 도달하는 문제가 발생했다: 🔍 검색어 입력 시 → 실시간 API 호출 📜 스크롤 이동 시 → 무한스크롤 기반 추가 호출 ⛔ 디바운싱을 적용해도 TanStack Query의 fetchNextPage와 중첩되어 호출량이 급증, ...
7.Canvas 에디터 Transformer 최적화 성능 테스트 기록
브라우저: Chrome 114 (MacBook Pro M2) 프로젝트: Next.js 14 + React-Konva 기반 Canvas 에디터 측정 코드: handleTransformEnd 이벤트마다 performance.now()로 처리 시간(ms) 로깅 반복 횟