[FE] 코드 컨벤션

프론트엔드의 기본적인 코드 컨벤션은 Airbnb, JavaScript Style Guide를 따른다.

상수

상수명은 SNAKE_CASE로 한다.

상수 객체의 경우, 객체 명은 SNAKE_CASE key값은 camelCase로 한다.

// bad
const ddangKongConstants = "상수"

// good
const DDANGKONG_CONSTANTS = "상수"

const DDANGKONG = {
	name: "마루"
	age: 25
}

컴포넌트

컴포넌트는 PascalCase로 한다.

// bad
const maruComponent = () => {
  // ...
}
class maru {
  // ...
}

// good
const MaruComponent = () => {
  // ...
}
class Maru {
  // ...
}

선언방식

화살표 함수를 이용한 표현식으로 작성한다.

const SundayComponent = () => {}

컴포넌트 Props (객체 vs 모든 속성 넘겨주기)

props가 3개 이하인 경우 모든 속성을 넘겨주고, 그 이상일 경우 객체로 넘겨준다.

<Component id={product.id} name={product.name} src={product.imageSrc} />

<Component product={product} />

함수

• 함수 이름은 동사 로 시작해야한다.

// bad
const validationName = () => {};

// good
const validateName = () => {};

• 라우터 (페이지 이동)는 to, with, from 과 같은 단어를 사용해서 네이밍한다.

// bad
const routeHome = () => {};

// good
const goToHome = () => {};

• event Handler에서 props는 handle-*, 메소드는 on-* 으로 네이밍한다.

// bad
<Component onClick={onClick} />

// good
<Component onClick={handleClick} />

• event 객체에서 가져올 수 있는 값으로 함수를 실행시키는 경우, 인라인 함수를 사용하지 않는다.

// bad
<Component onClick={(e) => {}} />

// good
<Component onClick={handleClickMap} />

타입 선언 (type vs interface)

• type : 단일 또는 유니온 타입
• interface : 객체 타입
• Props의 타입 or interface는 컴포넌트명 + Props로 해당 컴포넌트 최상단에 정의한다.

// BAD
interface Props {...}

// GOOD
interface MayBeFineProps {...}

• hook인 경우는 use-*-Props, 커스텀 훅의 파라미터 타입을 지정할 때 props 접미사를 붙인다.

interface UseLocalStorageProps {}

const useLocalStorage = () => {}

• 제너릭은 T, V 와 같이 하나의 글자로만 사용한다.

const exam = <T>() => { return data: T }

export 방식

default export vs named export

한 파일에서 1개만 내보내는 경우 default export, 그 이상 내보내는 경우 named export를 사용한다.

컴포넌트 : default export

함수 : named export

css

css prop 접미사

css prop 접미사	의미
Layout	최상위 레이아웃을 설정할 때 사용한다.
Container	여러 개의 요소를 묶을 때 사용한다.
Wrapper	하나의 요소를 묶을 때 사용한다.
List	ul태그를 사용할 때 권장한다.
Item	li태그, 반복되는 요소를 사용할 때 권장한다.

css 선언 순서 정렬

• CSS 선언순서 및 규칙
• CSS 선언 순서 lint 설정

css 크기 단위

모든 속성의 크기는 rem 단위로 작성한다.

디렉토리 구조

common은 컴포넌트 자체로 존재할 수 있는 공통 컴포넌트, layout은 페이지 레이아웃을 구성하는 구조적인 공통 컴포넌트를 담는 디렉토리이다.

📦src
┣ 📂assets
┃ ┣ 📂 images
┣ 📂apis
┣ 📂components
┃ ┣ 📂common
┃ ┃ ┣ 📂Button
┃ ┃ ┃ ┣ 📜Button.tsx
┃ ┃ ┃ ┣ 📜Button.styled.ts
┃ ┃ ┃ ┗ 📜Button.stories.tsx
┃ ┣ 📂layout
┃ ┃ ┣ 📂Header
┃ ┣ 📂product
┃ ┃ ┣ 📂ProductItem
┣ 📂constants
┣ 📂mocks
┃ ┣ 📂handlers
┃ ┣ 📂data
┃ ┣ 📜browser.ts
┣ 📂hooks
┃ ┣ 📂common
┃ ┃ ┣ 📜useModal.ts
┃ ┣ 📜useProduct.ts
┣ 📂pages
┃ ┣ 📜ProductListPage.ts
┣ 📂styles
┣ 📂types
┣ 📂utils
┣ 📂router
┃ ┣ 📜index.tsx
┣ 📜App.tsx
┣ 📜index.tsx