Frontend Code Convention

CSS

• 크기 단위
  • px
    • border-radius
    • box shadow
  • rem
    • width
    • height
    • margin
    • padding
    • gap
    • grid-gap
    • font-size

Color 관리

• —[color name]-[color layer] 형식

  • color layer는 색상의 차이를 구분하기 위해 표시되며, 001부터 1씩 올라가는 단계별 지정이다.

    --gray-001 : #ddd;

활성화 상태 네이밍

• active : 유저의 동작이 개입되지 않을 때
• selected : 유저의 동작(선택)이 개입될 때

Typing

• 상수는 const assertion을 사용한다.
• interface가 아닌 type alias만을 사용한다.
  • 타입스크립트 버전업에 따라서 기존에 있었던 type alias 문제점이 개선되었기에 type alias로 interface 역할까지 가능하다.
  • type alias가 interface에 비해 상대적으로 지원하는 타입의 형식이 많다.
  • 선언 병합에서 차이가 존재하지만, 현 프로젝트에서는 선언 병합을 활용하지 않는다.

Type Declaration

• 컴포넌트의 props에 대한 타입 선언

  type ComponentProps = {
    ...
  };
  
  const Component = ({ a, b }: ComponentProps) => {
    ...
  };

• 일반 함수

  const sum = (a: number, b: number) => { ... }

Type Management

• 선언 위치
  • 공용적으로 사용되는 타입의 경우, types 폴더 하위에 선언한다.
  • 그 외, 타입은 파일 상단에 선언한다.
  • 분리의 필요성이 있을 때(ex. 타입이 너무 많은 경우 ) [filename].types.ts 파일로 가장 가까운 경로에 선언한다.

PropTypes

• API를 다루는 파일에서는 PropTypes를 유지한다.
  • 런타임에 다루게 되는 데이터는 불확실하다.
• 그 외, PropTypes는 제거한다.
  • 타입스크립트를 이용하여 컴파일 타임에 대부분의 타입 에러를 확인할 수 있다. 타입스크립트와 중복되는 역할이며, 타입 관리를 두 곳에서 하게 되면 유지보수가 힘들어 진다.