Skip to content

프론트엔드 개발문서

Jump to bottom
peacemaker474 edited this page Sep 5, 2023 · 4 revisions

목차

  • 코드 컨벤션
    • 네이밍
      • 변수명, 함수명
      • 상수
      • 컴포넌트, 객체, 클래스
      • 축약어
      • HTML 태그에 따른 스타일 컴포넌트 네이밍
      • API
      • 이벤트 핸들러
    • CSS
      • attribute 순서
    • 상수
      • 상수 범위
    • 타입
      • type
      • interface
    • React
      • 확장자
      • 컴포넌트 선언
      • 컴포넌트 props
      • 컴포넌트 export default
      • 컴포넌트 작성 순서
      • Path alias
      • React Event Handler
      • React.[type]
  • 폴더구조
  • 사용 라이브러리
  • 테스트
  • 개발 환경

1️⃣ 코드 컨벤션

1-1. 네이밍

변수명, 함수명

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

// bad
const obj_variable = {};
const function_introduce = () => {};

// good
const objVariable = {};
const functionIntroduce = () => {};

상수

상수명은 UPPER_CASE로 한다.

// bad
const variableName = "변수명";

// good
const VIRIABLE_NAME = "변수명";

컴포넌트, 객체, 클래스

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

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

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

축약어

네이밍을 축약하게 될 경우, 축약을 한 당사자만 이해할 수 있기 때문에 축약하여 네이밍을 하지 않는다.

단, 네이밍이 너무 길어지게 될 경우 축약을 통한 네이밍을 허용한다. 이때, 반드시 주석을 통해 남겨야한다.

// bad
const myBtn = useRef(null);
const addFn = () => {
  // ...
};

// good
const myButton = useRef(null);
const addFunction = () => {
  // ...
};

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

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

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

API

API 관련 함수를 만들 때 API Method를 어두에 작성하며, 데이터에 대한 값을 변경해야 될 시 해당 동작에 대해 API Method 어두 뒤에 동작을 명시한다.

// bad
const userList = () => {
  // ...
};
const searchUser = () => {
  // ...
};
const postUser = () => {
 // ...
};

// good
const getUsers = () => {
  // ...
};

const postCreateUser = () => {
 // 유저 생성에 대한 API
};

이벤트 핸들러

이벤트 핸들러와 관련된 함수에 네이밍은 handle + 명사 + 동사 형태로 네이밍을 한다.

// bad
const handleSubmit = () => {
 // ...
};

// good
const handleSignupSubmit = () => {
 // ...
};

1-2. CSS

attribute 순서

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

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

1-3. 상수

상수 범위

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

  • API URL
  • Route Path Name
  • Magic Number (매직 넘버)
  • 서비스 메세지 (Error, Success Message)
  • 서버 관련 메세지 (HTTP Method, Status)
  • 스타일 (Color)
  • 옵션 및 타입 (Option, Service Type)

1-4. 타입

type

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

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

interface

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

  1. 확장 가능성이 높은 타입

type vs interface

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

1-5. 리액트

확장자

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

컴포넌트의 선언

컴포넌트는 함수 표현식로 선언한다.

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

// good
const Component = () => {
 // ...
};

컴포넌트의 props

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

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

컴포넌트의 export default

  • 컴포넌트를 내보낼 때에 export default를 사용한다.
  • export는 사용하지 않는다. 만약, 사용이 된다면 파일 분리를 고려한다.

컴포넌트 작성 순서

import, type, React Component, export default, styled-component 순으로 작성한다.

만약, styled-component로 선언할 변수가 3개 이상일 경우, [Component_Name].styled.ts로 파일을 분리한다.

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

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

// 3. React Component
const Component = ({a, b}: Props) => {
 // ...
};

// 4. export default
export default Component

// 5. styled-component
const Box = styled.div`
 // ...
`;

Path alias

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

순서 경로 위치
1 @Api ./api/*
2 @Assets ./assets/*
3 @Components ./components/*
4 @Constant ./constant/*
5 @Hooks ./hooks/*
6 @Layouts ./layouts/*
7 @Pages ./pages/*
8 @Routes ./routes/*
9 @Styles ./styles/*
10 @Types ./types/*
11 @Utils ./utils/*
12 @Stories ./stories/*
13 @Test ./test/*

React Event Handler

기본적으로 reactEventHandler를 사용한다.

만약, 라이브러리에서 제공하는 EventHandler가 있을 경우, 해당 라이브러리에서 제공하는 것을 사용한다.

someFunction: React.MouseEventHandler<HTMLButtonElement>;

React.[type]

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

import type {SetStateAction} from 'react';

2️⃣ 폴더 구조

📦src
 ┣ 📂assets
 ┣ 📂api
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂atom
 ┃ ┃ ┃ ┣ 📂Button
 ┃ ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┃ ┗ 📜Button.stories.tsx
 ┃ ┣ 📂layout
 ┃ ┃ ┣ 📂Header
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜Header.stories.tsx
 ┃ ┣ 📂product
 ┃ ┃ ┣ 📂ProductItem
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┃ 📜ProductItem.stories.tsx
 ┃ ┃ ┣ 📂ProductList
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜ProductList.stories.tsx
 ┃ ┣ 📂errorBoundary
 ┣ 📂constant
 ┣ 📂hooks
 ┃ ┣ 📜useVisible.ts
 ┃ ┣ 📜useScroll.ts
 ┣ 📂pages
 ┃ ┣ 📂login
 ┃ ┃ ┣ 📜index.tsx
 ┣ 📂styles
 ┣ 📂types
 ┣ 📂utils
 ┣ 📂routes
 ┃ ┣ 📜Router.tsx
 ┣ 📜App.tsx
 ┣ 📜main.tsx

3️⃣ 사용 라이브러리

  • react
  • react-router-dom
  • typescript
  • styled-components
  • vite
  • esLint
  • prettier
  • husky
  • storybook
  • jest
  • axios
  • @tanstack/react-query
  • msw

4️⃣ 테스트 도구

  • jest
  • storybook
  • msw

개발 환경

  • node - v18.17.1
  • yarn - 1.22.19

created by @peacemaker474 @leedawnn

개발문서

Clone this wiki locally