프론트엔드 개발 문서

목차

• 코드 컨벤션
  • 네이밍
    • 변수명, 함수명
    • 상수
    • 컴포넌트, 객체, 클래스
    • 축약어
    • html 태그에 따른 스타일 컴포넌트 네이밍
    • api
  • CSS
    • attribute 순서
  • 상수
    • 상수 범위
  • 타입
    • type
    • interface
  • 리액트
    • 확장자
    • 컴포넌트의 선언
    • 컴포넌트의 props
    • 컴포넌트의 export default
    • 컴포넌트 작성 순서
    • path alias
    • react event handler
    • React.[type]
• 폴더 구조
• 사용 라이브러리
• 테스트
• 브라우저 지원 범위

1️⃣ 코드 컨벤션

코드 컨벤션은 기본적으로 (TOAST UI 코드 컨벤션)[https://ui.toast.com/fe-guide/ko_CODING-CONVENTION]와 (Airbnb JavaScript Style Guide)[https://github.com/airbnb/javascript]을 따르며 다음은 하루스터디 프론트팀에서 보다 초점을 둔 코드 컨벤션입니다.

1-1. 네이밍

변수명, 함수명

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

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

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

상수

상수명은 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 = () => {
  // ...
}

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

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

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

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)
• 스타일(color)

1-4. 타입

type

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

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

interface

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

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

type vs interface

타입의 보강, 확장이 필요한 경우는 제외하고는 type를 사용한다.

1-5. 리액트

확장자

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

컴포넌트의 선언

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

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

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

컴포넌트의 props

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

type 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 '@Components/Header/Header'

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

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

// 4. export default
export default MyComponent 

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

type NameProps = {}

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

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

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

reactEventHandler를 사용한다.

someFunction: React.MouseEventHandler<HTMLButtonElement>;

React.[type]

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

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

// good
import React from 'react';

2️⃣ 폴더 구조

📦src
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂Button
 ┃ ┃ ┃ ┣ 📜Button.tsx
 ┃ ┃ ┃ ┗ 📜Button.stories.tsx
 ┃ ┣ 📂layout
 ┃ ┃ ┣ 📂Header
 ┃ ┃ ┃ ┣ 📜Header.tsx
 ┃ ┃ ┃ ┗ 📜Header.stories.tsx
 ┃ ┣ 📂product
 ┃ ┃ ┣ 📂ProductItem
 ┃ ┃ ┃ ┣ 📜ProductItem.tsx
 ┃ ┃ ┃ ┃ 📜ProductItem.stories.tsx
 ┃ ┃ ┣ 📂ProductList
 ┃ ┃ ┃ ┣ 📜ProductList.tsx
 ┃ ┃ ┃ ┗ 📜ProductList.stories.tsx
 ┃ ┣ 📂errorBoundary
 ┣ 📂constants
 ┣ 📂hooks
 ┃ ┣ 📜useModal.ts
 ┃ ┣ 📜useScroll.ts
 ┣ 📂pages
 ┃ ┣ 📜ProductListPage.ts
 ┣ 📂styles
 ┣ 📂types
 ┣ 📂utils
 ┣ 📂router
 ┃ ┣ 📜index.tsx
 ┣ 📜App.tsx
 ┣ 📜index.tsx

3️⃣ 사용 라이브러리

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

4️⃣ 테스트 도구

• msw
• storybook
• jest
• react-testing-library

5️⃣ 브라우저 지원 범위

• 데스크탑, 테블릿, 모바일
• 크롬, 사파리, 파이어폭스, 오페라, 엣지