🏗️file & folder style

Naming

기본 파일 이름 규칙

모든 파일의 네이밍은 기본적으로 kebab-case 로 작성합니다. 가장 가독성이 좋습니다.

├── constants
│   └── query-keys.ts
├── types
│   └── props-of.ts
└── utils
    └── get-by-id.ts

React 관련 파일 이름 규칙

단, react 와 관련 있는 파일은 해당 변수의 네이밍 규칙을 따라갑니다.

├── components
│   └── PostCard.tsx
├── hocs
│   └── withGlobalProvider.tsx
└── hooks
    └── useCount.ts

---

코드 분리

파일을 폴더로 변경하기

코드가 길어지면 코드 분리가 필요합니다. 코드 분리시, index 파일과, 본문 파일과 함께 폴더구조로 변경합니다.

├── components
│   └── PostCard
│       ├── ... (분리할 파일)  
│       ├── PostCard.tsx
│       └── index.ts

Q1.왜 index 파일을 생성하나요?

Index 파일은 자바스크립트와, 사람 둘 모두에게 진입점(우선탐색할 파일)임을 명시적으로 알려줍니다

Q2. index 파일에 본문을 작성하지 않고 따로 파일을 하나 더 두는 이유는 무엇인가요?

파일 검색시 index 파일은 이름이 겹쳐 찾기가 어렵기 때문입니다.

일관된 Sub-Folder 로 관리하기

분리할 파일을 서브폴더로 분류해서 분리합니다.

서브폴더 분류는 일반적으로 src 폴더에서 사용하는 폴더(constants, types, utils, hooks, components, context....)로 구분을 권장합니다.

├── components
│   └── PostCard
│       ├── utils
│       │   └── format-date.ts
│       ├── hooks
│       │   └── usePostCard.ts
│       ├── components
│       │   └── PostCardHeader.tsx
│       ├── PostCard.tsx
│       └── index.ts

하위 폴더의 파일하나의 구현사항이 길어진다면 해당 파일 역시 폴더로 변환 후 하위 폴더를 가질 수 있습니다.

├── components
│   └── PostCard
│       ├── ...
│       ├── components
│       │   └── PosrCardHeader
│       │       ├── components
│       │       │   ├── ActionButtonGroups.tsx
│       │       │   └── Avatar.tsx
│       │       ├── PostCardHeader.tsx
│       │       └── index.ts
│       ├── PostCard.tsx
│       └── index.ts

depth 가 너무 깊어져서 폴더 구조 파악하기가 너무 힘들어요

하위 컴포넌트(코드)를 너무 많이 가지고 있는 구조라면, 결합도가 높진 않은지 고민해보세요.

자식을 갖기보단 컴포넌트 합성으로, 결합도를 낮추고 더 유연한 컴포넌트를 만들어 보세요.

전역적으로 사용되는 파일은 공용(최상단) 폴더로 분리하기

만약 여러 파일에서 사용되는 코드가 있고, 그 범위가 하위코드에만 국한되지 않는다면 최상단 레벨로 파일 분리를 고려해 보세요.

예를들어 PostCard 컴포넌트에서 사용되는 format-date 같은 함수는 최상단 utils 폴더가 더욱 적합합니다.

└── src
    ├── ...
    ├── components
    │   └── PostCard
    │       ├── utils
    │       │   └── format-date.ts ---> (x)
    │       ├── components
    │       │   └── PosrCardHeader
    │       │       ├── PostCardHeader.tsx
    │       │       └── index.ts
    │       ├── PostCard.tsx
    │       └── index.ts
    ├── context
    │   └── ...
    ├── hocs
    │   └── ...
    ├── hooks
    │   └── ...
    └── utils
        └── format-date.ts ---> (o)

---

파일 관리

@ 태그로 하나의 주제로 폴더를 묶기

sub 폴더가 하위 모듈을 관리하는 방법이라면 @ 폴더는 연관된 모듈을 방법입니다.

코드분리를 위한 폴더는 하위 모듈을 포함한 하나의 모듈입니다. 반면, @ 폴더는 모듈의 집합입니다. 모듈의 집합임을 명시적으로 알 수 있게 폴더 앞에 @ 태그를 붙여주세요.

components
├── @Modals
│   ├── ConfirmModal.tsx
│   └── FormModal.tsx
└── PostCard
    ├── ...
    ├── PostCard.tsx
    └── index.ts

---

폴더 구조: Pages

SEO 에 유리한 url 설계하기

Next.js는 pages 폴더 내에 파일 구조로 url을 생성합니다. url 은 seo 에 영향이 있기 때문에, seo 에 유리한 url 을 만드는것이 중요합니다. pages 폴더로 페이지 경로를 설정할때, 아래사항을 유의해 주세요

• kebab case 사용

• 명확한 의미의 문자 사용 및 특수문자 사용 금지

• 계층 관계 나타내기

