FE 컨벤션

FE 코드 컨벤션

괜찮을지도 JavaScript Style Guide는 Airbnb JavaScrpit Style Guide를 기준으로 작성되었습니다.

Airbnb JavaScrpit Style Guide와 다른 부분, 추가적인 부분을 아래 명시합니다.

기존 내용과 다른 부분은 제목에 목차를 명시, 새로 추가된 부분은 ✅ 를 표기하였습니다.

---

✅ 변수

• 사용하지 않는 변수는 _ 로 네이밍한다.

  // bad
  const neverUsing = 10;
  
  // good
  const _ = 10;

• Boolean 타입 변수는 is ,has 과 같은 prefix를 붙인다.

  // bad
  const open = true;
  
  // good
  const isOpen = true;

✅ 함수

• 함수 이름은 동사로 시작해야한다.

  // bad
  const validationName = () => {};
  
  // good
  const validateName = () => {};

• 라우터 (페이지 이동) 함수 한정으로 to, with, from 과 같은 단어를 사용해서 네이밍한다.

  // bad
  const routeHome = () => {};
  
  // good
  const goToHome = () => {};

• event Handler에서 props는 on<…>, 메소드 자체도 on<…>으로 통일하여 네이밍한다.

  // BAD 👎
  <Comp onClick = {handleClick} />
  
  // GOOD 👍
  <Comp onClick = {onClick} />

• 인라인 함수는 가능하면 사용하지 않는다.

  // bad
  <Comp onClick={(e) => {}} />
  
  // good
  <Comp onClick={onClickMap} />

✅ 타입

• 일반적인 타입은 interface를 사용하여 선언한다. type은 유니온과 같은 상황에서 사용한다.

  // bad
  type CompProps = {};
  
  // good
  interface CompProps {}

• Props의 타입 or interface는 컴포넌트명 + Props로 해당 컴포넌트 최상단에 정의합니다.

  // BAD
  interface Props {...}
  
  // GOOD
  interface MayBeFineProps {...}

• hook인 경우 ⇒ use<…>Props , 커스텀 훅의 파라미터 타입을 지정할 때 props 접미사를 붙인다.

  interface UseLocalStorageProps {}
  
  const useLocalStorage = () => {}

• 제너릭은 T, V 와 같이 하나의 글자로만 사용한다.

  const exam = <T>() => { return data: T }

✅ 컴포넌트

• 컴포넌트는 화살표 함수로 작성하고 export default로 내보낸다.

  const Component = () => {};
  
  export default Component;

✅ 파일 네이밍

• 리액트 컴포넌트를 정의한 파일은 파스칼 케이스로 적는다.

  // file name
  CartComponent.tsx

• 리액트 컴포넌트는 .tsx로 컴포넌트가 아닌 것들은 .ts로 정의한다.

  // file name
  useCart.ts

✅ Style

• 레이아웃은 margin 으로 스타일링 한다.

  // bad
  comp-root {
    padding: 12px;
  }
  
  // good
  comp-root {
    margin: 12px;
  }

• 공통으로 사용하는 Color 와 Font 는 변수로 만들어 사용한다.

  // bad
  border : solid 1px #ffffff
  
  // good
  border : solid 1px var(--primary-color)

  // best
  border : solid 1px ${(theme) => theme.color.primary}

✅ 이터레이터

• for-in이나 for-of같은 루프 대신 자바스크립트의 고차함수를 사용

  // bad
  let sum = 0;
  for (let num of numbers) {
    sum += num;
  }
  sum === 15;
  
  // good
  let sum = 0;
  numbers.forEach((num) => {
    sum += num;
  });
  sum === 15;
  
  // best (use the functional force)
  const sum = numbers.reduce((total, num) => total + num, 0);
  sum === 15;