20241017(목) ▶️ 개인프로젝트 세팅하기, 기술스택 선정

20241017 목 - TIL

팀 프로젝트가 끝나고 그동안 이론강의를 들었다.

이론을 배우고 나니 동작원리와 작동원리에 대해 이해하게 되었고,

다시 리액트 세상에 대해서 깨닫게 되었다.

 

이번에 개인프로젝트를 진행하면서 기존에 공부 겸 만들었던 팬레터 페이지를 마이그레이션 하기로 생각했고,

오늘부터 세팅을 하게 됐다.

 

앞으로는 프로젝트를 진행하면서 진행 상황도, 오늘의 개발 일지를 작성해보려고 한다.

 

 

 

 

사용하는 기술 스택

Next.js, TypeScript, Tailwind CSS, Recoil, Tanstack Query, Axios

 

 

 

 

UI 라이브러리

shadcn UI, React Spinners, React Hook Form, React icons, React Quill, React Avatar Editor

 

 

✨ shadcn UI

테일윈드 css로 세팅을 하면서 shadcn UI가 Tailwind CSS 와의 호환성이 뛰어나고 디자인 시스템을 여러가지 찾아봤는데,

기존의 전통적인 컴포넌트 library들은 번들된 소스 코드를 패키지 매니저를 통해 프로젝트 의존성에 추가해 사용한다.

이와 달리 shadcn/ui는 번들되지 않은 컴포넌트 소스 코드를 프로젝트에 의존성으로 추가하지 않고,

말 그대로 복붙해서 컴포넌트 코드를 온전히 사용할 수 있다는 점에서 채택하게 되었다.

 

 

✨ React Spinners

로딩바를 라이브러리로 쉽게 가져와서 쓸 수 있다는 점에서 채택하게 되었다.

 

 

✨ React icons

아이콘류는 React icons를 사용했다.

기존 폰트어썸을 사용했는데 폰트어썸은 아이콘을 찾아서 해당 아이콘이 브랜드 아이콘인지, 기본 아이콘인지에 따라

import로 불러오는 것이 전부 다르고 세팅이 복잡했다.

React icons 라이브러리는 내가 원하는 아이콘 리스트를 찾을 수 있다는 장점과 Docs가 직관적으로 되어있어 초보자들도 쉽게 적용할 수 있다.

그리고 한번 라이브러리를 다운받으면, icon 컴포넌트 하나만 추가할 수 있어 빠른 개발에 용이해서 선택하게 되었다.