반응형

storybook 4

[React Native] 스토리북(Storybook) 스크린(Screen) 띄우기

React Native 스토리북(Storybook) 스크린(Screen) 띄우기 앞서 React Native 프론트 개발을 컴포넌트들을 스토리북(Storybook)에 추가하는 방식들을 설명 드렸습니다. 스토리북을 사용해서 React Native 프로젝트를 실행하면 Storybook이 자동으로 실행되어 생성한 컴포넌트(component) 들만 확인이 가능했어습니다. 스토리북에서 컴포넌트들을 추가했으면 이제 스크린에 컴포넌트들을 띄워 앱을 만드는 방법을 해보겠습니다. 제가하는 방식이 정답이 아닐 수도 있고 맞을 수도 있는데, 제가 사용하는 방법을 보여드리겠습니다. 따라하시면 간편하게 화면(screen)을 띄울 수 있습니다. Storybook을 설치하고 실행할때에 프로젝트에 있던 App.js를 삭제해주었었습니..

[React Native] 스토리북(Storybook) Decorator 스크린 style

앞서 스토리북을 사용해서 컴포넌트(components)와 스토리 추가하는 방법을 설명했습니다. 컴포넌트와 스토리를 아직 추가 하실줄 모르시거나 안하셨으면 아래 링크를 참조해 주세요~! https://dlee0129.tistory.com/6 [React Native] 스토리북(Storybook) 컴포넌트 & 스토리 추가하기 React Native 앱 프론트 개발을 할때 스토리북을 사용하면 편하게 개발할 수 있습니다. 사용할 컴포넌트들을 스토리북을 통해 보다 직관적으로 볼 수 있어 재사용이나 이해하기 좋은것 같습니다. dlee0129.tistory.com React Native 프론트 개발을 할 때에 스크린에서 를 생성해서 flex: 1 그리고 margin과 같은 스타일들을 추가해서 사용하는데, 스토리북에서..

[React Native] 스토리북(Storybook) 컴포넌트 & 스토리 추가하기

React Native 스토리북(Storybook) 컴포넌트(component) & 스토리(story) 추가, 생성하기 React Native 앱 프론트 개발을 할때 스토리북을 사용하면 편하게 개발할 수 있습니다. 사용할 컴포넌트들을 스토리북을 통해 보다 직관적으로 볼 수 있어 재사용이나 이해하기 좋은것 같습니다. 이제 스토리북(Storybook)에 컴포넌트(component)랑 스토리(story)를 추가해 보겠습니다. 먼저 스토리북 설치와 기본 세팅이 안되신 분은 앞선 글을 보시고 설치 및 세팅을 해주시면 됩니다. 아래 링크를 통해 들어가시면 됩니다~! https://dlee0129.tistory.com/5 [React Native] 스토리북(StroyBook) 설치 React Native 프로젝트에 ..

[React Native] 스토리북(StroyBook) 설치

React Native 프로젝트에 스토리북(StroyBook)을 설치해서 사용하는 방법 먼저 스토리북을 사용할 프로젝트에 스토리북(StoryBook)을 설치합니다. npx -p @storybook/cli sb init --type react_native 터미널에서 위의 명령어를 입력하여 설치를 합니다. 설치를 진행하는 도중 아래와 같은 문구가 나오면 y를 눌러 설치를 계속합니다. ? Do you want to install dependencies necessary to tun Storybook server? You can mannually do it later by install @storybook/react-native-server 설치가 완료되면 storybook 디렉토리가 추가가 됩니다. 스토리북에..

반응형