프론트엔드 컨벤션

1. 코드 컨벤션

바톤 팀 프론트엔드의 기본적인 코드 컨벤션은 Airbnb, JavaScript Style Guide를 따르고 있습니다.

1-1. 네이밍

상수

상수명은 UPPER_CASE로 한다.

// bad
const myConstants = "상수"

// good
const MY_CONSTANTS = "상수"

const USER = {
	NAME = "에이든"
	AGE = 29
}

// 상수 객체의 경우, 객체 명과 key값을 UPPER_CASE로 한다.

컴포넌트, 클래스

컴포넌트, 클래스는 PascalCase로 한다.

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

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

컴포넌트 이름에 따른 네이밍 컨벤션

컴포넌트 네이밍	의미
container	여러개의 요소를 묶을 때 사용한다.
list	n개 이상의 item을 가지고 있는 ul 컴포넌트
item	List 컴포넌트 안에 있는 1개의 li 컴포넌트

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

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

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

축약

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

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

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

api

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

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

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

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

단, 다양한 api method를 추상화 해야 하는 경우에는 fetch를 어두에 작성한다. api method에 대한 구분은 인자로 한다.

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

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

이벤트 핸들러 네이밍

handle은 이벤트 핸들러 네이밍에만 사용한다.
handle + 동작(동사)으로 표기한다.
뒤에 오는 동작은 이벤트가 어떤 행위를 하는지 명시적으로 표기하기 위함이다.

1-2. CSS

attribute 순서

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

순서	성격	대표 attribute
1	레이아웃	position, top, bottom, left, right, z-index, float, display, flex, flex-direction, grid, visibility
2	BOX	width, height, margin, padding, border, outline, box-sizing
3	배경	background, box-shadow
4	폰트	font, color, text, line-height, letter-spacing, white-space, break-word
5	변형	transform, transition, animate
6	기타	overflow, opacity, cursor

1-3. 상수

상수 범위

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

api url
route path name
매직 넘버
서비스 메세지(errorMessage, successMessage)

1-4. 타입

type

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

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

interface

type의 두 가지 경우가 아니라면 interface를 사용한다.

1-5. 리액트

확장자

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

컴포넌트의 선언

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

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

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

함수의 선언

함수는 화살표 함수로 선언한다.

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

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

중괄호 {} 생략

// 화살표 함수에서 바로 리턴하는 경우를 제외하고는 중괄호를 생략하지 않는다

// Bad
if (!response.ok) throw new Error('error');

// Good
if (!response.ok) {
	throw new Error('error');
}

컴포넌트의 props

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

interface Props {
  // ...
}

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

컴포넌트의 export default

컴포넌트(혹은 custom hook)를 내보낼 때에 export default를 사용한다.
export는 사용하지 않는다. 사용이 된다면 파일 분리를 고려한다.

컴포넌트 작성 순서

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

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

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

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

// 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`
  // ...
`

객체로 묶을 경우 객체 이름을 S를 사용한다.

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.[type]

React에서 제공하는 타입, 함수인 경우 구조분해할당으로 가져오지 않고 React.[type]을 명시한다.

// allowed but does not use
import { MouseEventHandler } from 'react';

// good
import React from 'react';

someFunction: React.MouseEventHandler<HTMLButtonElement>;

2. 폴더 구조

📦src
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂Button
 ┃ ┃ ┃ ┣ 📜Button.tsx
 ┃ ┣ 📂RunnerPost
 ┃ ┃ ┣ 📂RunnerPostItem
 ┃ ┃ ┃ ┣ 📜RunnerPostItem.tsx
 ┃ ┃ ┣ 📂RunnerPostList
 ┃ ┃ ┃ ┣ 📜RunnerPostList.tsx
 ┣ 📂layout
 ┃ ┣ 📜Header.tsx
 ┣ 📂constants
 ┣ 📂hooks
 ┃ ┣ 📜useModal.ts
 ┣ 📂pages
 ┃ ┣ 📜MainPage.tsx
 ┣ 📂styles
 ┣ 📂types
 ┣ 📂utils
 ┣ 📜App.tsx
 ┣ 📜index.tsx
 ┣ 📜router.tsx

3. 사용 라이브러리

react
react-router-dom
typescript
styled-components
webpack
esLint
prettier

4. 테스트 도구

msw
storybook
cypress

5. 브라우저 지원 범위

데스크탑 (크롬, 엣지)

모바일 (크롬, 사파리, 삼성 인터넷)