Skip to content

Convention

Jump to bottom
공정민 edited this page Mar 1, 2024 · 6 revisions

Git Commit Convention

Commit 메시지 컨벤션

  1. 메시지는 한글로 작성

  2. 제목은 명사로 끝내기

    ex) 회원 가입 구현함(X) → 회원 가입 구현 완료(O)

  3. 마침표 사용하지 않기

  4. 제목과 본문은 빈 행으로 구분하기

  5. 제목의 타입은 첫 글자는 대문자로 작성

  6. 본문의 내용은 어떻게 보다는 ‘**무엇과 왜’**에 중점

  7. Gitmoji 사용하기(Gitmoji 사용 후 한 칸 띄우기)

구조

#이슈번호 :gitmoji: 타입: 제목

본문

// 예시
#1 ✨ Feat: 회원가입 기능 구현

유효성 검사 로직 추가
아이디 중복확인 로직 추가

Gitmoji 및 타입 설명

Icon 코드 타입 설명
🎉 :tada : Init 프로젝트 시작
✨ :sparkles : Feat 기능 추가/수정
💄 :lipstick : Design CSS 등 사용자 UI 디자인 추가/수정
🎨 :art : Style 스타일 수정(공백, 세미콜론 등)
📝 :memo : Docs 문서 수정
👷 :construction_worker : Chore 빌드, 패키지 관련(업데이트 등)
🐛 :bug : Fix 버그 수정(오타는 이걸로)
♻️ :recycle : Refactor 코드 리팩토링
✅ :white_check_mark : Test 테스트 추가
🚚 :truck : Rename 파일/폴더 이동, 이름 수정
🔥 :fire : Remove 파일/폴더 삭제

(이모지 부분 :띄어쓰기 없이 작성하세요:)

Branch 전략

⛏️ 브랜치 만들기(feature/{기능명}) 기능명은 소문자로 작성하되 두 글자 이상인 경우 하이픈(-)으로 연결한다. ex) feature/kakao-login

  • main(최종 배포 끝난 후)
    • feature(개발용)
      • 기능 이름 ex) feature/login

fork 떠서 각자 깃헙 레포에서 feature/ㅇㅇㅇ 브랜치를 생성한 후, 개발을 진행하고 donga-it 깃헙 레포로 pull request 날림. (merge시 branch 삭제하며, Squash merge 하면 됨)

Naming Convention

폴더

  • 폴더 안에 index.js 가 없으면 소문자

    components
 ㄴ **mainpage**
		ㄴStatusModal.tsx
		ㄴCharacter.tsx

파일

  • Page Component 파일

    • pages 폴더에 포함된 라우팅 페이지 컴포넌트 이름은 ___Page.js 로 작성

      MainPage.tsx
SearchPage.tsx

  • Component 파일

    • **파스칼 케이스 (PascalCase)**로 작성

      Header.tsx
PopUpNews.tsx

  • Component 이외의 파일

    • 카멜 케이스(camelCase)

      fetchApi.tsx
auth.tsx

  • 스타일시트 파일(CSS)

    • 적용할 파일명과 동일하게 작성

      Header.tsx
Header.tsx

변수

❗ 변수명 축약하기 보다는 직관적으로 짓기 ex) button ⭕ btn ❌

  • 변수

    • camelCase와 영어 대소문자, 숫자를 사용

      const isLog = false;
const list2

    • 변수에 할당되는 값이 boolean인 경우에는 is를 접두사로 붙이기

      const isLogined = false;
const isOpen =true;

  • Constants (상수)

    • 대문자 로만 작성하고 여러 개의 단어를 합성한 경우 _ (under_score) 를 이용하여 단어 사이를 구분함

      const API_URL
const BASE_URL

함수

  • Event handler

    • handle + Event

    • camelCase

    • 만약 사용 되는 이벤트 함수가 여러개 있을 경우 어떤 기능을 가지고 있는지 유추할 수 있는 단어를 함께 작성

      <button onClick={handleClick}>리셋 버튼</button>
<button onClick={handleSubmitClick}>제출 버튼</button>

  • 유틸 함수

Props

  • PascalCase
// bad
<Foo
  UserName="hello"
  phone_number={12345678}
/>

// good
<Foo
  userName="hello"
  phoneNumber={12345678}
  Component={SomeComponent}
/>
Clone this wiki locally