[React] npm i path --save

경로 다룰 때 사용되는 라이브러리 

터미널을 열고 아래처럼 입력 후 설치를 해준다.

npm i path --save

설정하는 방법

vite.config.js 파일로 가서 

위에 아래처럼 입력하여 path import 해주고 

import path from "path";

 

 

 resolve: {
    alias: {
      "@component": path.resolve(__dirname, "./src/component"),
    },
  },

alias :{ 이 안에 작성!!!  }

"경로약칭" : "경로" 이렇게 작성을 하는데 

'@component' : path.resolve(__dirname, '경로' )    위에서 이렇게 작성이 되어있는데 

'@component' : 경로 약칭

path: path라이브러리

resolve( __dirname:  현재 path라는 라이브러리가 호출된 경로, '경로 ' )  : resolve 메서드를 호출 

 

이렇게 생각하면 된다.

 그래서 나중에  

//App.jsx

import TestComponent from ' src/component/test/test2/TestComponent.jsx' 

import TestComponent from ' @component/test/test2/TestComponent.jsx'

위에 있는 경로를 아래처럼 줄여줄 수 있는 것이다. 

위는 드라마틱한 변화는 없지만

 

 

// vite.config.js
'@component' : path.resolve(__dirname, 'src/component/test/test2' )

//App.jsx
import TestComponent from ' src/component/test/test2/TestComponent.jsx' 

import TestComponent from ' @component/TestComponent.jsx'

이렇게 설정이 되어 있다면 좀 더 간편하게 경로를 작성할 수 있다