[ React ] 절대경로 설정하기

React 프로젝트를 진행할 때 ../../../ 와 같은 상대경로가 아닌 @components/, @pages/ 와 같은 절대경로는 설정하는 방법입니다.

프로젝트를 진행할 때 간단한 페이지면 문제가 없는데, redux같은 상태관리를 사용하거나 component가 늘어나면 ../../../component/ 이런식으로 깊어질 때가 있습니다.

이럴때 절대경로를 통해서 최상위부터 시작하는 방법으로 저는 craco를 사용했습니다.

 

Craco

Craco는 Create-React-App Configuration Override의 약자입니다.

CRA를 사용할 때 webpack을 설정하려면 오버라이딩을 해야하는데 이 webpack을 직접 설정하려면 eject를 해야합니다.

하지만 그렇게하게되면 CRA의 장점들이 사라지게 됩니다. ( 트랜스파일링, 번들링 등 )

그래서 이때 Craco 라이브러리를 사용해서 eject를 하지 않고 webpack 설정을 변경해줍니다.

 

npm

$ npm install @craco/craco

 

package.json

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

 

scripts부분에 react-scripts부분을 craco로 변경해주었습니다.

 

craco.config.js

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@styles': path.resolve(__dirname, 'src/styles'),
      '@json': path.resolve(__dirname, 'src/json'),
      '@items': path.resolve(__dirname, 'src/items'),
    },
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": [
        "src"
    ]
  },
};

 

최상위 경로에 craco.config.js파일을 생성해서 위처럼 오버라이딩 할 설정을 해줍니다.

 

이후 저같은 경우 babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies 이런 경고창이 보였습니다.

 

저같은 경우는 stack overflow를 따라 아래처럼 해결했습니다.

stack overflow 바로가기

$ npm install --save-dev @babel/plugin-proposal-private-property-in-object