Code Convention - Hi-Fi-Club/FE GitHub Wiki

1. 🐇 Import 규칙

  • 외부 모듈과 내부 모듈을 구분하여 사용.

  • 외부모듈은 각 .tsx 파일 맨위에, 그 밑에는 내부모듈

  • 내부모듈의 경우 컴포넌트 > 리코일 atom > 유틸 순으로 순서를 구분한다.

  • 예시

    import { useState, useEffect } from "react";
import styled from 'styled-components';
import { useSetRecoilState, useRecoilValue } from "recoil";
  ​
import MilestonesHeader from "./MilestonesHeader";
import MilestoneCard from "./MilestoneCard";
import MilestoneInput from "./MilestoneInput";
​
import {
  milestoneAddButtonFlagState,
  milestoneCountState,
  labelAddButtonFlagState,
  navigatorAddButtonFlagState,
} from "RecoilStore/Atoms";
​
​
import API from "util/API";
import fetchData from "util/fetchData";

    공백은 보기 편하시라고 넣었습니다! 실제 개발할 땐 공백없이!

2. 👸 Prettier

  • 코드 한 줄 최대 글자 수 (printWidth): 120
  • 여백 (tabWidth): 2칸

3. ✅ ESLint

  • 기본적으로 eslint-config-airbnb-typescript 를 따른다
  • 추가하고 싶은 룰이 있는 경우 논의 후 반영 가능.
  • 프로젝트 루트폴더의 .eslitrc 참고

4. 🐳 타입스크립트 설정 (tsconfig)

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "tsconfig.paths.json"]
}

5. 🐣 변수, 함수, 클래스 명명 규칙

  • 컴포넌트를 반환하는 파일은 *.tsx 확장자를 사용한다.
  • 컴포넌트를 반환하는 파일이 아닌 경우 *.ts 확장자를 사용한다.
  • *.tsx - 컴포넌트, 파일, 폴더명 → PascalCase
  • *.ts - 파일, 폴더명 → cammelCase
  • 상수 → SNAKE_CASE
    • const MAX_COUNT = 100
  • 함수 및 변수 → cammelCase
    • const foo = () => {}
    • let bar = 3
  • 창의적인 단어 쓰지 않기 (제일 떠오르기 쉽고 기본적인 단어)
  • 변수는 명사형으로 작성
  • 함수는 동사형으로 작성 (doSomething, getValue)
  • 예시
    • Header/index.tsx
    • components/Slider.tsx
    • util/functions/getMoney.ts
    • util/hooks/useFetch.ts

+. 🎸 기타 코딩 규칙

  • html태그 선언 시 가능한 시멘틱한 태그 사용
    • 헤더에는 <header> 리스트는 <li>
      (강제아님!)
  • 코드 PR은 지정된 리뷰어가 approve 한 후에 merge 할 수 있다!
    • PR 에는 다 필요없고 리뷰어만 지정!
    • 리뷰어가 지적한 부분 고친 후에 comment로 알릴 것
  • 코드 리뷰는 필수! 꼭 확인하기!
    • 팀원의 리뷰엔 할말이 없으면 대댓글은 안달더라도 이모티콘 반응 정도는 해주자~🙌
  • html 의 id 혹은 className은 snake__case 로 한다. (ex: label__description)
  • JSX의 최상단 태그를 StyledComponent 로 표현하고 __Layout으로 맞춘다. (ex: <TitleLayout>)
  • 함수표현식으로 써서 콜백으로 써먹자!
⚠️ **GitHub.com Fallback** ⚠️