Directory Structure

전체 디렉터리 구조

📦src
 ┣ 📂app
    ┣ 📂providers/
    ┣ 📂routers/
    ┗ 📜index.tsx
 ┣ 📂components
 ┣ 📂pages
 ┗ 📂shared
    ┣ 📂axios/
    ┣ 📂styles/
    ┣ 📂ui/
    ┗ 📂util/

📂app

애플리케이션 로직이 초기화되는 곳입니다. 프로바이더, 라우터, 전역 스타일, 전역 타입 선언 등이 여기에서 정의됩니다. 애플리케이션의 진입점 역할을 합니다.

• providers: RouterProvider, QueryClientProvider 와 같은 프로바이더들이 위치하는 디렉터리입니다.

// app/providers/query-client.ts

import {
  MutationCache,
  QueryCache,
  QueryClient,
  QueryClientConfig,
} from "@tanstack/react-query";

export const queryClientOptions: QueryClientConfig = {
  defaultOptions: {},
  queryCache: new QueryCache({}),
  mutationCache: new MutationCache({}),
};

export const queryClient = new QueryClient(queryClientOptions);

• routers: React Router에 의해 렌더링되는 페이지의 라우터가 정의됩니다.

// app/routers/index.tsx

import { createBrowserRouter, RouteObject } from "react-router-dom";

import RootLayout from "@pages/RootLayout";
import ErrorLayout from "@pages/ErrorLayout";

const routes: RouteObject[] = [
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorLayout />,
  },
];

const router = createBrowserRouter(routes);
export default router;

• index.tsx: 애플리케이션의 진입점 역할을 합니다.

📂components

View에 해당하는 부분이 여기에서 정의됩니다. 사용자의 인터랙티브 또한 여기서 정의합니다.

feeds/

• hooks/useLike.tsx

• Feeds.tsx

• FeedItem.tsx

• Feeds.scss

...

📂pages

페이지에 해당하는 컴포넌트가 여기에서 정의됩니다. 페이지 진입시 데이터를 가져오는 커스텀 훅도 여기에서 정의합니다.

• FSD 아키텍처를 사용함에 있어, pages 에서는 components를 참조할 수 없어야하는데 entity, feature 모두 나누고 하기에는 아직 힘들 것 같아서 이 부분에 대해서는 규칙을 위배해야할 것 같습니다!

// pages/feeds/FeedsPage.tsx

import { useGetFeeds } from "./useFeeds";

const FeedsPage = () => {
  const { feeds } = useFeeds();

  return <Feeds feeds={feeds} />;
};

export default FeedsPage;

// pages/feeds/useFeeds.tsx

async function getFeeds(): Promise<Feed[]> {
  const { data } = await axiosInstance.get("/feeds");

  return data;
}

export function useGetFeeds(): Feed[] {
  const fallback: Feed[] = [];

  const { data = fallback } = useQuery({
    queryKey: [queryKeys.feeds],
    queryFn: getFeeds,
  });

  return data;
}

export function usePrefetchFeeds(): void {
  const queryClient = useQueryClient();

  queryClient.prefetchQuery({
    queryKey: [queryKeys.feeds],
    queryFn: getFeeds,
  });
}

📂shared

재사용 가능한 컴포넌트와 유틸리티 함수, axios 설정 등이 여기에서 정의됩니다.

• axios: axios 설정이 포함된 디렉터리입니다.

// shared/axios/config.ts

import axios from "axios";

const SERVER_URL = process.env.REACT_APP_SERVER_URL;

export const axiosInstance = axios.create({
  baseURL: SERVER_URL,
  timeout: 20000,
  headers: {
    "Content-Type": "application/json",
    accept: "application/json",
  },
});

axiosInstance.interceptors.request.use(onRequest);
axiosInstance.interceptors.response.use(onResponse, onError);

• styles: scss의 전역 변수와 초기 설정이 위치하는 디렉터리입니다.

// shared/styles/font.scss

$font-large: 3rem;
$font-medium: 1.6rem;
$font-default: 1.2rem;
$font-small: 0.8rem;

// shared/styles/color.scss

$color-white: #ffffff;
$color-black: #000000;

$color-gray-400: #bdbdbd;
$color-gray-500: #9e9e9e;
$color-gray-700: #616161;

$color-red-400: #ef5350;
$color-red-500: #f44336;
$color-red-700: #d32f2f;

$color-blue-400: #42a5f5;
$color-blue-500: #2196f3;
$color-blue-700: #1976d2;

• ui: 자주 사용될 수 있는, View들이 위치하는 디렉터리입니다.

// shared/ui/Button.tsx

const Button = ({ onClick, color, data }) => {
  return (
    <button className="button-style" onClick={onClick}>
      {data}
    </button>
  );
};

• util: 특정 비즈니스 로직에 종속되지 않은 유틸리티 함수가 포함된 디렉터리입니다.

// shared/util/key-factories.ts

export const generateUserKey = (userId: number) => {
  return [queryKeys.user, userId];
};

export const generateUserAppointmentsKey = (
  userId: number,
  userToken: string
) => {
  return [queryKeys.appointments, queryKeys.user, userId, userToken];
};