프론트 초기 세팅

1. Vite + React + TypeScript 개발환경 세팅

프로젝트 생성 후 패키지 설치

npm create vite@latest [프로젝트 명] --template react-ts
npm i

깃 초기화 파일 설정

git init

절대경로 설정

npm i -D vite-tsconfig-paths

• vite.config.ts

import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    port: 3000,
    host: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

• __dirname 오류 있을 때

npm i -D @types/node

• tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

공식 문서 ⇒ https://vitejs-kr.github.io/guide/why.html

2. 리액트 라우터 설정

패키지 설치

npm i react-router-dom

• src/router/router.tsx

import Detail from "@/pages/Detail";
import NotFound from "@/pages/NotFound";
import Root from "@/pages/Root";
import Test from "@/pages/Test";
import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root></Root>,
    errorElement: <NotFound></NotFound>,
    children: [
      { path: "/", element: <div>Root 페이지 입니다.</div> },
      { path: "/test", element: <Test></Test> },
      { path: "/detail", element: <Detail></Detail> },
    ],
  },
]);

export default router;

• src/pages/Root.tsx

import { Outlet } from "react-router-dom";

function Root() {
  return (
    <div>
      <nav>Navbar Example</nav>
      <Outlet></Outlet>
    </div>
  );
}

export default Root;

• src/pages/NotFound.tsx

function NotFound() {
  return <div>Not Found...!</div>;
}
export default NotFound;

• src/pages/Test.tsx

function Test() {
  return <div>test 페이지 입니다.</div>;
}

export default Test;

• src/pages/Detail.tsx

function Detail() {
  return (
    <div>
      <div>detail 페이지 입니다</div>
    </div>
  );
}

export default Detail;

• src/App.tsx

import { RouterProvider } from "react-router-dom";
import router from "./router/router";

function App() {
  return (
    <>
      <RouterProvider router={router}></RouterProvider>
    </>
  );
}

export default App;

공식 문서 ⇒ https://reactrouter.com/en/main/start/overview

3.Recoil 설정

npm i recoil

• src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import App from './App';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  // <React.StrictMode>
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  // </React.StrictMode>
);

공식 문서 ⇒ https://recoiljs.org/ko/

4. queryClient 설정

npm i axios
npm i @tanstack/react-query @tanstack/react-query-devtools 

• src/main.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import App from './App';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  // <React.StrictMode>
  <RecoilRoot>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false}></ReactQueryDevtools>
    </QueryClientProvider>
  </RecoilRoot>,
  // </React.StrictMode>
);

공식 문서 ⇒ https://tanstack.com/query/v4/docs/react/quick-start

5. MSW(Mock Service Worker) 설정

패키지 설치

npm i -D msw

서비스 워커 코드 생성

npx msw init public/ --save

• src/mocks/handlers.ts

import { rest } from "msw";

const dummy = "테스트입니다.";

export const handlers = [
  // 테스트 mock api
  rest.get("/test", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(dummy));
  }),
];

• src/mocks/worker.ts

import { setupWorker } from "msw";
import { handlers } from "./handlers";

export const worker = setupWorker(...handlers);

서비스 워커 삽입

• src/main.tsx

...

// 추가할 부분
import { worker } from "./mocks/worker";

if (import.meta.env.DEV) {
  worker.start();
}
//

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  ...
);

공식 문서 ⇒ https://mswjs.io/

참고 블로그 ⇒ https://www.daleseo.com/mock-service-worker/

6. MUI 세팅

npm install @mui/material @emotion/react @emotion/styled

공식 문서 ⇒ https://mui.com/

7. ESLint, Prettier 설정

패키지 설치

npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks
//오류 해결

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

• .eslintrc.js

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 13,
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  env: {
    browser: true,
    es2021: true,
  },
  rules: {
    "@typescript-eslint/interface-name-prefix": "on",
    "@typescript-eslint/explicit-function-return-type": "on",
    "@typescript-eslint/explicit-module-boundary-types": "on",
    "@typescript-eslint/no-explicit-any": "on",
  },
};

• .prettierrc

{  "singleQuote": true,  "trailingComma": "all",  "semi": true,  "useTabs": false,  "tabWidth": 2,  "printWidth": 80,  "arrowParens": "always"}

참고 블로그 ⇒ https://wonillism.tistory.com/271

8. 필요 없는 파일 삭제

• App.css
• index.css