기술 스택

• 개발 환경
  • VSCode, Git, Github
• 빌드 및 배포
  • NPM, Next.js, Vercel, AWS
• FE 기술
  • HTML, CSS, JavaScript, TypeScript, React
  • TailwindCSS, Axios, Tanstack Query, Zustand
  • React Hook Form, SVGR
• 품질 관리
  • Prettier, ESLint, Gitmoji, Github Action
• 협업 도구
  • Discord, Notion, Figma

프로젝트 구조

• .gitkeep 파일로 프로젝트 폴더 구성

Albaform
├─ .github                : GitHub configurations
├─ app                    : App-wide files
│   ├─ api                : Internal APIs
│   └─ (page folders)     : Page components
│        └─ _components   : Page's components
├─ components             : Reusable components
├─ constants              : Constants
├─ hooks                  : Custom React hooks
├─ public                 : Static files
│   ├─ fonts              : Fonts
│   ├─ icons              : Icons
│   └─ images             : Images
├─ services               : External APIs
├─ store                  : State management
├─ types                  : Type definitions
└─ utils                  : Utility functions

코딩 컨벤션

기능 구현 방식

• Next.js 라우팅 : App Routing
• 통신 : Axios
• 서버 상태 : Tanstack Query
• 전역 상태 : Zustand
• CSS : TailwindCSS

반응형 CSS

• Mobile First
• 768px부터 Tablet, 1280px부터 Desktop

코드 포맷팅