[React] 절대경로 설정하기

개발 시 컴포넌트를 불러올떄 

상대 경로 :  import { Menu } from '../component/Menu';

절대 경로 :  import { Menu } from '/component/Menu';

두가지 방법이 있다.

상대 경로 vs 절대 경로는 다음에 정리를 하고 

리액트에서 절대 경로로 path를 지정하는 법을 정리해보자.

 

리액트를 다루는 기술에서 보면 

• window 기준 

cross-env를 yarn 으로 설치 후 

package.json 파일의 scripts 부분에 

"scripts": {
    "start": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    .
    .
    .
}

으로 설정하면 된다고 하지만 에러가 난다....

./src/App.js
Module not found: Can't resolve 'pages' in 'C:\Developer\router-tutorial\src'

경로를 못찾는거 같은 느낌이 들어 다른 방법을 찾아 보았고 해결을 하였다.

• package.json 파일을 원상복구 시킨다.
• package.json과 같은 root 에 jsconfig.json 파일을 만든다.
• 아래와 같은 문구를 입력한다.

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

• VScode를 재시작 한다.

재 시작 후 다시 빌드를 해주면 리액트 에서 절대 경로로 path를 잡아 사용할 수 있게 된다.