기본편
스타일링 라이브러리 : twin.macro
중간 팀프로젝트 때 tailwind와 twin macro중 고민했었는데 tailwind는 스타일이 길어지면 가독성이 떨어진다고 생각했었다. 나는 tailwind 조차 처음이었는데 금방 습득했던 거 같다. 챗지피티 많이 썼지만ㅎ..
위 사진처럼 twin macro를 사용했는데, <HomeHeaderContainer> 처럼 변수명을 확실하게 지어주고 styled로 위에서 스타일을 정리해주었다.
<button> 처럼 확실히 알 수 있는 부분은 tailwind를 사용해주었다.
twin macro에 대한 설명 참고 : https://velog.io/@leehyunho2001/Tailwind-Emotion-twin.macro
UI Framework (Material-UI, Bootstrap 등) : shadcn, daisy, bootstrap 이 와닿았다.
"기존에 만들어진 구조물들을 기반으로 원하는 건축물을 만드는 방식이 프레임워크를 사용한 개발방식이다."
- 장점 : 개발이나 기획 단계의 과정을 매우 단순화시킴 (기간, 비용 절감)
- 단점 : 디자인 패턴/그리드 시스템 제약(만들어진 틀 안에서 디자인)
오 그렇군..
Next.JS, Tailwind CSS 환경에서 가장 어울리는 것은?!
- bootstrap
- 장점: 유명하고 다양한 컴포넌트 제공, 모두 사용자 친화적인 UI 컴포넌트를 제공, 반응형 웹 디자인, 커뮤니티 지원
- 단점: 일부 커스터마이징에 제약이 있을 수 있음
- MUI (Material-UI)
- 장점: Google의 Material Design을 기반으로 한 아름다운 디자인, 다양한 컴포넌트 제공, 확장성이 뛰어남.
- 단점: 일부 프로젝트에서 번들 크기가 크게 나올 수 있음, 커스터마이징이 조금 복잡할 수 있음.
- shadcn/ui
- 장점: Tailwind CSS와 통합된 경량 라이브러리, 간단하고 빠르게 시작할 수 있음.
- 단점: 컴포넌트의 다양성이 다소 부족할 수 있음, 커스터마이징 기능이 상대적으로 적음.
- Daisy UI
- 장점: 리액트 기반으로 간편하게 사용 가능, 다양한 디자인과 컴포넌트 제공.
- 단점: 상대적으로 새로운 라이브러리이며, 커뮤니티와 문서화가 다른 대표적인 라이브러리에 비해 제한적일 수 있음.
- Ant Design (antd)
- 장점: 다양하고 풍부한 컴포넌트, 훌륭한 디자인, 확장성이 좋음.
- 단점: 번들 크기가 크게 나올 수 있음, 일부 개발자는 중국에서 온 라이브러리라는 점을 고려하길 원할 수 있음.
- Tailwind UI
- 장점: 다양하고 풍부한 컴포넌트, 훌륭한 디자인, Tailwind CSS를 만든 회사에서 만들어서 최적화 및 적용성 뛰어남.
- 단점: 제한없이 사용하려면 $300 지불해야함.
결론 및 요약:
- 만약 디자인이 중요하고 Material Design을 선호한다면MUI
- 경량하면서도 간단한 사용을 원한다면shadcn/ui, Daisy UI
- 풍부한 컴포넌트와 디자인이 중요하다면Ant Design (antd)
- 돈이 많다면Tailwind UI
전역 상태 관리 (Redux, RTK, Zustand, Recoil 등) : ㅠㅠ어렵다… 주스텐드..?
서버 상태 관리 (React-query / swr / 미사용 등) : 사용한다면 react-query
SWR과 React-Query는 서버 상태 관리를 위한 라이브러리이다. 두 라이브러리 모두, 서버 상태를 가져오며(data fetching), 서버데이터의 캐싱, 동기화, 업데이트를 지원한다.
SWR은 먼저 캐시에서 데이터를 반환한 다음, 서버에 데이터를 가져오는 요청을 보내고, 마지막으로 최신 데이터를 제공하는 전략이다. React Query는 React 어플리케이션에 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 것을 쉽게 해 준다.
→ 데이터를 가져오는 간단한 방법이 필요하고 데이터가 오래되어도 상관 없다면 SWR이 좋은 옵션.
하지만 캐싱에 대한 보다 세밀한 제어가 필요할 때는 React Query가 좋은 선택
- 메타 프레임워크 (Next / Remix / 미사용) :
약간 고급편
- 컴포넌트 문서화 도구 (Storybook 등)
- 번들러 (Vite, Webpack 등) : 말씀해주신거 보고 next를 사용한다면 webpack을 사용할 수 밖에 없다.고 생각..
패키지 매니저 (npm, pnpm, yarn legacy, yarn berry 등) : 궁금
프로젝트에 필요한 외부 라이브러리, 모듈, 플러그인 등을 손쉽게 설치하고 관리하는 역할
npm은 기본적인 패키지 매니저이며,
pnpm은 npm의 의존성 문제를 해결한 패키지 매니저다.
yarn은 npm보다 빠른 의존성 설치와 버전 관리를 제공하는 패키지 매니저이며,
yarn berry는 다중 패키지 프로젝트를 위한 기능을 강화한 yarn의 버전이다. pnpm과 yarn berry는 모노레포 환경에서 효과적으로 사용될 수 있다.
pnpm, yarn berry 가 강화된 느낌이라 좋은거 같긴한데 사용할 때 어렵진 않나요? npm,yarn으로도 충분히 할 수 있을 거 같다?
- 테스트 도구 (react-testing-library, playwright, Storybook 등)
- 테스트 러너 (jest / vitest 등)