소개회사에서 캔버스 다룰 일이 늘어나다 보니 여러 라이브러리를 사용하게 되는데, 이번에 써본 fabric.js가 캔버스 위에 그려진 오브젝트를 관리하는게 konva.js보다 훨씬 쉬웠다. 그래서 재미삼아 인스타그램 스토리에서 처럼 간단하게 동영상/사진 위에 스티커나 텍스트를 올릴 수 있는 캔버스를 만들어보았다.혹시 에디터를 만들어야 하는 분들에게 도움이 되길 바란다.  완성된 화면데스크탑 버전 모바일 버전  사용한 스팩- next.js v15- fabric.js- react-color-palette  프로젝트 구조src ㄴapp ㄴclass ㄴeditor.class.ts #텍스트, 이모지 편집을 관리하는 class. 아래의 fabric class를 상속받음 ㄴfab..

에러 상황Next로 개발하다보면 개발 중엔 문제가 없었는데 개발 다 하고 배포하려고 빌드 하니갑자기 아래와 같은 에러를 마주할 때가 있다.food-editor:build: Error occurred prerendering page "/foodstyler/module/menu". Read more: https://nextjs.org/docs/messages/prerender-errorfood-editor:build: Export encountered an error on /foodstyler/module/menu/page: /foodstyler/module/menu, exiting the build.food-editor:build: ⨯ Static worker exited with code: 1 and ..

Tainted Canvas 에러와 CORS: 원인과 해결 방법canvas에서 작업하다 보면 "Tainted canvases may not be exported"라는 에러를 종종 접할 수 있다.이 에러를 제대로 이해하고 수정하려면, CORS(교차 출처 리소스 공유)와 관련된 동작 원리를 알아야 한다.아래에서는 Tainted canvas 에러가 발생하는 이유와 해결 방법, 그리고 관련된 `crossOrigin` 속성과 서버 설정의 관계를 정리해봤다.Tainted Canvas 에러 발생 상황에러가 발생하는 맥락1. canvas데이터를 추출하려 할 때   예: toDataURL() 메서드를 호출해 canvas 데이터를 이미지로 저장하려는 경우.2. crossOrigin="anonymous"설정 후   `cros..

모노레포가 무엇이고, 모노레포를 구성하기 위한 툴로 왜 pnpm, turbo를 선택했는지에 대한 설명은검색하면 워낙 많이 나오기 때문에 여기서는 따로 하지 않을 것이다.모노레포 구조는 처음 시작할 때부터 모노레포로 세팅하는 것이 훨씬 쉽다. 하지만 일을 하다 보면 회사가 서비스를 늘리기도 하고내부적으로 사용할 라이브러리를 제작해야 할 경우도 생긴다.그래서 멀티 레포가 점점 늘어나서 유지관리에 허덕이다 보면모노레포 구조를 이식해야 하는 경우가 생긴다.이 글은 A Guide to adding monorepo architecture to an existing project! 사용할 툴 세팅하기pnpm과 turbo를 global로 설치해준다. pnpm은 npm과 같은 패키지 관리 도구인데, node_modu..

⭐️ 이미지 저장하기⭐️ 최종 코드 깃헙에서 보기최종 완성 ⭐️ 이미지 저장하기이미지를 저장하는 방법은 쉽다. 아래의 함수를 추가해주면 끝. function saveImage() { onFocusOut(); //바운딩 박스가 이미지와 함께 저장되지 않도록 바운딩 박스 해제해줌 if (stageRef.current) { const imageElement = new Image(); const dataUrl = stageRef.current.toDataURL(); //이미지 데이터를 base64로 추출 imageElement.onload = function () { const link = document.createElement('a'); link.d..

완성!⭐️ redo, undo 상태 관리를 위한 hook 만들기먼저 lodash를 설치해주자. npm i lodash @types/lodash -D 이제 redo, undo를 하기 위해 상태를 관리해줄 특수한 hook을 만들자.hook의 재사용성을 위해 관리할 데이터의 타입은 제네릭으로 받아 동적으로 할당되도록 한다.setState함수로 T타입의 새 데이터가 들어오면 states에 저장해주고, index도 함께 업데이트해준다.states, index가 업데이트 될 때마다 state는 자동으로 states의 index번째 값으로 할당된다.import { isEqual } from 'lodash';import { useMemo, useState } from 'react';//관리할 데이터의 타입을 동적으로 ..