2025 최신화 vite, react, typescript 프로젝트

25년도 버전으로 프로젝트 기본 세팅법을 기록해두려고 한다.

vite, react, typescript 를 기본으로 해서 공통적으로 쓰이는 라이브러리에 대해서 추가했다.

 

 

1. 웹스톰으로 vite, react, typeScript 로 프로젝트 생성

 

 

 

2. Yarn berry 사용하기

rm -rf node_modules
rm -rf package.lock.json

yarn set version berry

yarn install

 

3. zero-install 설정 (.gitignore 맨 아래에 코드 복붙)

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

 

 

4. 웹스톰 설정 들어가서 package manger 검색해서 yarn 으로 설정

 

 

 

5. 린트 세팅하기 (터미널에 복붙)

yarn add -D eslint-import-resolver-typescript
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
yarn add -D eslint-plugin-react-refresh

 

6. 루트 경로에 .prettierrc 파일 만들고 아래 코드 복붙

{
  "trailingComma": "es5",
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

 

7. 웹스톰 설정에서 prettier, eslint 에서 패키지 매니저 적용

 

 

 

8. 절대경로 추가하기 (터미널에 복붙)

yarn add -D vite-tsconfig-paths
yarn add -D @types/node

 

9. tsconfig.app.json 의 "compilerOptions" : {} 안에 아래 내용 복붙

 

/* Path alias */
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
      "@app/*": ["src/app/*"],
      "@page/*": ["src/page/*"],
      "@component/*": ["src/app/component/*"],
      "@shared/*": ["src/shared/*"],
      "@widget/*": ["src/widget/*"],
    }

 

10. vite.config.ts 에서 tsconfigPaths 임포트하고 plugins 배열안에 tsconfigPaths() 추가

 

import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
	  port: 3000,
	},
});

 

11. 폴더구조 세팅

 

 

12. 라이브러리 세팅 (터미널에 복붙)

yarn add axios
yarn add react-router-dom
yarn add zustand
yarn add normalize.css

 

 

13. main.tsx 에서 노말라이즈 import

 

import 'normalize.css';

 

 

14. routes 폴더 안에 Router.tsx 생성

 

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { Home } from '@src/page/home/Home.tsx';

export const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
};

 

 

15.  main.tsx 에서 <Router /> 추가

 

import './normalize.css';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Router } from '@src/app/routes/Router.tsx';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Router />
  </StrictMode>
);