FEB:)DAIN

var stringWidth = require('string-width') ^ Error [ERR_REQUIRE_ESM]: require() of ES Module ... code: 'ERR_REQUIRE_ESM' yarn storybook을 하니 갑자기 이러한 문제가 발생했다.🤔 절대 경로를 설정하다가 맞닥뜨린 에러라 절대 경로 때문인가 했더니 아니었다. 해결 방법은 다음과 같다. // package.json { ... "resolutions": { "jackspeak": "2.1.1" } } package.json 파일 안에 위 코드를 넣어도 오류가 날 경우, node_modules, yarn.lock을 지우고 다시 설치해 주면 된다. rm -rf node_modules yarn.lock yarn 다..

MSW란? Mock Service Worker의 약자로 API를 Mocking 할 때 사용하는 도구 API 요청을 가로채는 Service Worker 기능을 사용하여 mocking 할 수 있다. 로컬 서버는 key를 입력해서 들어가야 하는 등 번거로움이 있어 스토리북을 통해 개발을 하고 있었다. 그러던 중 API mocking이 필요해졌고, msw와 스토리북을 연동하기 위해 msw-storybook-addon을 설치했다. npm i msw-storybook-addon -D // or yarn add msw-storybook-addon -D 하지만 스토리북에서 msw가 잘 작동하지 않았다.🥲 TypeError: Failed to update a ServiceWorker for scope ('http://l..

Failed to execute 'createElement' on ... 오류가 났을 때, 아래의 순서대로 진행하면 된다. 1. @svgr/webpack 설치 yarn add -D @svgr/webpack // or npm install --save-dev @svgr/webpack 2. d.ts 파일에 코드 추가 원래 d.ts 파일에 `declare module '*svg' 만 있었는데 아래 코드를 추가해 주었다. // assets.d.ts declare module '*.svg' { import React = require('react'); export const ReactComponent: React.FunctionComponent; const src: string; export default src..

0) Storybook 설치 npx storybook@latest init 1) https://www.chromatic.com/ 크로마틱 회원가입 2) Get started now 버튼 클릭 3) Choose Github Repo 버튼 클릭해 레포와 동기화 4) 프로젝트에 chromatic 설치 npm install --save-dev chromatic yarn add chromatic -D 5) 스토리북 chromatic으로 배포 npx chromatic --project-token= Github Action 추가 1) package.json에서 chromatic 명령어 제거 2) Chromatic 토큰 설정 레포지토리의 Settings > Security - Secrets and variables -..