리액트(React) CRA로 프로젝트 생성 후 스토리북(Storybook) 환경 구축

1. 타입스크립트 기반의 리액트 프로젝트 생성 
2. npx create-react-app . --template typescript yarn add typescript @types/node @types/react @types/react-dom @types/jest​
3. 스토리북 환경 구축 
   

   npx -p @storybook/cli sb init​

4. 실행하여 화면 확인

   yarn start

   

   yarn start // 실행 완료 화면

   
   ※ babel-loader 관련 에러 발생 시 해결 방법

   

   * node_modules 삭제
   * yarn.lock 또는 package-lock.json 삭제
   * package.json 파일에 아래 코드 추가 후 'yarn' 입력하여 패키지 재설치

   "resolutions": {
     "babel-loader": "8.1.0"
   },​

5. 스토리북 실행 확인

   yarn storybook​

   

   yarn storybook // 실행 완료 화면