![[Storybook] Next.js + Tailwind CSS + TypeScript 스토리북 적용하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdOzyE8%2FbtsIQLkPDSo%2F0M7iealfgOKDq7AsHgRDyK%2Fimg.png)
시작하며...이번 프로젝트에서 Storybook 을 적용하게 되었다. 이전 프로젝트에서는 공통 컴포넌트를 테스트 페이지를 만들어서, 사용하는 방법과 예시를 다른 팀원들에게 보여줬는데이제 Storybook 을 사용하면 번거롭게 테스트 페이지를 만들 필요가 사라진다. 설치하기먼저 Storybook 을 설치한다.npx storybook@latest init그러면 Storybook 이 설치되면서 실행이 된다. 해당 프로젝트는 yarn 이라서 yarn stroybook 을 입력하면 스토리북이 실행이 된다.만약 npm 이라면 npm run stroybook 를 입력하면 된다. 스토리북 작성하기컴포넌트 주석달기버튼 컴포넌트에 대해 Storybook 을 작성하기 전에 해당 버튼 컴포넌트의 interface 에 주석을..

시작하며...이번 프로젝트에서 프로젝트 초기 세팅을 하게 되었는데 초기 세팅을 진행한 순서와 방법에 대해 글을 작성하려고 한다. 1. 템플릿 만들기가장 먼저 깃허브 이슈와 Pull Requset 템플릿을 만들었다.만드는 방법은 아래 링크에서 확인할 수 있다. https://jjang-j.tistory.com/79 [GitHub] 깃허브 이슈(issue) & PR(Pull Request) 템플릿 만들기☘️ 시작하기 앞서 깃허브로 협업을 하기 위해서 이슈와 PR 이 필요하다. ☘️ 이슈 템플릿 만들기 1. 레포지토리의 Settings 창에 들어온다. 이슈를 생성할 레포지토리의 오른쪽에 있는 Settings 를jjang-j.tistory.com 이슈 템플릿은 위에 있는 내용 그대로 사용하였고, PR 템플릿은 ..