SUI 프로젝트 - 초기 세팅

시작

드디어 SUI 프로젝트를 시작한다!

Storybook + Typescript + Tailwind을 사용할 예정!

서론

처음 리액트를 접하고 이런 걸 한 사람들을 봤을 때 도대체 이걸 왜 하는지 이해를 할 수가 없었다.

그냥 쓸 때마다 정의하거나, 이미 있는 라이브러리를 쓰면 되는 것이 아닌가?

하지만, 써보고나서야 알았다.

라이브러리에선 내가 원하는 부분이 커스텀이 잘 되지 않았고, 계속 만들어서 쓰기엔 활용도가 떨어졌다..!

또한 한 번 회사에서 디자인 시스템을 적용해보고 나니 너무나도 디자인 시스템에 혹할 수밖에 없었다,,

아래는 실제로 프로젝트에서 사용했던 코드

-> 물론 컴포넌트화 해도 좋았겠지만, 이곳밖에 안 써서 흐음.. 싶었다.

-> 그리고 여러 프로젝트마다 나는 원하는 디자인이 같은데 이런 코드를 다른 프로젝트에서 긁어오고 하는 것이 너무너무 불편했다!!

초기 세팅

서론이 되게 길었는데, 초기 세팅으로 바로 넘어가보자!

나는 Typescript로 하고 싶었는데 스토리북 공식문서 의 명령어로는 자꾸 Javascript밖에 나오지 않았다.

직접 내가 바꿔주는 방법이 있었지만 혹시나 잘못해서 다른 걸 건드리게 될까 무한 구글링..

진짜 많은 명령어들을 해봤지만,, 그냥 변경해주는 것으로 결론 지었다

npx -p @storybook/cli sb init --type react

이렇게 콘솔에 입력해주고 나면 root 폴더에 .storybook이라는 설정파일이 생성된다!

tailwind

tailwind를 쓸 거라 공식문서에서 tailwind 작성법을 따라했는데 아무리해도 먹지 않았다.

tailwind 설치법도 모르고 무작정 따라해서 인 거 같은데,,

tailwind 설치법도 따라해봤더니 계속 기본 버튼만 나오고 스타일이 입혀지지 않았따ㅠㅠㅠ

구글링하다가 typescript + tailwind + storybook 세팅이 되어있는 깃허브 를 찾아 이걸로 초기세팅을 마쳤다..

이것도 또한 오류 났었는데,,

npm i 가 아닌 npm ci를 해주어야 함!

ButtonProps도 안 먹는다는 오류 있는데 밑의 코드 설치해주고

npm install --save-dev @types/react

clsx도 다운로드 해주어야 한다

npm install clsx

clsx는 이 코드에서 처음봤는데 되게 좋았다!!

프로젝트 시작하면서 공부해보는 게 좋을듯하여 빼지 않고 그대로 넣어놨다

초기 세팅 끝!