🎨 코드 컨벤션

코드 컨벤션은 기본적으로 Airbnb JavaScript 스타일 가이드를 따른다.

• Airbnb JavaScript Style Guide
• Airbnb Javascript Style Guide 한국어 버전

리액트

함수 선언

• 컴포넌트를 포함한 모든 함수는 화살표 함수 로 선언한다.

타입

• 타입은 interface 로 작성한다.
• Union type 의 각 항목은 UPPER_CASE로 작성한다.
  • 단, CSS와 관련된 Union type 은 camelCase 로 작성한다.
• 유니온 타입의 경우에는 type 으로 작성한다.
• 매개변수 타입의 경우에는 -Props 로 끝나도록 네이밍한다.
• API 관련 타입의 경우에는 상황에 따라 -Request / -Response 로 끝나도록 네이밍한다.

폴더 구조

• 처음 컴포넌트를 만들 때는 Excalidraw 툴로 컴포넌트 구조를 확정하고 시작한다.
• 폴더 이름은 복수 로 작성한다.
• 폴더 구조는 기본적으로 페이지 폴더 구조를 따른다.
  • Main 페이지 안에 종속된 컴포넌트 → components/Main
  • Main 페이지 안에 종속된 커스텀 → hooks/Main
• 로직 파일과 스타일 파일은 구분해서 작성한다.

상수화

• HTML 태그에 들어가는 문자열의 경우 공통적으로 자주 쓰이는 것들을 제외하면 상수화하지 않는다.
  • ex) 버튼 라벨 (확인, 이전 등)
• 파일 내에서만 사용되고, 상수의 개수가 5개 미만이면 파일의 제일 상단에 선언하고 따로 분리하지 않는다.

네이밍

• 모든 네이밍은 축약하지 않는다.
• 복수형의 경우 기본적으로 -s 를 사용하나, 단어가 s 로 끝나거나, 복수형이 없는 경우에는 -List 를 붙인다.

변수명, 함수명

• camelCase

상수

• UPPER_CASE
• 객체인 상수여도 모든 요소를 UPPER_CASE 로 작성한다.

컴포넌트, 객체, 클래스

• PascalCase

api

Method	Prefix
GET	fetch-
POST	add-
PUT	update-
DELETE	delete-

스타일

파일 네이밍

import * as S from './example.styles';

<S.Layout></S.Layout>

컴포넌트 네이밍

Layout	최상위 레이아웃
Container	여러개의 요소를 묶는 경우
Wrapper	하나의 요소를 묶는 경우
Box	div 태그를 사용하는 경우
List	ul 태그를 사용하는 경우
Item	li 태그, 반복되는 요소를 사용하는 경우

Prop 네이밍

• 스타일링을 위한 prop 은 $- prefix를 붙여서 사용한다.

export const Layout = styled.div<{ $direction: Direction }>`
  display: flex;
  justify-content: ${({ $direction }) => directionMapper[$direction]};
  gap: 1.6rem;
`;

CSS Prop

• camelCase 로 작성한다.

export const buttonStyle = css`
  width: 9rem;
  height: 2.5rem;
  font-size: ${({ theme }) => theme.fontSize.sm};
`;

<Button css={S.buttonStyle} color="secondary" rounded={true}>
 링크 추가하기
</Button>

테스트

• 초기값 테스트를 반드시 포함한다.
• 테스트 명세서는 한국어로 작성하고, -해야 한다 로 마무리한다.
• describe - it 를 사용한다.