코딩 컨벤션

🌟 코드 컨벤션

• 기본적인 스타일은 airbnb의 코드 컨벤션을 따른다.

• Prettier + ESLint + Stylelint로 관리한다.

• 줄임말은 쓰지 않는다. (btn → button / idx → index)

• type 선언은 interface로 통일한다.

• 함수명 : camelCase

  • ex) appendNewList

• 클래스명 : PascalCase

  • ex) HelloWorld

• 파일명

  • 클래스 정의가 들어있는 파일 : PascalCase
  • 함수가 들어있는 모듈 파일 : camelCase

• import/export

  • ES6 형식으로 작성한다. (require이 아닌 import)
  • 각 모듈(폴더)별로 index.js 만들어서 한번에 export/import한다.
  • export는 객체에서 직접 한다.

• 이벤트 핸들러 네이밍

  • 핸들러를 전달하는 프로퍼티의 이름에는 접두사 on을 붙인다.
  • 핸들러 함수에는 접두사 handle을 붙인다.
  • 네이밍은 자세하게 한다.
    • Bad case : handleClick
    • Good case : handleUserLogin

🌟 커밋 컨벤션

• gitmoji 익스텐션을 사용한다. (https://gitmoji.dev/)

• git hooks로 관리한다.

• 커밋 단위는 가능한 작게 한다.

• commit 형식

  • 첫 줄 (헤더) 은 영어로 작성하며, 대문자로 시작한다.
  • 두 번째 줄은 띄운다.
  • 세 번째 줄 (바디) 부터는 커밋 상세 내용을 한국어로 기록한다.

  ✨ Add Button component color prop
    
  - 어쩌구 저쩌구
  - 어쩌구 저쩌구
  

commit-msg

#!/bin/sh

regex="^[🎉🔖✨🐛🔒📇♻️📚🌐♿🐎🎨🔧🚨💩🗑️🚧] [A-Z][\x21-\x7E]*\n(\n- .+)+"

check_message_format() {
	message_file="$1"
	message=$(cat "$message_file")
	if ! echo "$message" | grep -qE "$regex"; then
		echo "\033[0;31m⚠️ Your message is not formatted correctly!!\033[0m"
		echo ""
		echo "\033[0;33m--- Commit Foramt ---"
		echo ""
		echo "<gitmoji> eng Title"
		echo ""
		echo "- kor detail"
		echo ""
		echo "\033[0;32m--- gitmoji info ---"
		echo ""
		echo "🎉	Initial Commit
🔖	Version Tag
✨	New Feature
🐛	Bugfix
🔒	Security Fix
📇	Metadata
♻️	Refactoring
📚	Documentation
🌐	Internationalization
♿	Accessibility
🐎	Performance
🎨	Cosmetic
🔧	Tooling
🚨	Tests
💩	Deprecation
🗑️	Removal
🚧	Work In Progress (WIP)\033[0m"
		exit 1
	fi
}

check_message_format "$1"

적용 방법

touch .git/hooks/commit-msg
chmod +x .git/hooks/commit-msg

vi .git/hooks/commit-msg

🌟 PR 컨벤션

PR default title

[FE/BE] 해결한 Task 내용

Example

[FE] 은하 공유 링크 생성 버튼 구현

Template content

### 📎 이슈번호

### 📃 변경사항

### 🫨 고민한 부분

### 📌 중점적으로 볼 부분

### 🎇 동작 화면

### 💫 기타사항

🌟 이슈 컨벤션

기능 템플릿

기능 개발 필요 시

Issue default title

[FEAT] ~

Template content

## ✨ 기능 설명

## ✨ 개발 목록

- [ ]

## ✨ 스크린샷

## ✨ 기타 설명 / 질문

Labels

• ✨ Feature
• FE 또는 BE

버그 템플릿

버그 발생 시

Issue default title

[BUG] ~

Template content

## 🐛 버그 설명

### 🐛 기대한 동작

- 

### 🐛 실제 동작

- 

## 🐛 스크린샷

## 🐛 기타 설명 / 질문

Labels

• 🐛 BugFix
• FE 또는 BE

개선 템플릿

개선 소요 발생 시

Issue default title

[ENHAN] ~

Template content

## ⚡️ 개선 소요 설명

## ⚡️ 개선 목록

- [ ] 

## ⚡️ 스크린샷

## ⚡️ 기타 설명 / 질문

Labels

• ⚡️ Enhancement
• FE 또는 BE

리팩토링 템플릿

리팩토링 소요 발생 시

Issue default title

[REFACT] ~

Template content

## ♻️ 리팩토링 소요 설명

## ♻️ 리팩토링 목록

- [ ] 

## ♻️ 스크린샷

## ♻️ 기타 설명 / 질문

Labels

• ♻️ Refactor
• FE 또는 BE