Git 컨벤션

Git Flow 전략

• 사용 브랜치 : main develop feature hotfix release
• 개발 : feature → develop
• 급한 수정 : main → hotfix
• 배포 : develop → release → main
 

• feature 브랜치 명 규칙 (기능 설명은 케밥, 기능 단위로 브랜치를 만들자 )
• feature/기능설명(티켓번호)
• ex) feature/sign-up(MAT-0)

commit message 전략

• 커밋 메시지 유형
• feat : 유저 입장에서의 새로운 기능을 추가하는 커밋( build script X)
• fix : 유저 입장에서 발생한 에러를 수정하는 커밋
• chore : 패키지 매니저, 빌드 관련 파일 수정 등 파일 변경등 production과 관련없는 커밋
• docs : 문서 수정에 대한 커밋
• style : 코드 스타일 혹은 포맷 (공백, 줄바꿈) 등에 관한 커밋 ( SCSS & 코드 변경 X )
• refactor : 코드 리팩토링(코드 변경 사항)에 대한 커밋 → (변수 명 변경 등)
 
 

• 커밋메시지 템플릿

ex)
feat: 유저 회원가입 기능 구현(MAT-0)

- 자세한 설명1
- 자세한 설명2

PR 컨벤션

• title : feat: commitMessage(MAT-0)

• description :

## 개요
내용을 적어주세요.

## 작업사항
- 내용을 적어주세요.

## 변경로직
- 내용을 적어주세요.

• Review : PR approve 두 명 이상 했을 때 merge

• ASI를 이용하지 않고 세미콜론을 필수적으로 써준다. (prettier로 관리).

• var를 쓰지 않고, const와 let을 사용한다.
• 단, const를 주로 쓰되 변수의 값 변경이 필요할 경우 let을 쓴다.)

• 함수는 const 형태로 선언적으로 사용한다.
• const function = () ⇒ {}

• image, svg는 kebab-case 사용하여 네이밍한다.(ex. erase-check.svg).

• 변수명은 camelCase 로 작성한다. (issueLabel).

• .tsx 파일의 파일(폴더)명은 PascalCase를 사용한다. ex) LoginPage.tsx.

• webpack alias를 이용해서 파일 절대 경로로 import, export 사용한다. src: @
• 단, 같은 폴더 내에 존재한다면 상대경로 를 사용한다

• components, container, pages를 export할때는 하나의 파일에 모아서 export한다.

• 만약 주석이 필요한 경우신경써서 사용하자.
• // TODO: 해야 할 일 혹은 한 일을 날짜와 함께 적어준다(2021.03.28)

• style은 module.scss를 사용한다. hash를 이용하여 관리한다.

• SCSS 사이즈의 단위는 rem `으로 통일한다.

• 변수명이 길어도 좋으니 한눈에 봐도 알아볼 수 있는 최대한 명시적인 변수명을 정해준다.

• z-index는 5단위로 사용해준다.

• className에 값을 할당해줄때는 무조건 classNames함수를 사용해준다.
• 스타일을 조건에 따라, 적용 시킬 수 있다.

• Fragment는 <>/</>가 아닌 <Fragment></Fragment>로 사용해준다.

• 함수 컴포넌트의 return값은 무조건 추론이 가능하니 생략해준다.

// Bad case
const ExerciseChoice = ({}: Props): ReactElement => {
  return <div />;
}

// Good case
const ExerciseChoice = ({}: Props) => {
  return <div />;
}

• 이벤트 핸들러를 정의할때 handle + 메서드명로 정의한다.

const handleChangeModalOpen = ({ handleClick }: Props) => {
  return <button onClick={handleClick} />
}

const Calendar = ({}: Props) => {
  const handleClickDateType = () => {};
  const handleModalOpen = () => {};

  return (
    <>
      <DateTypeToggleButton/>
      <ModalButton handleClick={handleChangeModalButton} />
    </>
  );
};

• 조건문의 경우 반드시 중괄호를 작성한다.

if (true) {
	return true;
}

if (true) return true

 

1. 개발 진행 중 : 실제 개발 진행 중이여서, 코드 리뷰를 요청 하지 않은 상태

2. 리뷰 요청: 개발이 완료되어, 코드 리뷰를 기다리는 상태

3. 리뷰 반영 중 : 코드 리뷰를 2명 이상에게 받고, 반영 중

4. 리뷰 반영 중 + 리뷰 요창 : 코드 리뷰를 1명에게 받고 수정 중이며, 추가적인 코드 리뷰가 필요함.

5. 리뷰 반영 완료 : 리뷰 반영이 완료되었음을 의미 -> 이 때 리뷰어는 자신이 코멘트 달았던 내용이 반영됬는지 확인하고 resolve를 누른다.

6. 리뷰 반영 완료 + (이름) : 리뷰 반영이 된 다음, 확인 했을 때 추가적인 수정이 필요하다는 의견.