프로젝트 컨벤션 정리

[1eeyerin]

🌟 팀 프로젝트 규칙

🔥 branch 전략 (배민 git flow 참고 🔗 : https://techblog.woowahan.com/2553/)

• main(master): 서비스을 직접 배포하는 역할을 하는 브랜치입니다.
• feature(기능): 각 기능 별 개발 브랜치입니다.
• develop(개발): feature에서 개발된 내용이 저장되는 브랜치입니다.

🔥 git commit 컨벤션

• 커밋 메세지를 잘 작성하면, 우리는 단순히 커밋 이력만 보고서도 현재까지 어떤 개발이 진행되었고, 어떤 커밋에서 문제가 발생했는지 등을 확인할 수 있게 됩니다. 특히나 규모가 큰 개발일수록 이 커밋 메세지는 더욱 중요해집니다.

작업 타입	작업내용
feat	해당 파일에 새로운 기능이 생김
fix	버그 수정
docs	문서 수정
refactor	코드 리팩토링
style	코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
chore	빌드 업무 수정, 패키지 매니저 수정

👩🏻‍🔬 패키지 매니저

• 프로젝트에서는 패키지 매니저로 Yarn Berry를 사용합니다.
  빠른 속도와 Zero-Install 기능을 사용하여 프로젝트의 의존성 관리를 효율적으로 진행할 수 있습니다.

🐹 폴더 구조 규칙

• src: 소스 코드가 위치하는 폴더입니다.
  • components: 재사용 가능한 UI 컴포넌트들이 위치합니다.
    • 예: Badge.jsx
  • styles: 스타일 관련 파일들이 위치합니다.
    • 예: constants.js, utils.js
  • pages: 각 페이지 컴포넌트들이 위치합니다.
  • hooks: 커스텀 훅들이 위치합니다.
  • utils: 유틸리티 함수들이 위치합니다.
  • assets: 이미지, 폰트 등 정적 파일들이 위치합니다.

🎸 예시 폴더 구조

src/
├── assets/
│   ├── images/
│   │   └── logo.png
├── components/
│   ├── Badge.jsx
│   ├── Button.jsx
│   └── ...
├── hooks/
│   └── useCustomHook.js
├── pages/
│   ├── Home/
│   │   └── Home.jsx
│   ├── About/
│   │   └── About.jsx
│   ├── index.js
│   └── ...
├── styles/
│   ├── globalStyles.js
│   ├── constants.js
│   └── utils.js
├── utils/
│   └── index.js
└── index.js

📐 공통 eslint 규칙

// prop-types 미사용
'react/prop-types': 'off',

// 함수 컴포넌트를 화살표 함수 형태로 정의하도록 규칙 설정
'react/function-component-definition': [
  'error',
  {
    namedComponents: 'arrow-function',
    unnamedComponents: 'arrow-function',
  },
],

//안 쓰는 import 에러 처리
'unused-imports/no-unused-imports': 'error',

📐 공통 eslint import 규칙

'import/order': [
      'error',
      {
        groups: [
          // 내장 모듈
          'builtin',
          // npm을 통해 설치된 외부 모듈
          'external',
          // 프로젝트 내부에서 설정한 경로 별칭을 사용하는 모듈
          'internal',
          // 상위 디렉토리에 있는 모듈
          'parent',
          // 같은 디렉토리에 있는 모듈
          'sibling',
          // 같은 디렉토리의 index 파일
          'index'
        ],
        pathGroups: [
          {
            pattern: 'react*',
            group: 'external',
            position: 'before'
          },
          {
            pattern: '@/hooks{,/**}',
            group: 'internal',
            position: 'after'
          },
          {
            pattern: '@/schemas{,/**}',
            group: 'internal',
            position: 'after'
          },
          {
            pattern: '@/utils{,/**}',
            group: 'internal',
            position: 'after'
          },
          {
            pattern: '@/constants{,/**}',
            group: 'internal',
            position: 'after'
          },
          {
            pattern: '@/pages{,/**}',
            group: 'internal',
            position: 'after'
          },
          {
            pattern: '@/components{,/**}',
            group: 'internal',
            position: 'after'
          },
          {
            pattern: '@/styles{,/**}',
            group: 'internal',
            position: 'after'
          },
          {
            pattern: '@/svg{,/**}',
            group: 'internal',
            position: 'after'
          },
          {
            pattern: '@/**',
            group: 'internal',
            position: 'after'
          }
        ],
        // pathGroups 규칙을 적용하지 않을 import 타입을 설정
        pathGroupsExcludedImportTypes: [],
        // 임포트 그룹 사이 개행 여부
        'newlines-between': 'never',
        alphabetize: {
          // 알파벳 순서대로 정렬
          order: 'asc',
          // 대소문자 구분 없이 정렬
          caseInsensitive: true
        }
      }
    ]