이번에 포스팅할 내용은 React 프로젝트를 생성하고 해당 프로젝트에 스토리북(Storybook)을 적용하는 방법에 대해 알아보도록 하겠습니다.
우선 React 프로젝트가 존재해야 스토리북(Storybook)을 적용할 수 있으니 먼저 리액트 프로젝트를 생성해 보겠습니다.
React 프로젝트는 간단하게 CRA를 이용해서 생성 해보도록 하겠습니다. 프로젝트 폴더를 관리할 디렉토리에서 CLI창을 여신 후, 아래의 명령어를 입력해 주시면 됩니다.
npx create-react-app 프로젝트명
입력이 되셨다면 프로젝트가 생성 되셨을 겁니다. 그 후 사용 하시는 코드 에디터를 통해 프로젝트 폴더를 여시면 세팅에 신경쓰지 않고 리액트 프로젝트를 진행할 수 있게 셋업이 되어 있으실 겁니다.
아래는 CRA 명령어로 만든 후 편집기에서 열었을 때, 보이는 폴더 구조입니다.
스토리북(Storybook)을 해당 프로젝트에 적용하는 방법 역시 위에서 리액트 프로젝트를 생성하는 방법과 마찬가지로 매우 간단합니다. 하나의 명령어만 입력하면 됩니다.
npx storybook init
설치가 되시고 위의 폴더구조와 달라진 점을 살펴 보시면, .storybook 폴더가 프로젝트의 root에 생기신 것을 보실 수 있으실 겁니다. 또한 src 폴더 안에 stories 폴더가 생기신 것들도 보실 수 있으실 겁니다.
자, 이제 package.json 파일을 보시면 scripts storybook이라는 명령어가 추가 되신것을 보실 수 있으실 겁니다.
자 그럼 이제 명령어를 한번 입력해 볼까요. CLI 창에서 아래의 명령어를 입력해 봅시다.
yarn storybook
자, 입력이 끝나고 빌드가 100%가 되면? 새로운 창이 뜨실겁니다.
브라우저에서 위의 화면이 보인다면 프로젝트에 스토리북(Storybook)이 잘 적용된 겁니다!!
위의 화면을 보시고 "이게 뭔데??" 라는 궁금증을 가지실 것 같은데요. 간단하게 설명드리자면 이전 포스트에서 말씀 드렸던 것 처럼 UI를 고립된 환경내에서 개발할 수 있도록 도와주고 개발하고 있는 UI를 확인할 수 있도록 도와주는 GUI라고 보시면 될 것 같습니다. 다음 포스트에서는 위의 GUI환경을 간단하게 살펴보고 스토리(Story)를 작성하는 방법에 대해 포스팅 하도록 하겠습니다.
