📌Conventions

01 코드 컨벤션

• 함수 내보내기(Exporting Functions)

  // 컴포넌트
  export const Component = () => {};
  // 단일 함수
  export default function () {}
  // 여러 개의 함수나 변수, 상수를 내보내는 경우
  export const functionName = () => {};
  export const variable = 1;

• 상수 변수 선언

  • 상수 변수는 대문자 스네이크 케이스로 선언 (예: GENRES, MAX_HEIGHT)

• 컴포넌트 네이밍

  • 컴포넌트는 파스칼 케이스 사용 (예: HelloWorld)

• 프로퍼티 네이밍

  • 프로퍼티는 카멜 케이스 사용

  type User = {
    userName: string
    userAge: number
  }

• 배열 네이밍

  1. 배열은 복수형으로 dataList 사용
  2. 어떤 배열인지 구체적으로 네이밍 하기 ex) performList, menuList

• 이벤트 핸들러 네이밍
  이벤트 핸들러는 onClick, onChange와 같이 네이밍

• 불리언 변수 네이밍
  불리언 변수는 isLoading과 같이 is 접두사로 사용

• 함수 선언 방식
  일반 함수는 함수 표현식 const a = function() {} 사용
  이벤트 핸들러는 화살표 함수 const a = () => {} 사용

• 태그 네이밍
  태그는 <UserComponent>hello</UserComponent>와 같이 파스칼 케이스 사용

• 파일 네이밍
  .ts는 일반 TypeScript 파일, .tsx는 JSX 문법이 포함된 파일에 사용
  리액트 문법이 들어가는 파일, 컴포넌트, 훅은 .tsx 확장자 사용
  커스텀 훅은 use 접두사 사용하여 useHello.tsx와 같이 네이밍

• 폴더 네이밍
  폴더는 기본적으로 카멜 케이스 사용하며, 컴포넌트 폴더일 경우에만 파스칼 케이스 사용

• styled-components CSS import 컨벤션
  스타일드 컴포넌트 사용할 때, 스타일 별도의 파일로 분리하고 객체로 가져오는 방식 사용 예 들어, 스타일 파일 styles.js로 만들고 다음과 같이 가져온다:

  import * as S from './styles';

• props 컨벤션

  구조 분해 할당 사용

  export const Poster = ({ src, width = 235, height = 330 }: PosterProps) => {...}

• styled-components props 타입 정의 컨벤션

  export const Poster = styled.img<{ width: number, height: number}>``

• styled-components props 받아올 때 컨벤션

font-size: ${({ isSearch }) => (isSearch ? '15px' : '25px')};
color: ${({ theme, isRangking }) => (isRangking ? theme.colors.primary : theme.colors.black)};

• 배열 타입 대괄호로 표기하기 ex) string[]

02 커밋 컨벤션

• Feat: 새로운 기능 추가
• Fix: 버그 수정
• Docs: 문서 수정
• Refactor: 코드 리펙토링
• Chore: 빌드 업무 수정, 패키지 매니저 수정

03 브랜치 네이밍 컨벤션

[이슈 번호]-feature/기능   ex) 3-feature/some-feature
[이슈 번호]-bug/기능   ex) 15-bug/some-error