React Storybook 설치 오류 해결

npx storybook init 명령어를 통해 storybook을 설치했는데, 아래와 같은 에러 메세지와 함께 출력되지 않았다.

Using default Webpack5 setup ERR! ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

웹팩과 관련된 문제 같아 조금 골치아픈 참에, 나와 비슷한 이슈가 올라온 게시글을 발견하였다.

링크 (https://github.com/storybookjs/storybook/issues/17357)

게시글을 보게 되면, @storybook/preset-create-react-app을 업데이트 해 주라고 되어 있는데, 나의 경우 yarn을 사용중이어서 yarn add 명령어를 사용하여 해당 라이브러리를 업데이트하였다. (npm의 경우 npm install을 사용하면 되고, 저 링크에도 잘 나와있다.)

라이브러리 이름만 봐도 알 수 있듯, CRA로 프로젝트를 만들고 storybook을 적용하는 지점에서 문제가 발생한 것 같다.

나의 경우 저 라이브러리를 설치 후, yarn storybook 명령어를 치니 이번에는 eslint 관련 문법 에러가 떴고, 자잘한 lint 에러를 해결해 주니 잘 실행되었다.