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>)
- 2021.09.19 Styled Components : Naming Convention
함수표현식으로 써서 콜백으로 써먹자!

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

1. 🐇 Import 규칙

2. 👸 Prettier

3. ✅ ESLint

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

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

+. 🎸 기타 코딩 규칙

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️