기존 상대경로 import의 불편함

Create React App(CRA)로 프로젝트로 구성하면 다른 컴포넌트, css 등 파일등을 import 할 때 ../../../......으로 표현해야 하는데, 코드를 짜거나 나중에 프로젝트를 이해할 때 힘들다.

import './app.css';

절대경로로 설정

webpack 설정 변경

CRA로 만든 프로젝트는 webpack 설정이 숨겨져있다.
그러므로 webpack 수정을 하려면 Eject를 하여 webpack설정을 꺼내서 수정해야한다.
번거롭기 때문에 다른 방법을 찾았다.
이글에서 스킵...

craco 라이브러리 사용

craco(Create React App Configuration Override)라이버리를 사용하여 craco에서 설정한 값을 CRA의 설정값을 덮어씌워준다.

설치

npm or yarn으로 설치한다.

npm install @craco/craco --save
# OR
yarn add @craco/craco

craco.config.js 파일 생성 및 설정

프로젝트 최상단 루트경로에 craco.config.js 파일을 생성한다.

const path = require("path");
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
      '@components': path.resolve(__dirname, "src/components/"),
      '@images': path.resolve(__dirname, "src/assets/images/")
    }
  }
}

package.json 파일 수정

package.json에 있는 scripts부분을 아래와 같이 수정한다.

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

alias 적용

위와같이 설정하면 src폴더 경로를 @로 설정할 수 있다.

import '@/app.css';