프로젝트 구조와 코드 관리에 대한 질문들

1. 각종 type은 어디에 저장하고 사용해야 할까?

타입스크립트의 타입 정의는 주로 프로젝트 전반에서 재사용되는 타입이나 인터페이스를 관리하는 파일로 분리하는 것이 좋습니다. 일반적으로 src/types 디렉토리를 만들어 여러 타입 정의를 관리할 수 있습니다. 예를 들어, API 요청 및 응답에 사용되는 타입, 컴포넌트의 props 타입 등을 여기에 정의할 수 있습니다.

예시로

2. zustand를 위한 store는 어디에서 정의해야 할까?

zustand를 사용하는 상태 관리는 src/store 폴더에 정의하는 것이 일반적입니다. 각 상태 관리 파일을 기능별로 분리하거나 하나의 중앙화된 스토어 파일에서 관리할 수 있습니다.

예시로

authStore.ts > 로그인 및 사용자 상태 관리
settingsStore.ts > 설정 관련 상태 관리

3. 라우팅을 위한 페이지 컴포넌트들은 어디에?

페이지 컴포넌트는 src/pages 디렉토리에 저장하는 것이 일반적입니다. 라우팅과 관련된 각 페이지 컴포넌트를 이 디렉토리에 모아두고, App.tsx에서 라우팅을 설정할 수 있습니다.

예시로

4. 프로젝트 전반에서 사용하는 공통 컴포넌트는 어디에?

프로젝트 전반에서 사용되는 공통 컴포넌트는 src/components 디렉토리에 모아둡니다. 예를 들어, 버튼, 입력 필드, 모달, 네비게이션 바 등은 components 디렉토리에 넣어서 재사용할 수 있습니다.

5. axios에 매번 동일한 설정 vs custom instance

axios를 사용할 때 매번 동일한 설정을 반복하지 않기 위해 custom instance를 사용하는 것이 좋습니다. src/api/axiosInstance.ts 파일에서 공통 설정을 가진 axios 인스턴스를 만들고, 모든 API 요청에 이 인스턴스를 사용합니다.

예시로

이런식으로 만드는 방법이 있습니다.

6. tanstack query의 useQuery, useMutation 등에서 사용할 api 목록은 어디에?

API 호출 관련 함수는 src/api 폴더에서 정의하고 관리할 수 있습니다. 예를 들어, 사용자 관련 API는 userApi.ts, 인증 관련 API는 authApi.ts와 같이 기능별로 파일을 나눕니다.

예시)

7. query key를 모아서 관리하기

React Query에서 사용하는 query key는 상수로 관리하는 것이 좋습니다. src/queryKeys.ts 파일을 만들어 query key를 중앙화된 위치에서 관리할 수 있습니다.

예시)