magic pos 코딩 컨밴션

현재 진행 중인 magic pos 프로젝트의 코딩 컨밴션을 작성해 보겠다 

 

• 컴포넌트 파일은 파스칼 케이스로 작성 **e.g) ComponentsTest.tsx**
• 페이지명은 index**Page**.ts (끝에 Page명 표기)
• 일반 .ts 파일은 케밥 케이스로 작성 (ex. common.ts, date-helper.ts)
• app 폴더 하위 페이지 파일 이름은 케밥 케이스로 작성
• .module.css 파일은 컴포넌트 이름과 동일하게 작성!
  • e.g. Layout.module.css
• 컴포넌트 & 분리
  • **rafce** 스니펫 사용

  const Component () => {
  	return <></>
  }
  
  export default Component;**파일 이름**
  

• 폴더 트리
• project-root/ |📂 src/ | |📂 assets | |📂 app | | |📄 layout.tsx | | |📄 not-found.tsx | | |📄 page.tsx | | |📂 login/ | | | |📄 page.tsx | |📂 components/ | | |📂 layout/ | | | |📄 Header.tsx | | | |📄 Content.tsx | |📂 types/ | | |📄 common.d.ts | | |📄 supabase.d.ts
• 변수명 & 함수명
  • 변수명
    • 예약어는 **const** 로만 필요 시 **let**
    • 상수 (not, const, 하드코딩 값)는 모두 대문자로 작성하되, 단어 구분 필요 시 **_로 작성 **e.g) MAX_COUNT = 20;
    • Boolean 타입에 관해서는 접두사 **‘is’** 사용
  • 함수명
    • 함수는 단일 책임 원칙 (only 기능 1개)
    • 모든 함수 이름은 동사형으로 작성 (카멜 케이스) **e.g) addComment**, **checkIsDone**
    • CRUD
      • create: 접두사 add **e.g) addCart...**
      • read: 접두사 fetch **e.g) fetchData ...**
      • update: 접두사 update e.g) updateCart ...
      • delete: e.g) reomveCart ...
    • Handler
      • e.g) clickCartHandler ... - click기능명Handler
    • React Query (Custom Hook) - 튜터님 찬스 필요
      • removeCartMutation = useMutaiton()… return { remove: removeCartMutation.mutate }
• Custom Hooks
  • hooks > user(폴더 - 페이지명) > useAuth(회원가입, 로그인 등등), useInput, useVaildate(파일)
    • 폴더 → 페이지명, 파일 → use기능명
    • 더불어, 전역적으로 사용되는 Hook일 경우 **common** 폴더로 분리합니다.
  • react query를 custom hook으로 만들 경우
    • useQuery 사용하는 hook과 useMutation을 사용하는 hook으로 분리
    • useQuery 사용하는 훅 네이밍: ~~fetchQuery
    • useMutation을 사용하는 훅 네이밍: ~~setQuery
  • zustand를 custom hook으로 만들 경우
    • ~~State
    • e.g.) useOrderState