Convention

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/FE/kakao-login

GitHub Flow 방식으로 진행

• main
  • feature(기능 개발용)
    • 기능 이름 ex) feature/login

main 브랜치에서 기능을 개발할 브랜치를 생성하면 됨 (merge시 Squash merge 진행)

참고 자료

Git Branch 전략 비교 - Git Flow vs GitHub Flow

Git branch 전략(Git-Flow, Github-Flow, Gitlab-Flow)

---

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}
/>

참고 자료

[공부] 나만의 코딩 컨벤션 (react)

React JS - Naming convention