개발하는 녹차

지난 번에 이어서 NPM에 내가 만든 라이브러리를 배포하는 방법에 대해 알아보는 시간을 갖겠습니다. 이번에는 Storybook을 이용해서 자신이 만들 컴포넌트를 미리 확인할 수 있도록 해보겠습니다. 스토리북 설치npx storybook@latest init위의 명령어를 입력하고 설치가 완료되면 .storybook 폴더가 생기고 하위에 main.ts와 preview.ts 파일이 생성된다..storybook/main.ts를 보면, stories 필드가 있는데, story 파일을 읽을 수 있는 경로를 명시하고 있다. Button 스토리 작성예시로, src/stories/button.stories.ts를 아래와 같이 작성하고 npm run storybook을 실행하면 구현한 컴포넌트를 미리 확인할 수 있다.im..

보통 React 프로젝트를 생성할 때 CRA(Create-React-App) 방식을 주로 사용하여 작업했지만, 이를 사용하면 번들러로 Webpack을 사용하게 되는데 프로젝트의 크기가 커질 수록 속도가 상당히 느려지는 것을 알 수 있다. 이를 해결하기 위해 Vite를 사용하여 React 프로젝트를 생성하는 것을 선택했다. esbuild를 번들러로 사용하기 때문에 보다 빠르고 간결하게 이용이 가능하다. 💻 프로젝트 생성하기npm create vite@latest [프로젝트 명] --template react-tscd [프로젝트 명] && npm install❌ 불필요한 파일 삭제하기아래의 불필요한 파일들을 모두 삭제한다.publicassetsApp.cssApp.tsxmain.tsxindex.html💨 ..