Stage 3. 더미 데이터로 컴포넌트 조립
수강생 질문
"App.jsx에 지금까지 만든 페이지 컴포넌트들을 라우터로 세팅하고 앱셸도 글로벌하게 세팅해줘"라는 말이 “여태까지 만든 컴포넌트들을 pnpm 스토리북 말고 pnpm dev 했을 때 나오는 앱에 등록을 하고 페이지를 연결해라” 이 말과 같은 말인가요?
답변 1개
답변
네 맞습니다. 순수 html, css, js로 조합된 웹페이지들은 우리가 문서를 보듯이 바로 열고 닫을 수 있는데요, react.js는 결국 사람이 작업하기 좋게 만들어진 한번 더 층위가 쌓인 프로그래임 언어이기때문에 이걸 브라우저가 바로 열어볼 수 있는 형태로 풀어주는 작업이 필요합니다. pnpm dev, pnpm storybook 둘다 여기에 해당되는데요 dev는 react.js의 라우팅 방식에따라 App.jsx(웹사이트의 가장 최상단 컴퍼넌트 - 보통 여기에 url에 따라 보여줄 페이지를 정하는 라우팅 작업을 합니다)를 분해해서 브라우저가 볼 수 있는 로컬호스트를 실행하는 명령어이고 storybook은 미리 세팅된 스토리북 환경에 의해서 우리가 분류한 섹션 > 카테고리 > 스토리의 위계를 갖고 한 화면에 모든 컴퍼넌트를 둘러볼 수 있게 로컬 호스트에서 보여주는 것입니다. 위 두 내용과 관련된 내용은 S2에서 더 자세하게 다루고있습니다