리액트 절대 경로 사용하기

CRA (Create React App) 기준으로 작성

 

1. 패키지에서 cross-env 설치

yarn add --dev cross-env

2. pakage.json에서 아래와 같이 수정

 

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

3. jsconfig.json 생성 후 아래 코드로 절대경로 설정

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

 

4. 결과

import logo from 'assets/logo.svg';
import 'pages/main/App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;