ESLint

imports sort

• eslint의 imports sort 라이브러리를 활용하며, 다음과 같이 그룹핑한다.

import { a,b } from "react"; // 외부 모듈

import utils from "@utils"; // 내부 전역 모듈

import model from "./model"; // 그 외 참조

• FE는 react 관련 플러그인을 추가적으로 사용한다.

style guide

• google style guide 를 기본으로 한다.

export default vs name default

• export default를 사용하는 경우, 파일 이름과 동일한 것을 export한다.
• nest 등에서 이름이 지정된 파일을 사용하는 경우는 상관 없다.

Prettier

{
  "printWidth": 100, // 한줄 글자 수
  "useTabs": false, // tab을 공백으로 바꾸어줌
  "tabWidth": 2, // tab 사이즈는 space 2개
  "singlueQuote": true, // ""를 ''로 변경한다
  "trailingComma": "all", // 마지막에 ,를 무조건 붙인다
  "semi": true, // 세미콜론(;)를 마지막에 붙이도록 강제한다
}

FE 컨벤션

handle vs on

결정) FE 컨벤션 회의 (handle vs on)

컴포넌트의 이벤트 이름은 onXXXX 으로 짓는다.