프론트엔드 폴더 구조

폴더 구조

pages

• 페이지를 담당하는 컴포넌트들을 둔다.
• 페이지 별로 폴더를 만들고 index.tsx로 해당 페이지 컴포넌트를 만든다.
• 페이지 컴포넌트에 들어가는 하위 컴포넌트도 같은 폴더에 함께 작성한다.
  • 하위 컴포넌트를 다른 폴더로 분리하지 않고 함께 작성하는 이유는 도메인 로직이 섞인 컴포넌트이기 때문이다.
• 스타일은 styles.ts 파일로 분리한다.
  • 스타일은 emotion을 사용하여 정의한다.
  • 하위 컴포넌트의 스타일도 이곳에 정의한다.

pages
 ┗ MainPage
  ┣ index.tsx                 // MainPage 컴포넌트
  ┣ PopularStudyLogList.tsx   // 하위 컴포넌트1
  ┣ RecentStudylogList.tsx    // 하위 컴포넌트2
  ┗ styles.ts                 // 스타일

apis

• axios를 통한 비동기 호출을 하는 함수들을 둔다.
• 도메인 이름으로 파일을 만들고 내부에 해당 도메인에 맞는 비동기 호출 함수들을 정의한다.

apis
 ┣ index.ts           // axios instance
 ┣ abilitiy.ts
 ┣ comment.ts
 ┣ ...
 ┗ studylog.ts

components

• 도메인 로직이 없는 UI 컴포넌트들을 정의한다. (검토)

hooks
 ┗ queries
	 ┣ auth.ts
	 ┣ comment.ts
	 ┣ filters.ts
	 ┣ ...
	 ┗ profile.ts
 ┣ ...
 ┗ useBeforeunload.ts

hooks

• 공통 커스텀 훅과 비동기 통신 로직을 관리하는 커스텀 훅들을 둔다.
• 공통적으로 사용되는 훅은 hooks 폴더 최상단에 작성한다.
• 비동기 통신 로직을 관리하는 담당하는 훅은 queries 폴더 아래 도메인 명으로 파일을 작성한다.

hooks
 ┗ queries
	 ┣ auth.ts
	 ┣ comment.ts
	 ┣ filters.ts
	 ┣ ...
	 ┗ profile.ts
 ┣ ...
 ┗ useBeforeunload.ts

models

• 도메인 모델들을 정의하는 타입스크립트 파일들을 둔다.
• 도메인 모델과 해당 도메인의 Request, Response interface를 정의한다.
• 도메인 명을 파일 명으로, 첫글자는 대문자로 한다.

models
 ┣ Ability.ts
 ┣ Comment.ts
 ┣ Keywords.ts
 ┣ Levellogs.ts
 ┗ Studylogs.ts