컨벤션

커밋 컨벤션

커밋 메시지 구조

<타입 소문자>[적용 범위(선택 사항)]: <설명>

[본문(선택 사항)]
- 1번 내용
- 2번 내용
  2번 내용
  2번 내용(앞에 공백 2칸)
- 3번 내용
  3번 내용

[꼬리말(선택 사항)]

커밋 타입

타입	설명	예시
`feat`	새로운 기능 추가
`fix`	버그 수정
`refactor`	새로운 기능 추가와 관련 없는 코드 개선 작업	파일 삭제 및 이동, 모듈 분리
`chore`	기타
`design`	css 관련 코드 작업
`test`	테스트 코드 작성
`docs`	문서 작성
`pref`	성능을 개선하는 코드 변경	쿼리 최적화, 렌더링 최적화 등
`config`	의존성 관리, 빌드, 배포 등 개발 환경에 관련된 작업	config, yaml, yml 설정 등

타입이 헷갈리면 슬랙으로 다같이 얘기해봐요~☺️

FE 코드 컨벤션

컴포넌트 폴더, 파일명은 파스칼 케이스로 작성한다.
나머지 폴더명은 카멜 케이스로 작성한다.
컴포넌트 props 타입 선언 시 <컴포넌트명>Props 와 같은 형태로 파스칼 케이스를 지켜서 작성한다.
- export interface ButtonProps {}
도메인 관련 타입 선언 시 <도메인> 과 같은 형태로 파스칼 케이스를 작성한다.
- export interface Bookmark {}

스타일 관련 코드는 .css.ts 파일에서 전체 import를 하고 styles prefix를 붙여서 사용한다.

스타일 관련 타입은 해당 스타일을 사용하는 tsx 파일에서 <*>Type으로 선언한다.

import * as styles from "./Badge.css";

export type BadgeVariantType = keyof typeof styles.badgeVariants;

export interface BadgeProps {
  variant: BadgeVariantType;
  label: ReactNode;
}

Early Return 패턴을 사용한다.
이벤트 핸들러 props에는 on 접두사를 붙이고, 값으로 넘길 때에는 handle 접두사를 붙인다.

function Form({ onSubmit }) {
  const handleSubmit = () => onSubmit();
  return (<form>
    <button type="submit" onClick={handleSubmit}></button>
  </form>);
}