네이밍 컨벤션

프론트엔드 코딩 컨벤션

함수명 | 변수명

1. 소문자 카멜케이스 사용:

   const helloWorld = () => {};

2. 배열 변수명 끝에 List:

   const helloList = ['hello', 'world'];

3. boolean 변수는 is, has, can으로 시작:

   const isLoading = false;

4. 생성자는 파스칼케이스 사용:

   class HelloWorld {};

5. 상수는 대문자 스네이크 케이스:

   const HELLO_WORLD = 'helloWorld';

리액트

1. 커스텀 훅은 use 접두사:

   const useCustomHook = () => {};

2. 고차 컴포넌트는 with 접두사:

   const withAuth = (Component) => (props) => { /* ... */ };

3. 이벤트 핸들러는 handle 접두사:

   const handleHiClick = () => {};

4. Context는 Context 접미사:

   const HelloContext = createContext(null);

프론트엔드 타입 네이밍 컨벤션

일반

1. type과 interface는 자유롭게 사용하되 type 우선:

   type UserType = {};

2. 일반적인 경우 type 접미사 사용:

   type ProductType = {};

3. 타입은 파스칼 케이스 사용:

   type HelloWorldType = {};

4. 유틸리티 타입은 Type 접미사 사용하지 않음

리액트 관련

1. Props 타입은 Props 접미사:

   type HelloProps = {};

2. 리액트 타입은 개별 임포트:

   import { ReactNode } from 'react';

프론트엔드 폴더구조 | 파일명 컨벤션

1. 모든 폴더, 파일명은 케밥케이스 사용:

   hello-world

2. 약속된 subpath 사용:

   • 모델 정의:

     *.model.ts

   • 스키마 밸리데이션:

     *.schema.ts

   • 스토어 관련:

     *.store.ts

   • 액션:

     *.action.ts

   • querykey factory:

     *.factory.ts

   • query 논리:

     *.query.ts

   • mutation 논리:

     *.mutation.ts

   • 테스트 코드:

     *.test.ts

   • 페이지 컴포넌트:

     *.page.tsx

   • 상수 정의:

     *.constant.ts

   • 유틸 함수:

     *.util.ts

   • 컨테이너 컴포넌트:

     *.container.tsx

   • 프레젠트 컴포넌트:

     *.present.tsx

   • 로딩 컴포넌트:

     *.loading.tsx

   • 타입 정의:

     *.type.ts

3. subpath는 1중첩 이상 사용하지 않음

4. 폴더구조는 Feature-Sliced Design 철학을 변형하여 사용