팀 컨벤션 - boostcampwm-2022/web30-TODY GitHub Wiki

커밋 메시지 컨벤션

1. 커밋 유형 지정

  • 커밋 유형은 영어 소문자로 작성하기
커밋 유형 의미
feat 새로운 기능 추가
fix 버그 수정
docs 문서 수정
style CSS 등 사용자 UI 디자인 변경
refactor 코드 리팩토링
test 테스트 코드, 리팩토링 테스트 코드 추가
chore 코드/주석 삭제, 파일 이동, 패키지 매니저 수정, 그 외 기타 수정
build 배포 관련 작업
conf 개발 환경 설정

2. 제목과 본문을 빈행으로 분리

  • 커밋 유형 이후 제목과 본문은 한글로 작성하여 내용이 잘 전달될 수 있도록 할 것

3. 한 커밋에는 한 가지 문제만!

  • 추적 가능하게 유지해주기
  • 너무 많은 문제를 한 커밋에 담으면 추적하기 어렵다.

4. 예시: feat: 제목

코드 컨벤션

🐪 함수명, 변수명은 카멜케이스로 작성합니다.

🐍 상수나 ENUM은 대문자 스네이크 표기법으로 작성합니다.

🔠 Class 이름이나 생성자 함수명은 대문자로 시작합니다.

✏️ boolean 변수명은 is로 시작합니다.

✏️ 배열 변수명은 복수형으로 작성합니다.

eslint

  • FE에 airbnb style 적용

prettier

  • config

    {
	"singleQuote": true,
	"semi": true,
	"tabWidth": 2,
	"printWidth": 80,
	"arrowParens": "always",
	"trailingComma": "all",
	"bracketSpacking": true,
	"bracketSameLine": true,
	"endOfLine": "lf",
	"quoteProps": "consistent",
}

😺 코드 컨벤션이 필요한 이유

  • 팀원끼리 코드를 공유하기 때문에 일관성있는 코드를 작성하면 서로 이해하기 쉽다.
  • 나중에 입사 지원 시 프로젝트를 하며 코드 컨벤션을 만들어 진행했다고 하면 협업 면에서 유리하게 작용할 수 있다.

깃 브랜치 전략

Untitled

  • main, develop, feature, hotfix (release 브랜치는 제외한다)
  • 브랜치명
    • [브랜치유형]/[기능/부가설명] - feat/login

이슈 양식

📌 이슈는 task 단위로 작성하자.

  • 제목
    • 유형은 적지 않는다.
  • 본문
# 개요
(문장)

# 관련 브랜치
ex. (new)신규브랜치명, 기존브랜치명

# 할 일 (optional)
- [ ]

Pull Request 양식

  • 본문
# 관련 이슈 번호

# 진행 사항 (optional)

# 문제 및 해결 (optional)

리액트 컴포넌트 네이밍 컨벤션

  • react component
    • page
      • [페이지이름]Page
      • ex. LoginPage
    • component
      • [컴포넌트이름][컴포넌트유형]
      • ex. MapContainer, MapHeader
      • 최상단 태그 ul → [컴포넌트이름]List
      • 최상단 태그 li → [컴포넌트이름]Item
  • styled-component
    • 아톰 컴포넌트일 때
      • 최상단 : Styled[컴포넌트이름]
        • <StyledButton />
    • 레이아웃이 있는 컴포넌트일 때
      • 최상단 : [컴포넌트이름]Layout
        • <MapContainerLayout />
      • 최상단 자식 (가로정렬 시) : [컴포넌트이름]Row
        • <MapContainerRow />
      • 최상단 자식 (세로정렬 시) : [컴포넌트이름]Col
        • <MapContainerCol />
      • 그 외
        • div태그: '컴포넌트명'Box
        • section태그: 컴포넌트명'Section
        • ul태그: 컴포넌트명'List
        • li태그: 컴포넌트명'Item
  • styled-component 선언 위치
    • 각 컴포넌트(tsx) 파일 내부
import styled from 'styled-components'

const SampleContainer = styled.div``

function Sample() {
	return <SampleContainer></SampleContainer>
}