[FE BE] 컨벤션

Front-End Convention

• 참고링크: FE 코딩 컨벤션

코딩 스타일

• 들여쓰기: 2 문자 사용

• 따옴표: ' ' (작은 따옴표)

• 함수: Arrow function 사용

• 한 줄 길이 제한: 100자

• 파일 구조:

  • 컴포넌트 폴더 구조로 사용하며, index.tsx에서 import

• 모듈 및 경로:

  • export는 선언부에 명시
  • 절대 경로 사용 (@)

• 조건문:

  • 간단한 if 문은 삼항 연산자 사용
  • 항상 중괄호 { } 포함

  // Bad
  if (condition) return;
  
  // Good
  if (condition) {
    return;
  }

• Early Return 패턴 사용:

  if (!password) {
  	alert("비밀번호를 입력해주세요");
      return;
  }

• 공백:

  • 콤마 다음에는 반드시 공백
  • 키워드, 연산자와 다른 코드 사이에 공백 필수

  // Good
  var value;
  if (typeof str === 'string') {
    value = (a + b);
  }
  
  // Bad
  var value;
  if(typeof str==='string') {
    value=(a+b);
  }

네이밍 컨벤션

• 폴더 및 파일명:

  • 폴더명: kebab-case
  • 파일명:
    • 컴포넌트 파일: PascalCase
    • 타입 및 통신 관련 파일: camelCase
    • 컴포넌트일 경우 .jsx (.tsx), 그 외는 .js (.ts)

• 함수 및 변수명:

  • 함수명: camelCase
  • 변수명:
    • Boolean 타입은 is로 시작
    • 배열은 List로 끝 ex) todoList
    • 객체는 Obj로 끝 ex) userObj

• 컴포넌트 및 클래스명:

  • 컴포넌트명 및 클래스명: PascalCase

• 작명 방식:

  • 약어보다 직관적인 이름 사용 (명사 + 동사 순서 권장)
  • 함수는 동사 + 𝝰 형태
  • customHook을 사용하는 경우: use + 훅 이름
  • 전역 상태의 경우: 상태 이름 + store

• 상수 및 타입명:

  • 상수: SNAKE_CASE
  • 타입:

    • 타입 이름은 T로 시작

    • 컴포넌트 props 타입은 <컴포넌트명>Props 형태로 선언

      export interface ButtonProps {}

• 핸들러 함수:

  • props로 전달되는 핸들러 함수: on으로 시작
  • 컴포넌트 내부 핸들러 함수: handle로 시작

주석

• 주석 스타일:
  • 한 줄 주석: //
  • 여러 줄 주석: /* */
  • 함수 설명이 필요한 경우 JSDoc 사용
  • 주석 문구와 // 사이에 공백 (// 할일 - O / //할일 - X)
• TODO:
  • 개선 사항이나 해야 할 부분이 있으면 TODO 주석 사용
  • VSCode에 Todo 익스텐션 사용: VSCode Todo Extension