[REACT] 리액트 - 절대 경로 설정하기

이번 시간에는 절대 경로 설정 방법에 대해 알려드리도록 하겠습니다.

 

처음 절대 경로를 설정하지 않으면 상대 경로를 이용하여 개발을 진행합니다.

 

상대경로로 이용하면 굳이 코드를 건드리지 않고 작업하기 편하니까요.

 

하지만..../../../ 이런 무한적인 반복으로 인해 먼가 잘못되었다는 것을 깨닫습니다.

 

처음부터 설정하고 작업을 진행 할 것이라는 슬픈 생각에 빠지게 됩니다.

 

절대 경로를 무조건 설정해야 하는 것은 아닙니다.

 

상대 경로든 절대 경로든 여러분들께서 편하신 방법대로 하시면 됩니다.

 

절대경로에 설정은 너무 너무 쉬우니 걱정하지 않으셔도 됩니다.

 

}

Step 1. NPM 라이브러리 설치하기

 

 절대 경로를 편하게 지정하기 위해 만들어져 있는 라이브러리를 사용하도록 하겠습니다. 

$ npm install --save-dev cross-env

 

Step 2. package.json 파일 코드 수정하기

 

 기존에 start와 build를 수정하여 주도록 하겠습니다.

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

 

Step 3. jsconfig.json 파일 생성 후 코드 넣기

 

 파일은 package.json과 동일한 경로에 jsconfig.json 만드시면 됩니다.

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

 : 절대 경로 예제

import { Test } from "components/1/2/Test";

 

 : 상대 경로 예제

import { Test } from "../1/2/Test";

 

수고하셨습니다.