음반 판매를 위한 e-커머스 서비스
Site: https://dz1t23qy0uoof.cloudfront.net GitHub: https://github.com/page1597/commerce
📦 src
┣ 📂 assets
┃ ┃
┣ 📂 **components**
┃ ┣ 📂 ui
┃ ┗ 📂 skeleton
┃
┣ 📂 **hooks**
┃ ┣ 📂 auth
┃ ┣ 📂 basket
┃ ┣ 📂 order
┃ ┗ 📂 product
┃
┣ 📂 lib
┃ ┗ 📜 utils.ts
┃
┣ 📂 context
┣ 📂 provider
┃
┣ 📂 **routes**
┃ ┣ 📂 private # 관리자(판매자)에게 보여지는 페이지
┃ ┃ ┗ 📂 admin
┃ ┗ 📂 public # 구매자에게 보여지는 페이지
┃ ┣ 📂 category
┃ ┗ 📂 member
┃
┣ 📂 **services**
┃ ┗ 📂 firebase
┃ ┃
┣ 📂 **types**
┃ ┗ 📂 formSchemas
┃
┣ 📜 App.tsx
┣ 📜 index.css
┣ 📜 main.tsx
┗ 📜 vite-env.d.ts
| Vite | Vite는 esbuild로 파일들을 통합하고 rollup을 통해 번들링하여 개발 환경에서 빠른 속도의 서버 시작 시간과 빌드 시간을 제공하기 때문에 CRA가 아닌 Vite 사용을 선택하게 되었다. 실제로 React Docs에 Create React App(CRA) 대신 Vite의 사용을 권장해달라는 PR이 올라왔을 정도로 최근에는 많은 개발자들이 속도가 더 빠르고 가벼운 Vite를 선호하는 추세이다. |
|---|---|
| Typescript | TypeScript의 사용은 필수적이라 생각했다. TypeScript는 JavaScript보다 코드의 안정성과 가독성, 유지 보수성을 보장한다. 미리 타입을 명시해주지 않아 발생하는 수고를 덜 수 있기 때문에 오히려 JavaScript 보다 코드 작성을 쉽게 할 수 있다고도 생각한다. |
| TanStack Query | TanStack Query는 데이터 패칭, 캐싱, 로딩, 에러처리 등의 여러 작업들을 편하게 할 수 있도록 도와주고 관련 코드를 간결하고 가독성 있게 작성할 수 있게 한다. 상품 목록에 적용한 무한 스크롤도 TanStack Query에서 제공하는 useInfiniteQuery를 사용하여 구현할 수 있었다. |
| React Router | SPA 기반인 React에서의 라우팅을 위해 사용하였다. React Router는 리액트 초기부터 사용된 오래된 라이브러리로 가장 많이 사용되기에 선택하였다. React Router를 사용해 페이지 이동, 동적 라우팅 등을 구현하였다. |
| Tailwind CSS | 여태 Styled Components, Emotion만 사용해봤기 때문에 한번도 사용해보지 않았던 스타일 적용 도구를 사용해보고 싶었다. 컴포넌트 단위로 스타일을 관리하는 Styled Components와 Emotion과는 다르게, HTML 요소에 직접 클래스를 적용하기 때문에 컴포넌트 명을 정의하는 데에 시간을 쏟지 않아도 되어서 편했다. 처음에는 사용법이 익숙치 않아 어색했지만, 금방 적응되어 오히려 개발 속도가 향상되었다고 느꼈다. |
| Shadcn-UI | 디자이너 없이 진행했던 프로젝트였기에 프로젝트 내 일관된 디자인을 유지하기 위한 UI 컴포넌트 라이브러리가 필요하다고 느꼈다. Shadcn-UI는 Radix UI에 스타일을 적용한 재사용 가능한 컴포넌트 모음으로, 필요한 부분만을 선택해서 가져와 사용할 수 있다. 따라서 가볍고 Tailwind CSS를 통해 스타일을 추가하거나 수정하기에도 용이해 선택하였다. 또한 기본 제공되는 디자인도 예쁘고 깔끔하다. |
| Context API | 규모가 크지 않은 애플리케이션이기 때문에 전역 상태 관리를 위해 Recoil과 같은 다른 상태 관리 라이브러리를 따로 설치할 필요가 없다고 생각했다. 실제로 애플리케이션 안에서는 유저 상태 Context만을 사용했다. |
| Firebase | 백엔드 개발자가 없는 1인 소규모 프로젝트에 적합한 개발 플랫폼이라고 하면 가장 먼저 Firebase가 떠올랐다. 공식 문서도 잘 작성되어 있으며 Database, Storage, Authentication 등의 다양한 기능들을 무료로 제공하기 때문에 좋은 선택이라고 생각했다. |
| react-hook-form & Zod | react-hook-form을 통해 회원가입이나 상품 등록, 수정과 같은 여러 인풋이 있는 폼을 효과적으로 관리할 수 있다. 코드 작성을 간결하게 할 수 있으며 값이 변경 되었을 때의 불필요한 리렌더링을 방지한다. 또한 Zod의 validation을 react-hook-form과 함께 사용하면 폼의 유효성 관리를 정말 편하게 할 수 있다. |
| Github Actions | CI/CD를 처음 접해봤기 때문에 초기 설정이 어렵고 별도의 서버가 필요한 Jenkins 보다는 더 간편한 도구인 Github Actions를 선택하게 되었다. Github를 코드 저장소로 사용하고 있었기 때문에 Github와 완전히 연동되고 무료로 사용할 수 있는 Github Actions를 사용하여 자동 배포를 활성화하였다. |
✏️ 블로그 글 더보기