토이 프로젝트 2 - 커밋/함수/네이밍/PR 컨벤션 정하기

 

커밋 컨벤션

Type	설명
Feat:	기능 추가, 삭제, 변경
Fix:	버그 수정 또는 typo
Docs:	문서 추가, 삭제, 변경
Refactor:	코드 리팩토링, eg. renaming a variable
Design:	CSS 등 사용자 UI 디자인 변경
Comment:	필요한 주석 추가 및 변경
Style:	코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
Test:	테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)
Chore:	위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)
Init:	프로젝트 초기 생성
Rename:	파일 혹은 폴더명 수정하거나 옮기는 경우
Remove:	파일을 삭제하는 작업만 수행하는 경우
Close	이슈 종료 키워드

• eg. 빌드 스크립트 수정, 패키지 배포 설정 변경, 폴더 이동, 파일명 변경, assets 폴더에 이미지 추가 프로젝트에 필요한 이미지 추가하는 경우

📌 커밋 생성 시

[#issue_number] Feat: ㅇㅇ기능 작성

📌 이슈 종료 시

[close: #issue_number] ㅇㅇ 기능 구현 완료

📌 커밋 컨벤션 템플릿

#conventionMessageTemplate 사용법

1.템플릿 경로 설정 - 커밋 메세지 템플릿의 경로를 지정합니다.

$ git config commit.template [파일경로]
*글로벌 옵션은 다른 프로젝트에도 적용하고 싶으면 쓰시면 됩니다. 저는 옵션을 빼고 진행 했습니다.
*파일의 이름은 'conventionTemplate.txt'입니다.

2. 커밋
1번을 진행한 후, 커밋을 진행 하실때는 $git commit 커맨드를 사용합니다. 메세지 옵션을 넣지 않습니다.
commit 후, 템플릿이 안내하는 데로 커밋 메세지를 작성 하시면 됩니다.

# 제목은 최대 50글자까지 아래에 작성: ex) Feat: Add Key mapping
[#issue_number] Feat: ㅇㅇ기능 작성

# 본문은 아래에 작성  

# 꼬릿말은 아래에 작성: ex) Github issue #23  

# --- COMMIT END ---  
#   <타입> 리스트  
#   Feat        : 기능 (새로운 기능)  
#   Fix         : 버그 (버그 수정)  
#   Refactor    : 리팩토링  
#   Design      : CSS 등 사용자 UI 디자인 변경  
#   Comment     : 필요한 주석 추가 및 변경  
#   Style       : 스타일 (코드 형식, 세미콜론 추가: 비즈니스 로직에 변경 없음)  
#   Docs        : 문서 수정 (문서 추가, 수정, 삭제, README)  
#   Test        : 테스트 (테스트 코드 추가, 수정, 삭제: 비즈니스 로직에 변경 없음)  
#   Chore       : 기타 변경사항 (빌드 스크립트 수정, assets, 패키지 매니저 등)  
#   Init        : 초기 생성  
#   Rename      : 파일 혹은 폴더명을 수정하거나 옮기는 작업만 한 경우  
#   Remove      : 파일을 삭제하는 작업만 수행한 경우  
# ------------------  
#   제목 첫 글자를 대문자로  
#   제목은 명령문으로  
#   제목 끝에 마침표(.) 금지  
#   제목과 본문을 한 줄 띄워 분리하기  
#   본문은 "어떻게" 보다 "무엇을", "왜"를 설명한다.  
#   본문에 여러줄의 메시지를 작성할 땐 "-"로 구분  
# ------------------  
#   <꼬리말>  
#   필수가 아닌 optioanl  
#   Fixes        :이슈 수정중 (아직 해결되지 않은 경우)  
#   Resolves     : 이슈 해결했을 때 사용  
#   Ref          : 참고할 이슈가 있을 때 사용  
#   Related to   : 해당 커밋에 관련된 이슈번호 (아직 해결되지 않은 경우)  
#   ex) Fixes: #47 Related to: #32, #21  

 

---

1. 이벤트 핸들러 함수

• 형식: handle<EventName>
• function handleClick(event) { // 클릭 이벤트 처리 }

2. 상태 설정 함수

• 형식: set<StateName>
• const [isOpen, setIsOpen] = useState(false); function setOpenState(open) { setIsOpen(open); }

3. 비동기 함수

• 형식: fetch<Data>, get<Data>
• async function fetchUserData(userId) { const response = await fetch(`/api/users/${userId}`); const data = await response.json(); return data; }

4. 유틸리티 함수

• 형식: 동사로 시작
• function formatDate(date) { return new Intl.DateTimeFormat('en-US').format(date); } function calculateTotal(items) { return items.reduce((total, item) => total + item.price, 0); }

5. 커스텀 훅

• 형식: use<HookName>
• function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { async function fetchData() { const response = await fetch(url); const result = await response.json(); setData(result); } fetchData(); }, [url]); return data; }

6. 기타 함수명 규칙

• 형식:
  • show...: 무언가를 보여주는 함수
  • function showMessage(message) { alert(message); }
  • get...: 값을 반환하는 함수
  • function getAge(birthDate) { const today = new Date(); const age = today.getFullYear() - birthDate.getFullYear(); return age; }
  • calc...: 값을 반환하는 함수
  • function calcSum(a, b) { return a + b; }
  • create...: 무언가를 생성하는 함수
  • function createForm() { const form = document.createElement('form'); return form; }
  • check...: 무언가를 확인하고 불린값을 반환하는 함수
  • function checkPermission(user) { return user.role === 'admin'; }
  • convert...: 무언가를 전환해주는 함수
  • function convertToString(value) { return value.toString(); }

---

함수 작성

• 함수형 컴포넌트 사용: React는 함수형 컴포넌트를 권장합니다. 클래스 컴포넌트보다 간결하고 이해하기 쉽습니다.
• function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
• 화살표 함수 사용: 특히 간단한 컴포넌트나 콜백 함수에 화살표 함수를 사용합니다.
• const Welcome = (props) => <h1>Hello, {props.name}</h1>
• 구조 분해 할당: props나 state를 구조 분해 할당하여 사용합니다.
• function Welcome({ name, age }) { return <h1>Hello, {name}. You are {age} years old.</h1>; }
• 순수 함수 작성: side effects를 최소화하고, 같은 입력에 대해 항상 같은 출력을 반환하는 순수 함수를 작성하도록 권장합니다.
• 컴포넌트 내 함수 정의: 컴포넌트 내에서 사용되는 함수는 컴포넌트 내부에 정의합니다.
• function MyComponent() { const handleClick = () => { console.log('Clicked!'); }; return <button onClick={handleClick}>Click me</button>; }
• 고차 컴포넌트(HOC) 사용: 컴포넌트 로직을 재사용할 때는 고차 컴포넌트 패턴을 사용합니다.

---

GitHub branch 네이밍 규칙

 

• main: 프로덕션 준비가 완료된 코드. 최종 배포용 브랜치
• develop: 모든 새로운 기능과 수정을 병합하는 브랜치
• feature/기능명: 새로운 기능 개발, 버그 수정, 개선 등 모든 작업을 처리하는 브랜치

---

GitHub Issue 규칙 및 Templates

 

1. 이슈 제목 규칙

• 기능 추가 (Feature)
  • Feat: 사용자 로그인 기능 구현
  • Feat: 대시보드 화면 구현
• 기능 개선 (Enhancement)
  • Enhance: 페이지 로딩 속도 개선
  • Enhance: UI 디자인 업데이트
• 기능 수정 (Modification)
  • Modify: 회원 가입 양식 수정
  • Modify: 프로필 페이지 레이아웃 변경
• 버그 수정 (Bug Fix)
  • Fix: 프로필 이미지 업로드 버그 수정
• 새로운 기능 추가 (Addition)
  • Add: 비밀번호 재설정 기능 추가
• 설정 (Configuration)
  • Config: ESLint 설정 추가
• 코드 릭패토링 (Refactoring)
  • Refactor: API 호출 로직 개선
• 문서화 (Documentation)
  • Docs: 주요기능정의서 업데이트
• 배포 (Deployment)
  • Deploy: 신규 버전 배포
• 기타작업 (Task)
  • Task:

2. 템플릿

• 기능요청

## 어떤 기능인가요?

> 추가하려는 기능에 대해 간결하게 설명해주세요

## 작업 상세 내용

- [ ] TODO
- [ ] TODO
- [ ] TODO

## 참고할만한 자료(선택)

3. 이슈 할당

• 담당자 명확히 하기

4. 프로젝트 보드

• 작업 시각적으로 관리

5. 마일스톤 설정

❓

---

PR Template

 

• 제목은 '[#기능 번호] 변경 사항' 구조로 작성할 것
• Issue와 연동할 것

https://2jinishappy.tistory.com/337

## #️⃣연관된 이슈

> ex) #이슈번호, #이슈번호

## 📝작업 내용

> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

### 스크린샷 (선택)

## 💬리뷰 요구사항(선택)

> 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
>
> ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

- 제목 : feat(issue 번호): 기능명 ex) feat(17): pull request template 작성

## 🔘Part

- [x] FE

  <br/>

## 🔎 작업 내용

- 기능에서 어떤 부분이

- 구현되었는지 설명해주세요

  <br/>

## 이미지 첨부

<img src="파일주소" width="50%" height="50%"/>

<br/>

## 🔧 앞으로의 과제

- 내일 할 일을

- 적어주세요

  <br/>

## ➕ 이슈 링크

- [레포 이름 #이슈번호](이슈 주소)

<br/>

---

Prettier

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": true,
  "semi": false,
  "trailingComma": "es5",
  "arrowParens": "always",
}

ESLint

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
    'prettier',
  ],
  rules: {
    'prettier/prettier': 'error',
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'no-console': 'warn',
    'no-unused-vars': 'warn',
  },
};