Skip to content

Home

Jump to bottom
bae-suho edited this page Jan 19, 2026 · 10 revisions

프로젝트 이름 Frontend Wiki

서비스 바로가기

Frontend Repository


목차


설계 문서

  1. 기술 스택 선정 문서

    노션에서 보기

    깃허브 위키에서 보기

  2. 유저 플로우 차트 문서

    draw.io에서 보기

    노션에서 보기

    깃허브 위키에서 보기

  3. 도메인 별 테크 스펙 문서

  4. 프론트엔드 개발 표준 및 구조 설계

    노션에서 보기

    깃허브 위키에서 보기

개발 일정

기간 주요 작업
1/19 ~ 2/2 프로젝트 초기 설정, 폴더 구조 구성, 공통 컴포넌트 개발

컨벤션 룰

코드 컨벤션 (Prettier & ESLint)

네이밍 규칙

항목 케이스 규칙
폴더명, 파일명, 변수 및 함수명, 서버 응답 데이터 camelCase
컴포넌트명 PascalCase

Prettier

옵션 값 설명
trailingComma es5 객체, 배열 등의 마지막 요소에 쉼표 추가
tabWidth 2 들여쓰기 공백 수
semi true 문장 끝 세미콜론 사용
singleQuote true 작은따옴표 사용
bracketSpacing true 객체 리터럴 괄호 안 공백 추가
jsxBracketSameLine false JSX 태그의 닫는 괄호를 다음 줄에 배치
printWidth 80 한 줄의 최대 길이

ESLint

항목 설정 내용
기본 설정 eslint:recommended
TypeScript 설정 plugin:@typescript-eslint/recommended
Next.js 설정 next/core-web-vitals
무시 폴더 node_modules, .next, out, dist
플러그인 @typescript-eslint, react-hooks
커스텀 룰 no-unused-vars: warn, no-console: warn

깃 브랜치 전략

기본 브랜치

브랜치 설명
main 프로덕션 배포용 브랜치 (안정 버전)
dev 개발용 브랜치 (기능 통합 및 테스트)

작업 브랜치 네이밍 규칙

브랜치 타입 네이밍 패턴
기능 추가 feature/#이슈번호-간단한설명
버그 수정 fix/#이슈번호-간단한설명
리팩토링 refactor/#이슈번호-간단한설명

커밋 메세지

커밋 유형 설명
feat 새로운 기능 추가
fix 버그 수정
docs 문서 수정 (README, 주석 등)
style 코드 포맷팅, 세미콜론 누락 등 (기능 변경 없음)
refactor 코드 리팩토링 (기능 변경 없음)
test 테스트 코드 추가 또는 수정
chore 빌드 프로세스, 패키지 매니저, 설정 파일 수정
design UI/UX 디자인 변경
comment 주석 추가 및 수정
rename 파일명, 폴더명 수정
remove 파일 또는 코드 삭제
BREAKING CHANGE 하위 호환성을 깨뜨리는 변경사항
HOTFIX 긴급 버그 수정 (프로덕션)

PR 컨벤션

예시: Feature - 메인 페이지 UI 구현

태그 의미 설명
Refactor 코드 구조 개선 기능 변경 없이 코드 품질 향상
Perf 성능 개선 성능 최적화 관련 변경
Remove 코드/파일 제거 불필요한 코드 또는 파일 삭제
Fix 버그 수정 버그 또는 오류 해결
Hotfix 긴급 수정 프로덕션 긴급 버그 수정
Feature 기능 추가 새로운 기능 구현
Design UI/스타일 수정 디자인 및 스타일링 변경
Revert 변경 사항 되돌리기 이전 커밋으로 롤백
Merge 브랜치 병합 브랜치 간 병합 작업
Comment 주석 추가/수정 코드 주석 관련 변경
DB DB 관련 변경 데이터베이스 스키마, 마이그레이션 등

트러블 슈팅


사용한 라이브러리

라이브러리 역할 / 설명
Next.js React 기반 풀스택 프레임워크 (App Router 사용)
TypeScript 정적 타입 검사를 통한 코드 안정성 향상
Zustand 경량 전역 상태 관리 라이브러리
TanStack Query 서버 상태 관리 및 캐싱 (구 React Query)
React Hook Form 폼 상태 관리 및 유효성 검사
Zod 스키마 기반 데이터 유효성 검증
axios HTTP 클라이언트 (API 통신)
ESLint 코드 품질 및 스타일 검사 도구
Prettier 코드 포맷팅 자동화 도구
Vitest Vite 기반 빠른 단위 테스트 프레임워크

디자인 시스템


배포 환경 및 CI/CD 파이프라인

배포 환경

  • 프로덕션: main 브랜치 기반 자동 배포
  • 개발: dev 브랜치 기반 자동 배포

CI/CD 파이프라인

  • GitHub Actions를 통한 자동화
  • 빌드 → 테스트 → 린트 검사 → 배포
  • PR 생성 시 자동 빌드 및 테스트 실행
  • main 브랜치 병합 시 프로덕션 자동 배포

코드 품질 관리 도구

도구 역할 목적
ESLint 정적 코드 분석 코드 품질 검사 및 잠재적 버그 탐지
Prettier 코드 포맷팅 일관된 코드 스타일 유지
TypeScript 타입 검사 컴파일 타임 에러 방지, 코드 안정성 향상

테스트 전략

도구 역할 목적
Vitest 단위 테스트 프레임워크 유틸 함수, 커스텀 훅 테스트

테스트 대상

  • 유틸리티 함수 (formatDate, formatPrice 등)
  • 커스텀 훅 (useAuth, useRequireAuth 등)

Clone this wiki locally
⚡