[FE] 코드 컨벤션

📝 코드 컨벤션

집사의 고민 프론트엔드팀의 기본적인 코드 컨벤션은 TOAST UI 코드 컨벤션과 Airbnb JavaScript Style Guide를 따르고 있습니다.

1. 네이밍

변수명, 함수명

변수명, 함수명은 camelCase로 한다.

// bad
const this_is_my_object = {}
const this_is_my_function = () => {}

// good
const thisIsMyObject = {}
const thisIsMyFunction = () => {
  // ...
}

변수명, 함수명

변수명, 함수명은 동사를 어두에 쓴다. (이후 영어 문법 따르기)

const isModalOpen = true;
const getValue = () => {}

상수

상수명은 UPPER_CASE로 한다.

// bad
const myConstants = "상수"

// good
const MY_CONSTANTS = "상수"

컴포넌트, 클래스, 타입

컴포넌트, 클래스, 타입은 PascalCase로 한다.

// bad
const myReactComponent = () => {
  // ...
}
class person() {
  // ...
}

// good
const MyReactComponent = () => {
  // ...
}
class Person() {
  // ...
}

축약

축약하여 네이밍을 하지 않는다.

// bad
const myBtn = document.querySelector('.my-button')
const myFn = () => {
  // ...
}

// good
const myButton = document.querySelector('.my-button')
const myFunction = () => {
  // ...
}

html 태그에 따른 스타일 컴포넌트 네이밍

모든 스타일 컴포넌트의 이름에는 기능을 암시하는 단어를 사용한다.

스타일 컴포넌트 네이밍	의미
Layout	최상위 레이아웃을 설정할 때 사용한다.
Container	여러개의 요소를 묶을 때 사용한다.
Wrapper	하나의 요소를 묶을 때 사용한다.
Box	div태그를 사용할 때 권장한다.
List	ul태그를 사용할 때 권장한다.
Item	li태그, 반복되는 요소를 사용할 때 권장한다.

api

api 함수를 만들때 api method를 어두에 작성한다. api method가 아닌 단어는 어두에 작성하지 않는다.

// bad
const userGet = () => {
  // ...
}

const searchUser = () => {
  // ...
}

// good
const getUser = () => {
  // ...
}

2. CSS

attribute 순서

유사한 성격의 attribute을 묶어 작성한다. 다른 성격의 attribute와는 개행으로 구분한다.

* 속성 선언 순서 기준: 1. 레이아웃, 2: BOX, 3: 배경, 4: 폰트, 5: 기타

순서	의미	대표 속성
1	레이아웃	display, visibility, overflow, float, position, top, bottom, left, right, z-index, flex, flex-direction, grid,
2	BOX	width, height, margin, padding, border, outline, box-sizing, box-shadow
3	배경	background
4	폰트	font, color, text, line-height, letter-spacing, white-space, break-word
5	기타	opacity, cursor 등 위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함

3. 상수

상수 범위

다음과 같은 종류 변수는 상수로 한다.

• api url
• route path name
• 매직 넘버
• 서비스 메세지(errorMessage, successMessage)
• 스타일(theme)
• query key

4. 타입

type

type은 다음의 상황에서 사용된다.

1. 개별 또는 내부적으로 선언되는 타입
2. 타입 내부의 변경보다는 다른 타입끼리의 조합등에 사용될 경우

interface

interface는 다음의 상황에서 사용된다.

1. 확장 가능성이 높은 타입
2. api의 input, output 값처럼 외부로 연결 또는 확장되는 경우

type vs interface

단일 타입, 다른 타입끼리의 조합을 제외하고는 interface를 사용한다.

5. 리액트

확장자

jsx 문법을 다루는 경우 tsx, 그렇지 않는 경우 ts로 작성한다.

컴포넌트의 선언

컴포넌트는 화살표 함수로 선언한다

// allowed but does not use
function MyComponent() {
  // ...
}

// good
const MyComponent = () => {
  // ...
}

컴포넌트의 props

• props의 개수 상관없이 하나라도 있으면 타입을 만들어 명시한다.
• 컴포넌트 props의 타입명은 [컴포넌트명]Props로 한다.
• props는 첫 번째줄에서 구조분해할당으로 가져온다.

interface MyComponentProps = {
  // ...
}

const MyComponent = (props: MyComponent) => {
	const {a, b} = props;
  // ...
}

컴포넌트 작성 순서

import, type, react component, export default, styled components순으로 작성한다.

styled component에 props가 있다면 export default구문 이후에 작성한다.

스타일드 컴포넌트

// 1. import
import Header from '@Components/Header/Header'

// 2. type
interface MyComponentProps = {
  // ...
}

// 3. react component
const MyComponent = ({ a, b }: Props) => {
  // ...
}

// 4. export default
export default MyComponent 

// 5. type(styled component)
interface BoxProps = {}

interface NameProps = {}

// 6. styled component
const Box = styled.div`
  // ...
`

const Name = styled.div`
  // ...
`

const S = {
	Box: styled.div``,
	Name: styled.div``,
}

export rule

• 컴포넌트를 내보낼 때에 export default를 사용한다.
• 그 외에는 named export 를 사용한다.

path alias

절대 경로를 사용하여 다양한 모듈을 순서대로 불러온다.

순서	경로	위치
1	@components	./components/*
2	@types	./types/*
3	@hooks	./hooks/*
4	@pages	./pages/*
5	@styles	./styles/*
6	@constants	./constants/*
7	@contexts	./contexts/*
8	@asset	./assets/*
9	@utils	./utils/*

react event handler

// bad
const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
  //
};

// good
const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
  //
};

React.[type]

React에서 제공하는 타입, 함수인 경우 구조분해할당으로 가져온다.

// bad
import React from 'react';

// good
import { MouseEventHandler } from 'react';