프론트엔드 코드 스타일 가이드

import 문 컨벤션

• [trivago/prettier-plugin-sort-imports](https://github.com/trivago/prettier-plugin-sort-imports) 사용하여 prettier 설정에 추가해줘 파일을 저장시 아래와 같은 순서로 자동 정렬 되도록 설정했다.

{
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "^@public/(.*)$",
    "^@src/components/(.*)$",
    "^@src/hooks/(.*)$",
    "^@src/@(.*)",
    "^@src/api/(.*)$",
    "^@src/mocks/(.*)$",
    "^[./]"
  ],
}

CSS property 컨벤션

• CSS property를 뒤죽 박죽 작성하게 되면 유지보수 하기 힘든 코드가 만들어지기 때문에 아래와 같은 컨벤션을 가지고 작성해준다.

display / flex / gap (display와 관련된 속성들 최상단)

(그 외에 기본적인 css property 설정)
width 
height
backgroundcolor
font
color 
border

position / top / left / right (position 관련된 속성들)

transform / translate
z-index

theme, props  (theme을 사용한 property 설정 혹은 props를 전달받아 사용하는 경우)

before, after (가상 요소 선택자)

handler 함수 네이밍 컨벤션

handleElementClick, handleElementChange와 같은 네이밍이 아닌,

해당 함수에서 어떤일을 하는지 알 수 있는 handleOpenModal, handleChangeValue와 같은 네이밍을 사용한다.

컴포넌트, 훅, 유틸 함수 컨벤션

컴포넌트/훅은 함수 선언문을 사용하고, Props와 ReturnType에는 interface를 사용한다.

// Component 예시
interface Props {};

interface ComponentReturnType {};

function Component({}: Props) {}

// Hook 예시
interface Props {};

interface HookReturnType {};

function hook({}: Props): HookReturnType {}

• 함수 선언문은 중복된 선언이 가능하고 type 재사용이 불가능하다는 단점이 존재하지만, 하나의 컴포넌트/훅 내부에서 중복된 이름의 함수를 재선언하는 경우는 보편적으로 존재하지 않고, type 또한 컴포넌트/훅 에 맞게 작성하기 때문에 재사용될 경우가 없기 때문이다.

그 외의 함수는 함수 표현식을 사용하고, Type 설계는 type alias를 사용한다.

type UtilsFunction = (prop: Prop) => ReturnType;

const utilsFunction: UtilsFunction = (prop) => {
	return {};
};

• 컴포넌트/훅 컨벤션과는 다르게 컨벤션을 가져감으로써 일관성 있는 코드를 작성해 읽기 좋은 코드를 만든다.
• 일반 함수의 경우 type 재사용 가능성이 있고, 중복된 함수명을 사용할 확률이 컴포넌트/훅 보다 높기 때문에 중복된 함수명을 사용할 경우 Error가 발생하기 때문에 휴먼 에러를 방지할 수 있다.

상태 관리 컨벤션

서버 상태는 React-query를 사용해 관리한다.

• React-query의 query함수 및 mutate 함수들은 hook으로 분리하여 아래와 같이 관리해준다.

interface Props {
  slackCode: string;
}

function useGetCertification({
  slackCode,
}: Props): UseQueryResult<ResponseToken, CustomError> {
  return useQuery<ResponseToken, CustomError>(QUERY_KEY.SLACK_LOGIN, () =>
    slackLogin(slackCode)
  );
}

export default useGetCertification;

디랙토리 구조 컨벤션

src
 ┣ @atoms // atom은 src/@atoms에서 관리
 ┃ ┗ index.ts
 ┣ @constants // 상수는 src/@contants에서 관리
 ┃ ┗ index.ts
 ┣ @styles // global 한 style은 src/@styles에서 관리
 ┃ ┗ index.ts
 ┣ @types // global type 및 d.ts는 src/@types에서 관리
 ┃ ┣ custom.d.ts
 ┃ ┗ index.ts
 ┣ @utils // global하게 사용하는 util함수는 src/@utils에서 관리
 ┃ ┗ index.ts
 ┣ api // api 호출 관련은 src/api에서 관리
 ┃ ┗ index.ts
 ┣ components
 ┃ ┣ @layouts // layout 관련 된 components는 src/components/@layouts에서 관리
 ┃ ┃ ┗ index
 ┃ ┣ @shared // 공유 가능한 components는 src/components/@shared에서 관리
 ┃ ┃ ┗ index
 ┃ ┣ @svgIcons // SVG Icon components는 src/components/@svgIcons에서 관리
 ┃ ┃ ┗ IndexIcon.tsx
 ┃ ┣ Folder // 비즈니스 로직 분리 hook은 src/components/특정컴포넌트폴더/@hooks에서 관리
 ┃ ┃ ┗ @hooks
 ┃ ┃   ┗ useIndex.ts
 ┣ hooks // global 하게 사용될 수 있는 hook은 src/hooks에서 관리
 ┃ ┣ @query // query관련 hook은 src/hooks/@query에서 관리
 ┃ ┃ ┣ useGetQueryHook.ts
 ┃ ┃ ┗ useMutateQueryHook.ts
 ┃ ┣ @shared // global 하게 공유되고 있는 hook은 src/hooks/@shared에서 관리
 ┃ ┃ ┗ useSharedIndex.ts
 ┃ ┗ useIndex.ts
 ┣ mocks // msw mocking 관련 파일은 src/mocks에서 관리
 ┗ pages // page components는 src/pages에서 관리
   ┗ Home
     ┗ index.tsx