Skip to content

Code Convention

Jump to bottom
YujeanSohn edited this page Jan 2, 2023 · 5 revisions

변수명

  • 일반: camelCase
  • 상수: SNAKE_CASE
  • Boolean: is[대상][상태] (ex. isUserAdded)
  • 의도가 드러나는 변수명으로 작성하기!

함수

  • naming
    • camelCase
    • 동사로 시작 (ex. addCount)
    • 이벤트 핸들러는 handle을 prefix로 가진다.
  • 구현 방식
    • 하나의 함수가 하나의 책임을 지도록 한다.
    • 화살표 함수를 사용한다.
    • 비동기 처리는 async, await를 사용한다.

폴더구조

├── root
│   ├── public # public
│   ├── server # json-server
│   └── src
│       ├── apis # axios apis, axios instance
│       ├── components # components
│       ├── constants # 두루 사용될 공공재 상수
│       ├── hooks # custom hooks
│       ├── pages # page
│       ├── redux
│       ├── styles # 공통 스타일
│       ├── shared # 공통 컴포넌트 (ex. Router)
│       └── utils # 두루 사용될 공공재 함수

파일이름

  • 폴더 이름은 소문자
  • 파일 확장자
    • 컴포넌트를 구성하는 파일은 .tsx 사용
    • 컴포넌트 외의 파일은 .ts 사용

컴포넌트

  • 컴포넌트는 함수형 컴포넌트를 사용한다.
  • 컴포넌트 명은 컴포넌트가 담는 정보를 대표한다. (ex. 댓글 컴포넌트 -> Comment.jsx)
  • 컴포넌트 파일 내 코드 작성 순서
  1. import
  • import 순서 (종류 구분 사이에는 한 줄 공백을 포함한다)
  * 외부 라이브러리 
    * 프로젝트 기본 구성 라이브러리 (ex. `react`, `react-route-dom`, `styled-components`)
    * 그 외 (ex. `bootstrap`, `react-player`...)
  * 프로젝트 내 컴포넌트 (ex. `src/components/` 폴더 내의 파일들)
  * 프로젝트 내 thunk 
  * 프로젝트 내 utils
  * 프로젝트 내 assets
  1. 컴포넌트
  2. styled-component
  3. export

컴포넌트 폴더 구조

├── components
│   ├── common # 2개 이상의 페이지에서 사용되는 공공재 컴포넌트
│       ├── elem # atom 단위 컴포넌트
│       ├── modal # molecule 단위 컴포넌트 (컴포넌트 용도에 맞는 이름으로 폴더 생성)
│       ├── layout # 공통 레이아웃 컴포넌트
│   ├── user # 사용자 전용 컴포넌트
│   ├── goal # 목표 전용 컴포넌트

컴포넌트 분리 기준

  • atomic design에 따라서 페이지 내 구성 요소가 하나의 관심사를 가질 때까지 나눈다.
  • atom 단위: 최소 단위 UI 컴포넌트는 src/components/common/elem 폴더 내에서 관리한다.
  • molecule 단위: 하나의 작업을 처리하는데 사용되는 컴포넌트들은 상위 컴포넌트로 묶여서 src/components/common/[컴포넌트 용도] 폴더 내에서 관리한다.
  • organism 단위: 특정 페이지 내에서 하나의 관심사(ex. 사용자 관련)를 다루는 컴포넌트들은 상위 컴포넌트로 묶여서 src/components/[관심사] 폴더 내에서 관리한다.
  • 같은 페이지에 속하는 컴포넌트들은 상위 페이지 컴포넌트로 묶여서 src/pages/ 폴더 내에서 관리한다.

데이터 로딩 시 처리 방법

  • slice마다 isLoading 값을 저장.
  • 해당 slice의 값을 호출하고 사용하는 부분에서 isLoading 값을 사용해 조건부 랜더링을 한다.
  • 한 페이지 내에서 같은 slice의 thunk API를 여러 컴포넌트에서 사용하지 않도록 주의한다.

test 방법

  • 분업한 작업 단위로 test 시 필요한 데이터는 initialState에 dummy data를 사용한다.
  • 그 외 필요한 test code는 반드시 주석 처리를 통해 test code인 것을 기억해두고, commit에는 미포함한다.

스타일 작성 순서

position
display
width/height
margin/padding
color 관련
text 관련
tranform, transition, animation

ESLint & prettier

eslint

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    “eslint:recommended”,
    “plugin:react/recommended”,
    “plugin:@typescript-eslint/recommended”,
  ],
  overrides: [],
  parser: “@typescript-eslint/parser”,
  parserOptions: {
    ecmaVersion: “latest”,
    sourceType: “module”,
  },
  plugins: [“react”, “@typescript-eslint”],
  rules: {},
};
}

prettier

module.exports = {
    arrowParens: 'always',
    bracketSpacing: true,
    jsxBracketSameLine: true,
    jsxSingleQuote: true,
    printWidth: 80,
    proseWrap: 'always',
    quoteProps: 'as-needed',
    semi: true,
    singleQuote: true,
    tabWidth: 2,
    trailingComma: 'es5',
    useTabs: false,
}

thanks to 동석, 예나, 제승, 안지현 기술매니저님

Clone this wiki locally