CRA 기반의 어플리케이션에서 절대경로를 적용해보려고한다.
🙏 koesnij님의 블로그를 참고하였습니다 😁

why

상대 경로를 사용해 앱을 개발하다보면 폴더 구조가 복잡해질수록 import 가독성이 떨어지게된다. 가독성 좋아지게하려면 절대경로로!

// relative path
import Button from '../../../../../Button';

// absolute path
import Button from '@/components/Button';

설정

Next와 CRA 환경에서의 설정차이

• 기존 Next 프로젝트에서는 jsconfig.json과 tsconfig.json만 수정하면 자동으로 absolute import가 가능했다.

• 하지만 CRA에서는?

// tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }

  (...)
}

다음과 같이 설정할 경우 에러가 발생한다.

CRA에서 paths 설정을 수정하면 tsconfig.json을 초기화시킨다. CRA는 Webpack 설정이 숨겨져 있고 이를 수정하려면 프로젝트를 eject 해야 하는데, 한번 eject 하면 다시는 되돌릴 수 없고 많은 설정 파일들이 그대로 노출되기 때문에 가독성이 떨어지게 된다.

CRA에서는 어떻게해!!

craco 라이브러리를 사용하자 🐙 크라코씨 도큐멘트

craco

craco는 기존 프로젝트의 웹팩을 eject 하지 않고도 설정을 바꾸게 해주는 라이브러리이다. ( CRA Configuration Override )

• 설치하기

npm i @craco/craco

• package.json 수정하기

// package.json

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
    // 기존 react-scripts 대신 craco를 사용한다.

  (...)
}

• craco.config.js 파일 생성 설정하기

// craco.config.js

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    },
  },
  jest: {
    configure: {
      moduleNameMapper: {
        '^@(.*)$': '<rootDir>/src$1',
      },
    },
  },
};

이 설정파일을 통해 CRA에서 webpack alias 설정을 덮어쓸수있게된다.

craco 정리

기존 CRA 프로젝트에서는 웹팩을 eject할 수 없다. 설정파일들이 전부 노출되어 가독성이 떨어지고, 한 번 eject하면 되돌릴 수 없기 때문이다. 그렇기에 eject하지 않고 덮어쓰게해주는 craco 라이브러리를 사용한다.

VScode 설정하기

우리가 사용할 개발 툴의 설정도 추가해주어야한다. 위 과정은 프로덕트를 위한 작업이라면, 지금은 프로덕트 제작을 돕기위한 과정.

아래 설정들은 VSCode가 경로를 추적할 수 있게 해준다. 위에서 한 설정들은 웹팩을 이해시키는 과정이고, 아래 설정들은 @을 VSCode가 이해하고 Autocomplete나 Intelisense 기능을 가능하게 한다.

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
 
  (...)

  "include": [
    "src",
    "craco.config.js"
  ],
}

이렇게 하더라도 VScode가 자동완성 해주는 경로는 절대경로가 아니다.

// .vscode/settings.json

{
  "typescript.preferences.importModuleSpecifier": "non-relative"
}