reactJs 프로젝트 경로 src '@' 설정

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": resolve("src"),
    },
  },
});

 

루트디렉터리에 jsconfig.json 생성

- vite.config.js만 생성하도 컴파일 에러가 나지않지만, Eslint 설정이 빡세게 되어있거나, idel에서 에러가 날경우가 있어서 아래 추가

 jsconfig.json

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

 

 

components/Header.jsx

function Header() {
    return (
        <header>
            <h1>My App Header</h1>
        </header>
    );
}

export default Header;

 

 

App.jsx

import Header from "@/components/Header";

function App() {
  return <Header />;
}

export default App;

 

index.css, app.css는 삭제

 

서버 시작

npm run dev