FE 코드 컨벤션

1. 변수, 함수명은 camelCase로 한다.

const postList = [];
const addNumber = () => {};

2. 상수명은 SNAKE_CASE로 하며, 내부 프로퍼티는 소문자로 한다. 또한 끝에 as const 선언을 추가한다.

const RANGE = {
  min: 3,
  max: 4,
} as const;

3. 인자를 받아야하는 함수형 상수 또한 상수 파일에서 함께 관리한다. 다만 일반 상수와는 별도의 postFix를 추가한다.

const MESSAGE_FORMATTER = {
  add: (number) => `더할 숫자는 ${number}입니다.`,
} as const;

const MESSAGE = {
  fail: "실패했습니다!",
  success: "성공했습니다!",
} as const;

4. 컴포넌트 Props 타입명은 컴포넌트 이름 + Props로 한다.

interface ComponentProps { ... }

5.타입과 컴포넌트명이 겹치는 경우 타입명은 끝에 Data를 붙인다.

type MissionListData = {
 ...
}

export default function MissionList ({data} : MissionListData){}

6. Boolean 타입 변수는 is, has, can 과 같은 접두사를 붙인다.

const isValidValue = true;
const hasValue = false;
const canEnter = true;

7. 커스텀 훅의 인자 타입에는 끝에 Params를 추가한다.

type UseRangeParams = {
  min: number;
  max: number;
};

const useRange = ({ min, max }: UseRangeParams) => {};

8. 이벤트 핸들러명은 handle 접두사를 가진다.

const handleMissionLevelValue = () => {};

9. 이벤트 핸들러를 Props로 전달할때는 on 접두사를 가진다.

export default function Component() {
  const handleMissionLevelValue = () => {
    // ...
  };

  return <OtherComponent onHandleMissionLevelValue={handleMissionLevelValue} />;
}

10. children으로 감싸는 Wrapper 컴포넌트의 children 타입은 PropsWithChildren으로 통일한다.

import type { PropsWithChildren } from 'react';

export default function Wrapper({ children }: PropsWithChildren) {
  return <div>{children}</div>;
}

11. api 함수명은 각 api HTTP 메서드 명을 접두사로 사용한다.

const getMission = () => {};
const postMission = () => {};
const deleteComment = () => {};

12. 컴포넌트명 스타일링 네이밍

네이밍	설명
Container	컴포넌트의 최상단
Wrapper	여러 개의 요소든 단일 요소든 감싸줘야 할 때
List	ul, ol 태그를 사용할 때 권장
Item	li 태그, 반복되는 요소를 사용할 때 권장

각 항목은 Component명 + 네이밍 으로 조합한다.

13. 타입만을 import 할때는 type only import를 한다.

import type { ExampleData } from '@types/types';

14. 컴포넌트를 export 할때는 default export를 사용한다.

export default function Component() {}

15. 스타일 컴포넌트를 import 할때는 무조건 * as S 로 통일한다.

import * as S from './Component.styled';

16. 단일 스타일이더라도 무조건 별도의 파일로 분리한다.

┣ ┗ component
┣   ┗ index.tsx
┣   ┗ Component.styled.ts

15. 함수나 스타일링 파일, 상수 등 필요한 값들을 export 할때는 named export를 한다.

export const function = () => { ... };
export const Container = styled.div;


export const MESSAGE = {} as const;

16. 컴포넌트에서는 받아온 상태(데이터)를 그대로 받아온 표현하는 역할만 수행하는 것을 지향하자. 다만 아래와 같이 단일 상태인 경우 자유롭게 결정한다.

export default function Component() {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  return (...);
}

17. 주석을 남길 때는 JSDoc을 사용한다.

/**
 *
 * @param { number } start
 * @param { number } end
 * @returns { boolean }
 */

18. TODO 주석을 사용한다면 @본인닉네임을 마지막에 붙인다.

//TODO 이 부분은 미정입니다. @본인닉네임

19. 함수와 훅에는 인자 + 반환타입을 무조건 명시한다.

export const addNumber = (a: number, b: number): number => {
  return a + b;
};

19. 테스트 폴더는 __tests__이고 관련 폴더 내부에 접근성 높게 위치한다.

┣  component
┣   ┗ __tests__
┣   ┗ index.tsx
┣   ┗ Component.styled.ts
┣  otherComonent
┣   ┗ __tests__
┣   ┗ index.tsx
┣   ┗ OtherComponent.styled.ts

20. 최상단의 폴더명은 무조건 복수형으로 한다.

src
┣ folderNames
┣ otherFolderNames
...

21. 객체 타입인 경우에는 interface를 사용한다.

interface PersonData {
  name: string;
  age: number;
  address: string;
}

export default function Person({ name, age, address }: PersonData) {}

- 폴더구조

src
┣ apis
┣ assets
┣ components
┃ ┗ common
┣ ┗ header
┣   ┗ __tests__
┣   ┗ index.tsx
┣   ┗ Header.styled.ts
┣ ...
┣ constants
┣ hooks
┃ ┣ __tests__
┣ ┗ useExample.ts
┣ mocks
┣ pages
┣ queries
┣ types
┣ utils
┣ App.tsx