찍찍이 #초기세팅

이번 단기 심화 부트캠프에서 진행 중인 팀 프로젝트는 '일정 관리 커뮤니티 웹 애플리케이션' 개발입니다. 팀은 디자이너 1명, 백엔드 개발자 2명, 프론트엔드 개발자 3명으로 구성되어 있으며, 현재 기획 중인 프로젝트로, 세부 사항은 팀 미팅을 통해 점차적으로 확정해 나갈 예정입니다.

깃 허브 링크

---

프로젝트 초기 세팅 및 팀 협업 방식

팀 미팅을 통해 프로젝트의 세부 기획을 차차 정해 나갈 예정이며, 기획이 완료되면 바로 개발에 착수할 계획입니다.

프론트엔드 개발자끼리 레포지토리를 생성하여 프로젝트 초기 세팅을 진행하고 있으며, 커뮤니케이션은 실시간 줌 채팅을 통해 이루어집니다. 개발 문서는 노션을 사용하여 관리하고 있습니다.

---

기술 스택

이번 프로젝트에서 사용하기로 결정한 기술 스택은 아래와 같습니다:

Next.js (App Router)

TypeScript

Axios (API 통신)

Tailwind CSS (clsx, cva, tailwind-merge, rem to px)

Zustand (전역 상태 관리)

Tanstack Query (useQuery, useMutation)

SVGR (SVG 관리)

Storybook (UI 컴포넌트 문서화)

Prettier, ESLint, Husky (코드 품질 관리)

Jest, Cypress (테스트 도구) -> 여유있을 때 진행

NVM (Node 버전 관리)

PNPM (패키지 관리)

---

프로젝트 폴더 구조

현재 설정한 폴더 구조는 아래와 같습니다:

src
├── app
│   ├── (route)
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── loading.tsx
├── apis                    # api 설정 파일 (tanstack query, axios)
│   ├── ??
│   │   └── ...ts
├── components              # 컴포넌트 폴더
│   ├── common                 # 공통 컴포넌트
│   │   ├── button.tsx
│   │   └── modal.tsx
│   └── specific-feature       # 기능 별 컴포넌트
│       └── feature-card.tsx
├── hooks                   # 리액트 hook 폴더
│   ├── useAuth.ts
│   ├── useFetch.ts
│   └── useTheme.ts
├── provider                # provider 폴더
│   ├── theme-provider.tsx
│   ├── auth-provider.tsx
│   └── ...
├── store                   # zustand 폴더
│   ├── useUserInfo.ts
│   └── ...
├── utils                   # utils 폴더 
│   ├── api.ts
│   ├── validation.ts
│   └── ...
├── types                   # 타입 정의
│   ├── global.d.ts
│   ├── api.d.ts
│   └── ...
└── styles
		├── variables.css       # CSS 변수 (색상, 폰트 크기 등 전역 설정)
		├── mixins.css          # 재사용 가능한 CSS 믹스인 (Flex, Grid 설정 등)
		├── reset.css           # 기본 브라우저 스타일 초기화
		├── animations.css      # 애니메이션 관련 스타일 정의
		└── globals.css         # 전역 스타일 (Next.js App 레벨에서 사용하는 스타일)

---

초기 세팅 역할

Next.js 프로젝트 생성 및 TypeScript, Tanstack Query, Zustand, Axios 설정

PR 템플릿, Git issue 템플릿 정의

파일구조 세팅

Github Action - Organization 레포지토리 preview 배포 (Vercel)
Organization 레포지토리 preview 배포
짱잼님의 블로그를 참고하여 무사히 잘 수행