vite+ typescript + react+ emotion + storybook

vite를 통해 react를 설치한다

// 더블대시가 필요함 주의
# npm 7+, extra double-dash is needed:
$ npm create vite@latest my-vue-app -- --template react-ts

 

emotion 설치

$ npm install --save @emotion/react

$ npm install --save @emotion/styled

 

react-router-dom 설치

$ npm i react-router-dom

 

 

절대 경로 설정을 위한 vite-tsconfig-paths 설치

$ npm i -D vite-tsconfig-paths @types/node

 

vite-env.d.ts 는 타입스크립트에서 환경변수를 추론하게 도와줌

https://velog.io/@rlwjd31/vite-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%B6%94%EB%A1%A0

vite typescript 환경변수 추론

 

 

emotion.d.ts는 emotion에서 테마 설정을 도와줌

 

 

stroybook 설치

https://storybook.js.org/docs/get-started/react-vite

Storybook for React & Vite • Storybook docs

 

$ npx storybook@latest init

 

설치가 완료되면 스토리북 사이트가 local로 켜지고 .storybook 폴더에 main.ts와 preview.ts가 생긴다.
그다음 src에 stories 폴더가 생겨서 안에 예제들이 생긴다