코드 컨벤션

📌 네이밍 컨벤션

변수: `camelCase`

변수명은 최대한 직관적으로 네이밍해요.

// data, info, amount 사용은 지양해요.
userData (x)
userInfo (x)

함수: `camelCase`

어떤 기능을 하는지 드러날 수 있도록 동사 + 𝝰로 작성해요.
반환값이 boolean이라면 is + 𝝰 로 작성해요.

컴포넌트, 클래스: `PascalCase`

상수 : `UPPER_SNAKE_CASE`

디렉토리: `lower-kebap-case`

컴포넌트인 경우에만 PascalCase로 작성해요.
BE api 폴더는 도메인 기준으로 분리해요.
- /user /workspace

파일: `lower-case.lower.ts`

컴포넌트인 경우에만 PascalCase

핸들러: `on + 동사`

function Component () {
  const onCreate = () => {}
  const onJoin = () => {}

  return <button onClick={onCreate}>
}

타입/TS인터페이스: `PascalCase`

어떤 구현체들 간의 인터페이스(TS 인터페이스 아님)에 대한건 꼭 정의해요.
하나의 파일에서만 사용되는 타입 또는 인터페이스(TS 인터페이스)는 해당 파일에 작성해요.

📌 스타일

Common

비동기 처리는 Promise 나 체이닝 대신에 async-await 문법을 사용해요.

Promise 는 꼭 필요한 경우에만 사용해요.

Prettier

// .prettierrc

{
  "semi": true,
  "trailingComma": "all",
  "useTabs": false,
  "tabWidth": 2,
  "bracketSpacing": true,
  "singleQuote": true,
  "endOfLine": "lf",
}

husky

pre-commit hook, 커밋하면 스테이지 된 파일들에 대해서 lint, prettier 검사해줘요.

Front-end

리액트 프로젝트에서 제공하는 ESLint, tsconfig 기본 세팅을 사용하고 필요한 경우 수정 내역을 기록해요.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
    "no-non-null-assertion": "off",
    "no-unused-vars": "off",
    "no-nested-ternary": 'error',
    "eqeqeq": "error",
    "no-console": "warn",
  }
}