React 프로젝트 만들기

<aside> 🔥 터미널에서 실행

</aside>

pnpm create vite@latest 파일명     // React vite 로 프로젝트 생성

cd 파일명   // 파일로 이동

code . // 새로운 vscode 로 열기

pnpm i 설치   // 설치

프로젝트 루트 기준 절대경로 설정

<aside> 🔥 프로젝트 루트 기준 절대경로가 설정을 하면, 프로젝트의 구조가 복잡해질때 도움이 된다.

컴파일러가 번역한 결과물들은 링커가 하나가 묶어야 동작이 가능하다. 그렇기에 경로 설정은 컴파일러와 링커를 모두 해야한다.

</aside>

// jsconfig.json 파일 만들기
// 파일 안에 코드 넣기

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

npm i vite-jsconfig-paths -D   // 설치

// vite.config.js 로 이동

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import jsConfigPath from "vite-jsconfig-paths";

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react(), jsConfigPath()],
});

// 후에 APP.jsx 로 이동

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from '@/App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

// 절대경로 @ 확인