컨벤션, 리팩터링 방향, PR Rule

[ 함수 선언 ]

• 컴포넌트를 포함한 함수는 함수 선언문으로 선언합니다. 단, *.stories.tsx는 이를 무시할 수 있습니다.

• 리액트 컴포넌트 내부에 활용되는 함수는 분리할 수 있다면 외부에 함수 선언문으로 작성하고, 분리할 수 없다면 내부에 함수 표현식으로 작성할 수 있습니다.

// bad
const Component: React.FC = () => {
  return <div />
}

// good
function Component () {
  const [state, setState] = useState(false)
  const toggle = () => setState((prev) => !prev)
  return <div />
}

[ 인터페이스 및 타입 ]

• 불가피하게 Type을 사용할 수밖에 없는 경우를 제외하고는, Interface를 사용합니다.
• 서버로부터 내려오는 API의 인터페이스를 정의할 때는 QuizApi 형식으로 뒤에 postfix로 API를 사용합니다.
• 클라이언트에서 커스텀 데이터 인터페이스를 정의할 때는 QuizModel 형식으로 뒤에 postfix로 Model을 사용합니다.

• 기본 인터페이스를 정의하고, 해당 인터페이스를 부분적으로 갖다가 사용할 때에는 Pick<T, P> 또는 Partial<T> 등 타입스크립트의 타입을 적극적으로 사용합니다.

• Interface와 Type은 PascalCase를 사용합니다.

• Type은 Type임을 표시할 수 있도록 뒤에 Type 또는 Types postfix를 붙입니다.

// bad
type someType = {
	color: string;
}

function Component({color}: sometype) {}

// good
interface Props {
  color: string
}

type ReturnTypes = [boolean, () => void]

function Component({color}: ISomeInterface): ReturnTypes {
  const [state, setState] = useState(false)
  const toggle = useCallback(() => {
    setState((prev) => !prev)
  }, [])
  return [state, toggle]
}

// interface
interface QuizModel {
  //...
}

type QuizApi = Pick<QuizModel, 'id' | 'answerType' | 'createAt' | 'updatedAt'>

• 인터페이스가 전역으로 사용될 여지가 있을 경우에는 types 또는 interface 폴더에 넣어서 사용할 수 있습니다.

• 그 외 단순 컴포넌트의 Props state를 정의하거나 전역적으로 사용되는 타입이나 인터페이스가 아니라면 해당 함수가 선언된 위치에서 인터페이스 정의 후 export 할 수 있습니다.

[ 폴더 구조 ]

src
|-pages
|-components
|-hooks
|-api
|-common
|-containers
|-contexts
|-pages
|-routes
//...

1. 컨벤션에 맞지 않는 폴더명이 있다.
1. ex) api는 왜 복수형으로 사용하지 않은 걸까요?

2. Components 폴더 내부가 너무 복잡하다.
1. 해당 폴더 내에는 도메인과 완벽히 분리된, 크기가 작은 컴포넌트부터 도메인에 완전히 종속된 크기가 큰 컴포넌트들이 존재한다.

3. 사용하지 않는 폴더
1. commons, containers는 사용하는 사람만 사용하고, 대부분은 사용하지 않는다.

따라서, 앞으로 원할한 유지 보수를 위해 폴더 구조를 개편해야 할 필요가 있다.

• 컴포넌트 폴더 내부에 도메인에 의존하는 컴포넌트와 그렇지 않은 컴포넌트들이 혼재된다.

• 미래에 hooks 패턴으로 로직과 UI를 분리하게될 경우, 컴포넌트와 마찬가지로 비슷한 문제를 야기할 가능성이 크다.

• auth

• quiz

• user (ranking, info)

• shared (utils, hooks)

src
|--auth
|--quiz
--|--apis
--|--components
--|--hooks
--|--pages
|--user
|--shared
--|--components
--|--hooks
--|--utils

• 폴더 구조가 더 중첩될 수 있는 문제점이 있는데, 해당 문제를 해결하기 위하여 절대 경로를 정의해두면 어느 정도 해결될 것이라 생각한다.

[ 파일 구조 ]

index.ts // export
Component.tsx // 실제 로직 또는 UI가 담긴 파일
helpers.ts // hooks 또는 Component로부터 분리 가능하지만, 도메인에 의존하는 함수들
Component.styles.ts or styles.ts // 스타일 파일

[ 스타일 ]

• 스타일은 8px rule를 지켜서 정의합니다.

[ import ]

• import 순서는 다음의 규칙을 따릅니다.
• react 관련 import
• 라이브러리 관련 import
• 모듈 or 커스텀 Hook 관련 import
• 스타일 import

// react 관련
import React, { useEffect, useState, useContext, useCallback } from 'react';

// libraries
import axios from 'axios';
import dayjs from 'dayjs';

// modules
import CustomComponent from 'components/CustomComponent';

// styles
import * as S from './styles';
import 'global.module.scss';

[ CSS 작성 순서 ]

1. display: 객체의 노출여부/표현방식
2. list-style
3. position
4. float
5. clear
6. width / height
7. padding / margin
8. border / background
9. color / font
10. text-decoration
11. text-align / vertical-align
12. white-space
13. other text
14. content

[ Lint ]

{
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "airbnb",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "plugin:prettier/recommended"
    ],
    "plugins": [
        "prettier"
    ],
    "rules": {
        "linebreak-style": "off",
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [
                    ".js",
                    ".jsx",
                    "tsx"
                ]
            }
        ],
        "import/no-unresolved": "off",
        "react/react-in-jsx-scope": "off",
        "react/jsx-props-no-spreading": "off",
        "react/require-default-props": "off",
        "import/no-extraneous-dependencies": [
            "error",
            {
                "devDependencies": true
            }
        ],
        "import/extensions": "off",
        "@typescript-eslint/no-non-null-assertion": "off",
        "prettier/prettier": ["error", { "endOfLine": "auto" }],
        "no-underscore-dangle": "off",
        "import/prefer-default-export": "off",
    },
    "overrides": [
        {
            "files": [
                "*.ts",
                "*.tsx"
            ],
            "rules": {
                "no-undef": "off",
                "no-unused-vars": "off"
            }
        },
        {
            "files": [
                "*.config.js"
            ],
            "rules": {
                "@typescript-eslint/no-var-requires": "off"
            }
        }
    ],
    "parser": "@typescript-eslint/parser"
}

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "tsconfigRootDir": "./",
    "project": ["./tsconfig.json"]
  },
  "plugins": ["prettier", "@typescript-eslint"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "airbnb-typescript",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "react/jsx-props-no-spreading": "off",
    "react/require-default-props": "off",
    "import/prefer-default-export": "off",
    "react/default-props-match-prop-types": "off"
  },
  "overrides": [
    {
      "files": ["*.stories.tsx", "styles.ts", "*.styles.ts"],
      "rules": {
        "react/function-component-definition": "off"
      }
    }
  ]
}

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,

}

• .editorconfig 추가

// .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[{package.json,*.yml}]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

참고

토스페이먼츠 프론트엔드 챕터를 소개합니다

안녕하세요, 토스페이먼츠 프론트엔드 엔지니어 한재엽입니다. 좋은 분들을 모시기 위해 저희 프론트엔드 챕터 소개글을 작성해봤습니다. 지속적으로 업데이트될 예정이니 많은 관심 부탁드려요! (last updated: 22.04.29)

https://tosspayments-dev.oopy.io/chapters/frontend/about#4331195d-a899-4429-9a1b-cc1c0ee70703