⚖️ FE ‐ Code Convention

⚖️ FE - Code Convention

목차

1. 네이밍

• 변수 이름은 길어도 타인이 봤을 때 이해할 수 있는 표현으로
• boolean 변수는 is~ 로 시작
• 이벤트 핸들러 함수는 ‘handle’ + ElementName + EventType 으로.
  • ex
    • handleAddButtonClick
    • handleMemberSelectedChange
• 함수 이름은 동사로 시작합니다.
• 배열 변수 이름
  • numbers : 배열의 원소들이 number
  • numberArray : 배열의 이름이 number
  • 대부분의 상황에서는 -s 를 붙인 복수형 명사를 사용하시게 됩니다.

2. 파일, 폴더 이름

• 컴포넌트는 PascalCase, 나머지 util 함수는 camelCase
• 대부분의 상황에서 ~.ts는 소문자, ~.tsx는 대문자입니다.

3. 컴포넌트 구현

• 코드 순서
  • useState, useRef 등의 hooks
  • handler
  • useEffect
  • return
• 같은 파일에 작성을 했으나, 다른 파일로 빼지 않을 컴포넌트는 export할 컴포넌트의 아래에 둡니다.
• rerender 필요가 없는 경우의 상수는 컴포넌트 밖에서 선언

4. 파일 경로

• 절대 경로 사용(상대 경로 사용 금지)

5. 상수 하드코딩 지양

• 재사용 가능한 상수는 consts 폴더에 둡니다.
• 상수 변수명은 대문자 스네이크 표기법(NUM_QUESTIONS)을 사용합니다.
• 여기서 상수란 아래와 같은 것들이 있습니다.
  • 시스템 상수
    • 동아리 지원서 질문 갯수
  • 에러 메세지
    • const API_RESPONSE_ERROR_MESSEGE = “서버에 문제가 생긴 것 같아요”
  • 각종 데이터
  • 경로

6. 함수는 화살표 함수(arrow function) 사용

• function 키워드 사용보다는 arrow function 으로

7. interface vs. type

• 객체 타입은 interface, 나머지는 type 키워드 사용
• 참고 문서
• 확실하게 개념 탑재하고 구별하기
• 컴포넌트의 Prop 타입의 경우, type ComponentProps = { ... }의 형식으로 사용합니다.

8. Type은 가능한 좁히면 좋습니다.

• 단순히 string, number보다 타입 지정을 해줘서 type 을 narrowing 해주는게 좋습니다.
• 참고 문서

9. 이벤트 핸들러의 이벤트 객체 타입을 지정해주세요.

• 이벤트 핸들러는 아래 예시처럼 선언하시면 됩니다.
  • const handleElementClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {…}

10. API Response Type 반드시 작성해주세요.

• API Response Type은 재사용이 없는 경우 API 호출하는 함수 바로 위에 작성해주세요.
  • 만일 API Response Type 재사용 될 경우 밖으로 빼주세요.
  • 이 함수는 컴포넌트 안이 아니라, 다른 코드에 작성되어 있어야 합니다.
  • API 분리 필수 !!!

11. 반드시 모든 타입을 달 필요는 없습니다.

• 참고 문서

12. default export 지양

• named export를 사용합니다.
• 1파일 1컴포넌트 원칙을 지킵니다.