Vite로 React.js, Vue.js 프로젝트 만들기 + 절대경로 설정

그동안은 CRA를 사용해서 간단하게 React.js 프로젝트를 만들었지만, https://velog.io/@lky5697/react-starter 이 포스팅을 읽고 Vite의 장점을 알게 되어 직접 실행해보기로 했다.

 

React.js

pnpm create vite

React와 TypeScript + SWC를 선택하였다.
(SWC는 Rust로 짜여진 컴파일러로, 속도와 성능이 우수하다고 함)

 

1.1 vite에 path alias 추가하기

import 경로를 절대경로로, @를 사용하기 위함

pnpm install @types/node -D

// vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { fileURLToPath, URL } from "node:url";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

 

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
 }

 

 

Vue.js

pnpm create vite

Official Vue Starter를 선택하면 나오는 기능 목록: 

◆  Select features to include in your project: (↑/↓ to navigate, space to
select, a to toggle all, enter to confirm)
│  ◻ TypeScript
│  ◻ JSX Support
│  ◻ Router (SPA development)
│  ◻ Pinia (state management)
│  ◻ Vitest (unit testing)
│  ◻ End-to-End Testing
│  ◻ ESLint (error prevention)
│  ◻ Prettier (code formatting)
└

리액트가 익숙하기 때문에 JSX Support도 선택
테스트 코드는 잠시 보류하고 그 외 전부를 선택함

안내하는 절차대로 따른다.