Pixi.js로 캔버스 에디터를 만들면서 가장 기본이면서도 까다로운 기능이 드래그였다. 단일 객체 드래그는 간단하지만, 여러 객체를 동시에 드래그하면서 클릭과 드래그를 구분하고, 부드러운 움직임까지 보장하려면 생각보다 고려할 게 많다. FederatedEvents: Pixi.js의 이벤트 시스템Pixi.js v7부터 FederatedEvents라는 이벤트 시스템을 사용한다. DOM의 PointerEvent와 유사한 API를 제공하면서, 캔버스 내부 객체들의 이벤트 전파를 처리한다. FederatedPointerEvent는 DOM PointerEvent를 Pixi.js 씬 그래프에 맞게 래핑한 것이다. stopPropagation(), shiftKey 같은 익숙한 속성들을 그대로 사용할 수 있다. 기본적인..
버튼을 누르고 서버 응답을 기다리는 동안 UI가 멈춰 있으면 사용자는 불안해한다. "클릭이 안 된 건가?" 하고 다시 누르기도 한다. 낙관적 업데이트는 이 문제를 해결한다. 서버 응답을 기다리지 않고 UI를 먼저 바꾸는 것이다. 낙관적 업데이트의 핵심 구조React Query(TanStack Query)에서 낙관적 업데이트는 useMutation의 콜백 조합으로 구현한다. useMutation({ mutationFn: (data) => api.update(data), onMutate: async (variables) => { // 1. 진행 중인 쿼리 취소 (경쟁 상태 방지) await queryClient.cancelQueries({ queryKey: ['items'] }); // ..
Next.js로 개발하다 보면 이런 상황을 겪는다.API 코드를 수정하고 저장한다. 브라우저에서 새로고침한다. 잘 된다. 몇 번 더 수정하고 저장한다. 갑자기 API가 먹통이 된다.Error: Too many connections콘솔에 에러가 뜨고, 모든 API 요청이 실패한다. 개발 서버를 재시작하면 다시 동작한다. 하지만 또 몇 번 저장하면 같은 일이 반복된다.혼자 개발하고 있는데 연결이 부족하다니, 뭔가 이상하다. 문제의 원인: HMR이 연결을 쌓는다Next.js는 개발 환경에서 HMR(Hot Module Reload) 을 사용한다. 파일을 저장하면 해당 모듈만 다시 로드해서 빠른 개발 경험을 제공한다.문제는 Prisma Client다. 모듈이 다시 로드될 때마다 새로운 PrismaClient 인스..
Chrome Extension의 Service Worker에서 스크린샷을 찍고 특정 영역만 잘라내야 하는 상황이 있었다. 문제는 Service Worker에는 DOM이 없어서 일반적인 Canvas API를 쓸 수 없다는 점이다. 문제 정의상황Chrome Extension의 Service Worker에서 탭 스크린샷 캡처전체 화면이 아닌 특정 영역만 필요 (iframe 영역)devicePixelRatio를 고려한 고해상도 크롭 필요Service Worker의 제약// Service Worker에서const canvas = document.createElement('canvas');// → Uncaught ReferenceError: document is not definedService Worker는 DO..
왜 직접 만들었나다국어 지원을 위해 처음 떠올린 건 next-intl이었다. Next.js 생태계에서 가장 많이 쓰이고, 공식 문서에서도 추천하는 라이브러리다.그런데 요구사항을 정리해보니 의문이 생겼다.한국어, 영어 2개 언어만 지원URL에 locale 포함 불필요 (/ko/dashboard 같은 구조 X)서버 컴포넌트에서 번역 불필요 (클라이언트에서만 전환)이미 Zustand로 전역 상태 관리 중next-intl의 핵심 기능인 서버 컴포넌트 번역, 미들웨어 기반 라우팅, locale별 URL 구조를 전혀 쓰지 않을 예정이었다. 선택지 분석방식장점한계적합한 상황next-intl풍부한 기능, SSR 지원, 커뮤니티 검증설정 복잡, 라우팅 구조 강제, 번들 크기 증가locale별 URL 필요, 서버 번역 필..
(부제: 내가 확장프로그램을 선택할 수 밖에 없는 이유 1만가지중 하나) 웹앱에 다른 사이트를 iframe으로 삽입했을 때, iframe 내부에 포커스가 있으면 웹앱의 단축키가 먹히지 않는다. Cross-Origin이라 iframe의 이벤트에 접근할 수도 없다. 이 문제를 키 이벤트 재합성으로 해결한 방법을 정리했다. 문제 정의상황웹앱이 외부 사이트를 iframe으로 로드react-hotkeys-hook으로 단축키 처리iframe 클릭 시 포커스가 iframe 내부로 이동이후 웹앱의 단축키가 전혀 작동하지 않음 왜 안 될까?// 웹앱에서iframe.contentWindow.addEventListener('keydown', handler);// → Blocked a frame with origin "ht..
NextAuth.js로 인증을 구현할 때 세션 전략 선택은 성능에 직접적인 영향을 미친다. pixelDiff 프로젝트에서 Figma OAuth를 구현하면서 DB 세션에서 JWT로 전환한 경험을 정리한다. 문제 상황Figma OAuth 연동 후 API 응답이 체감될 정도로 느렸다. 원인을 추적해보니 매 요청마다 세션 테이블을 조회하는 데서 병목이 발생하고 있었다.[요청] → [세션 테이블 조회] → [사용자 정보 반환] → [응답] ↑ 약 400ms 소요세션 조회 자체는 단순한 쿼리지만, 네트워크 왕복(Supabase PostgreSQL)과 커넥션 오버헤드가 누적되면서 체감 지연이 발생했다. 선택지 분석전략동작 방식장점단점DB 세션매 요청마다 세션 테이블 조회서버에서 세션 무효..
이미지 최적화는 웹 성능의 기본이다. 특히 이미지가 핵심인 서비스라면 더욱 그렇다.pixelDiff를 만들면서 이미지를 다루는 일이 많았다. Figma에서 4K 해상도로 export한 PNG를 저장하고, 목록에서 썸네일로 보여주고, 로딩 중에는 blur placeholder를 띄워야 했다. 매번 원본 이미지를 그대로 쓸 수는 없었다.Node.js에서 이미지 처리를 한다면 Sharp가 사실상 표준이다. libvips 기반이라 빠르고, API도 직관적이다. Sharp가 뭘까Sharp는 Node.js용 고성능 이미지 처리 라이브러리다. ImageMagick이나 GraphicsMagick보다 4-5배 빠르다고 알려져 있다.왜 이렇게 빠를까? Sharp가 사용하는 libvips의 아키텍처 덕분이다.ImageMag..
