react 절대경로 설정하기 (jsconfig.json tsconfig.json)

REACT 절대경로 설정방법

SPA Vue나 React로 개발을 하다보면 컴포넌트 별로 파일을 나누게 되는데 컴포넌트를 import로 참조하게 된다.

그럼 아래와 같은 모양을 보게된다.

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

그래서 우린 아래와 같이 굉장히 간단하게 설정하는 방법을 알아보자.

import App from 'components/App';

ENV 생성?

구글링해서 찾은 방법은 .ENV파일을 만들어서 프로젝트 폴더에 넣는 방식이었다.

해보았으나 잘 되지 않았다.

방법은 간단하다. .env파일을 생성하여 아래 구문을 넣는 방법이다.

NODE_PATH=src

webpack.config.js에 아래 구문을 추가해주어야 한다.

"scripts": {
    "start": "NODE_PATH=src node scripts/start.js",
    "build": "NODE_PATH=src node scripts/build.js",
    "test": "NODE_PATH=src node scripts/test.js"
  }

tsconfig.json or jsconfig.json를 생성

다시 찾아보니 처음 .env파일을 생성해서 하는 방법은 예전 방법이라고 해서 jsconfig.json을 생성해서 아래코드를 넣고 해결했다.

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

도움을 받았던 사이트

리액트 절대 경로 사용하기