데브허브 | DEVHUB | FE 프로젝트 설계할 때, 꼭 챙겨야 할 13가지FE 프로젝트 설계할 때, 꼭 챙겨야 할 13가지
- Git 브랜치 전략: 프로젝트 규모에 따른 브랜치 전략(Git Flow, GitHub Flow 등) 수립 및 PR 템플릿 정의는 협업과 충돌 방지에 필수적입니다. 🌳
- 디렉토리 구조: 프런트엔드 아키텍처의 핵심인 디렉토리 구조는 역할과 의존성을 분리하여 기능 단위 또는 기술 책임 단위로 구성하며, FSD와 같은 방법론을 고려해야 합니다. 📂
- 컴포넌트 설계: 재사용성을 대원칙으로 삼고, 라이브러리/도구별 특성을 고려한 상세 가이드라인 및 샘플 컴포넌트 제작이 중요합니다. 🧩
- 상태 관리: 컴포넌트 내부, 서버 통신, 전역 상태를 명확히 정의하고, 적절한 도구 선택 및 상태 변경 코드 위치를 규정하여 효율적으로 관리해야 합니다. 🔄
- API 통신: 에러 처리, 로딩 상태, 캐싱 전략 등 데이터 흐름을 깨뜨리지 않도록 가이드를 수립하고, 서버 상태 관리 라이브러리나 서버 컴포넌트 활용을 고려해야 합니다. 📡
- 코드 스타일: 린팅, Prettier 등 정적 분석 도구를 활용하여 일관된 코드 스타일을 유지하고, 커밋 전 검사를 통해 품질을 확보해야 합니다. 💅
- 라우터 설계: 단순한 페이지 이동을 넘어 사용자 경험을 고려한 URL 설계(공유, 북마크)와 도구별 베스트 프랙티스를 따르는 구현이 중요합니다. 🗺️
- 빌드 및 배포 (CI/CD): 프로젝트 초중반에 CI/CD 흐름을 이해하고 자동화(GitHub Actions 등)를 구축하여 안전하고 신속한 배포를 가능하게 해야 합니다. 🚀
- 디자인 시스템: 개발자와 디자이너 간의 규칙 기반 협업을 통해 일관된 UI/UX를 제공하며, 용어 정리, 문서화, 디자인 토큰, 테마, 커스터마이징 전략을 포함해야 합니다. 🎨
- 테스트 전략: 함수 단위, 통합 테스트 등 프로젝트에 맞는 테스트 범위를 설정하고, AI 활용 및 CI/CD 파이프라인에 통합하여 코드 품질을 지속적으로 검증해야 합니다. 🧪
- AI 활용 가이드: AI 도구(정규 표현식, 유닛 테스트 등) 사용 규칙, 도구 선택, 프롬프트 스타일, 인간 리뷰 프로세스를 정의하여 효율성을 높여야 합니다. 🤖
- 기타 필수 항목: 환경 변수 보안, 에러 핸들링 메커니즘 및 수집, 노션/위키를 통한 문서화, 슬랙/디스코드 등 커뮤니케이션 도구 선정이 필요합니다. ⚙️
- 팀워크 및 협업: 가장 중요하고 비용이 많이 드는 요소로, 명확한 피드백 방법, 대화 방식 등 팀 내 규칙을 수립하여 오해 없이 꾸준히 협업하는 것이 핵심입니다. 🤝