[React] 파일 절대 경로 설정 (jsconfig.json)

 

가끔씩 파일 경로를 import 하다보면 길어서 불편할 때가 있다

import Test from '../../../Test';

그래서 나는 항상 절대 경로를 설정해준다 

javascript이므로 jsconfig.json 파일을 만들어서 해주면 된다

 

기본 CRA 프로젝트를 생성하면 src 파일이 있는데 이 파일에 대부분의 소스코드를 넣으니 여기를 기준으로 하면 된다

 

 

jsconfig.json (package.json과 같은 위치에 만들어준다)

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

 

이렇게 하면 src 키워드 없이 절대 경로로 import 하면 된다

 

 

components 밑의 Temp컴포넌트를 App.js로 import 해보겠다

import Temp from 'components/Temp'
import './App.css';


function App() {
  return (
    < >
     <Temp color="red" name="temp"></Temp>
     <Temp></Temp>
    </>
  );
}

export default App;

 

이미지를 가져와도 제대로 작동한다 👍

다만 상대 경로로 가져오던 파일들을 저렇게 가져올 수 있고 (src 밑의 경로만 작성해주면 된다)

https:// ~ 처럼 전체 주소가 있는 것은 그대로 써주면 된다