---

폴더 구조: Containers

pages 폴더와 1:1 구조로 생성하기

next-init에서 사용하는 pages 폴더와 1:1 대응하는 컴포넌트 폴더입니다.

각 페이지에 들어 갈 React 컴포넌트의 최상단 파일들을 모아놓으며 Components 폴더와 동일한 규칙을 지닙니다.

자세한 컨벤션은 Components 문서를 참고해주세요.

왜 containers 은 components 폴더와 같은 규칙인데 따로 관리되나요? pages 의 폴더구조는 routing 과 직결됩니다. pages 폴더에서 하위폴더로 컴포넌트를 분리하면 그 파일 자체가 route 할 수 있는 하나의 url 이 되기 때문에, container 는 코드 구현을, pages 는 routing 으로 역할을 분담합니다.

---

폴더 구조: Apis

스웨거 태그 기준으로 폴더 생성하기

swggger tag 란? api 경로를 그룹화 한 것 입니다. 아래 사진에선 estimate 에 해당합니다.

swagger 문서와 구조를 동일하게 가져감으로써 팀원들이 코드를 찾기 더욱 수월하게 해보세요

├── apis
│   └── estimate
│       ├── ...
│       └── EstimateApi.ts

dto 폴더와 model 폴더를 활용하기

api 를 정의할땐 type 선언이 필수적입니다. 특히 응답값 같은 경우는 json 을 parse 하는 과정에서 any 타입으로 변하기 때문에, 더욱더 정확한 타입이 요구되는데요. api 관련 타입을 정의할 땐 dto 와 model 폴더를 활용해서 타입을 정의해주세요.

├── apis
│   └── estimate
│       ├── types
│       │   ├── @dto
│       │   │   ├── create-estimate-dto.ts
│       │   │   └── update-estimate-dto.ts
│       │   └── @model
│       │       └── estimate.ts
│       └── EstimateApi.ts

dto, model 이 뭔가요?

dto 는 Data Transfer Object 의 약자로, 통신을 위한 데이터 객체를 의미합니다. 보일러 플레이트에선 요청 타입에 해당합니다.

model 은 프론트 코드에서 서버의 데이터 구조를 표현하기 위한 타입 명명이며, 보일러 플레이트에선 주로 응답 타입에 해당합니다.

React Query Hook 을 api 파일과 같은 폴더에 포함하기

react query 는 일반적으로 네트워크 요청시에 사용하므로 hook 이지만 apis 폴더에서 관리합니다. 데이터를 가져오는 역할인 useQuery 를 사용하는 경우는 .query 로, useMutation 을 사용하는경우는 .mutation 으로 구분해 주세요

├── apis
│   └── estimate
│       ├── types
│       │   ├── @dto
│       │   │   └── create-estimate-dto.ts
│       │   │   └── update-estimate-dto.ts
│       │   └── @model
│       │       └── estimate.ts
│       ├── EstimateApi.ts
│       ├── EstimateApi.mutation.ts
│       └── EstimateApi.query.ts

gen:source 사용하기

똑똑한 개발자 보일러 플레이트에서 yarn run gen:source 스크립트로 컨벤션에 맞춰진 api 코드 탬플릿을 생성할 수 있습니다.

gen:api 사용하기

똑똑한 개발자 보일러 플레이트에서 yarn run gen:api 스크립트로 swagger 의 json 을 기반으로 바로 사용가능한 api 코드를 생성할 수 있습니다.

폴더 구조: utils

되도록 최상단 utils 폴더는 함수 하나당 하나의 파일을 갖도록 해주세요

전역 레벨에서 사용되는 함수는 재사용성과, 팀원들이 사용할 가능성이 높은 함수입니다. 어떤 함수들이 정의 되었는지 한눈에 확인 할 수 있도록 한 함수당 한 파일을 권장합니다.

├── utils
│   └── array
│       ├── multiply.ts
│       ├── sort.ts
│       └── shuffle.ts

폴더 구조: types

되도록 최상단 types 폴더는 타입 하나당 하나의 파일을 갖도록 해주세요

전역 레벨에서 사용되는 타입은 재사용성과, 팀원들이 사용할 가능성이 높은 함수입니다. 어떤 타입들이 정의 되었는지 한눈에 확인 할 수 있도록 한 함수당 한 타입을 권장합니다.

├── types
│   └── uitility
│       ├── prop-of.ts
│       ├── item-of.ts
│       └── deep-partial.ts

폴더 구조: test code

테스트 코드는 __test__ 폴더에서 작성해주세요

소스 파일과 분리해주세요

테스트 코드 파일은 확장자 전에 .test 를 포함해주세요

jest 가 파일 이름을 기준으로 테스트 코드를 인식할 수 있습니다.

├── utils
│   └── array
│       ├── __test__
│       │       └── multiply.test.ts
│       └── multiply.ts