CRA에서 alias 설정

• 작성자: J196_주효정

---

tsconfig.json 파일 옵션 중 paths 옵션을 사용하면 baseUrl을 기준으로 관련된 위치에 경로 매핑 목록을 지정할 수 있다.

{
	"compilerOptions" : {
		"baseUrl": "./src",
    "paths": {
      "@assets/*": ["./assets/*"],
      "@components/*": ["./components/*"],
      "@context/*": ["./context/*"],
      "@data/*": ["./data/*"],
      "@hooks/*": ["./hooks/*"],
      "@types/*": ["./types/*"],
      "@utils/*": ["./utils/*"]
    }
	}
}

• baseUrl : 경로의 시작점이 되는 메인 디렉토리 설정
• paths : baseUrl 내부에 위치한 세부 디렉토리를 alias로 지정 가능

문제❗️

CRA로 생성한 프로젝트의 경우 tsconfig.json에 특정 조건(path 관련 속성 등)이 있는 경우 구동 시점에 이를 초기화한다

paths 속성은 CRA webpack이 받아들이지 못하고 초기 생성시 만들어지는 tsconfig.json 파일로 초기화

→ webpack을 eject 하면 모든 설정 파일을 직접 관리해야하는 문제가 발생해서 비효율적

→ craco를 사용해서 CRA의 설정을 덮어쓰자

craco (Create React App Configuration Override)

• eject 없이 craco 설정파일만으로 CRA의 설정을 오버라이드 할 수 있도록 도와주는 라이브러리

craco-alias

• craco 플러그인으로 webpack에서 alias를 설정할 수 있도록 해줌

const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: './src',
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
};

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

• script를 다음과 같이 수정하고 npm run start로 실행하면 craco로 선언해둔 설정이 CRA의 webpack 설정을 오버라이드해서 실행된다

https://www.npmjs.com/package/@craco/craco

https://github.com/risenforces/craco-alias