Storybook

리액트로 개발을 하다보면 구성요소를 컴포넌트로 나누어서 상태를 관리하는 일이 많다.버튼이란 컴포넌트가 많이 이용되니 하나를 만들어서 재사용을 하여 다양한 버튼들을 만들어낸다.그 외에도 textinput, containe 등 다양한 구성요소들을 컴포넌트로 분리하여 재사용

먼저 Button 컴포넌트를 만들어보자.그리고 버튼의 스토리를 만들어보자빨강, 파랑, 스몰, 라지, 메인 각각 다섯개의 버튼을 만들어냈다그렇다면 한번 테스트를 진행해보자→ 간단하게 각각의 버튼들이 제대로 랜더링되고 있는지를 확인할 수 있게 테스트 코드를 작성해보자테스트

우리가 협업을 할 때 만든 컴포넌트들을 팀원들과 공유하기 위해서는 배포는 필수이다!이제 한번 공식 문서를 참고하여 배포를 해보는 시간을 가져보자.Storybook Tutorials배포를 할 때 사용할 툴은 크로마틱 chromatic이다.크로마틱은 스토리북을 배포할 때

스토리북과 피그마를 연동하는 방법은 총 두 가지가 있다.피그마에서 스토리북 보기피그마에서 제공되는 플러그인 이용스토리북에서 피그마 자료 보기스토리북에서 제공되는 addon을 이용피그마에서 스토리북을 볼 수 있게 되면 개발자가 더이상 따로 무언가를 하지 않아도 디자이너가

먼저 폰트를 지정해주자.index.html→ 사용할 폰트를 구글 폰트에서 링크로 가져왔다.Button.tsx→ 스타일에 폰트 패밀리를 추가해주었다이제 간단하게 로컬에서 확인할 수 있도록 App.tsx에 버튼을 출력해보자.스크린샷 2023-01-30 오전