소개회사에서 캔버스 다룰 일이 늘어나다 보니 여러 라이브러리를 사용하게 되는데, 이번에 써본 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 ..

아마 Next.js를 사용하는 가장 큰 이유 중 하나는 바로 SEO때문일 것이다. Next.js에서는 그래서 쉽게 meta태그를 심을 수 있도록 Head라는 컴포넌트를 제공한다. 이 컴포넌트를 사용하면 아래와 같이 손쉽게 메타 태그들을 작성할 수 있다. import { NextPageContext } from 'next' export default function Main(){ return ( ) } 문제 발견 SEO를 하기 위해서 넣은 메타 태그인데, 막상 배포를 해보면 source에 내가 추가한 meta태그들이 보이지 않았다. 즉, 메타태그들이 클라이언트에서 랜더가 되고, static하게 랜더되는 것이 아니었음. 그럼 메타태그를 넣은 의미가 크게 없다. og태그 암만 열심히 추가해도, 링크 공유했을 ..

환경 react 18 사용 nextJS 사용 번역 기능이 필요하여 next-export-i18n 사용 문제 보통 nextJS를 사용하는 경우 국제화 기능(다중 언어 지원)을 위해 next-i18next 라이브러리를 사용할 것이다. 문제는 이 라이브러리를 쓸 경우 빌드 시 아래 명령어를 사용할 수 없다. export를 지원하지 않는다. "build": "next build && next export" 그래서 찾게 된 것이 export를 지원하는 next-export-i18n 라이브러리이다. 이 라이브러리의 문제점은, 현재 웹페이지에 보여줄 언어로 무엇을 사용할지를 판단할 때 url에 붙은 lang 쿼리파라미터로 판단한다. 즉 웹사이트 내의 모든 페이지 이동 시 lang=en 과 같은 쿼리 파라미터를 붙여줘..

보통 이 에러는 서버에서 pre-rendering 된 html과 브라우저에 처음 렌더링 되는 html이 다를 때 발생한다. 하이드레이션이란건 간단하게 nextJS가 pre-rendering한 html에 js코드로 기능을 적셔서 완성하는 것을 말한다. 그래서 순서는 pre-rendering한 html -> js코드 로드 -> hydration => 사용자가 사용할 수 있는 화면 완성 이다. 이 때 pre-rendering한 html의 DOM구조가 hydration중에 발생하는 html DOM구조와 달라서, 이 둘의 구조가 불일치하여 더 이상 하이드레이션을 진행할 수 없다는 에러인데, 나 같은 경우는 이 에러가 전혀 상관 없는 상황에서 발생했다. 그리고 원인은 어이없게도 p태그 안에 p태그 또는 Link컴포..