Typescript, Jest환경에서 alias적용하기 (절대경로 import)

---

🧐 절대경로 import ?

보통 디렉토리구조가 복잡하지 않다면 import 시 상대경로로 설정해도 큰 불편함이 없다.
그러나 디렉토리 구조가 복잡할수록 상대경로가 길어지고 보기 안좋아지게 되는데,
나의 경우 테스트코드를 작성하면서 절대경로로 import할 필요성을 느끼게되었다.
디렉토리구조는 아래와 같다.

├── _test/
         ㄴ_reducer/
              ㄴ todo.test.ts
         ㄴ components/
         ㄴ hooks/
          ...
├── src/
         ㄴ _reducer/
              ㄴ todo.ts
         ㄴ components/
         ㄴ hooks/
          ...

src폴더와 같은 deps에 _test폴더가 존재하기때문에
_test폴더의 파일에서 src폴더의 파일들을 import하기 위해서는 조금은 어지러운 상대경로를 설정해야했다.
따라서 이를 간단화하기 위해서 절대경로로 import하는 alias 설정을 찾아봤다.

---

😎 Alias 설정하기

react에서 alias를 설정하는 방법은

1. 직접 바벨,웹팩을 설정하는 경우와
2. CRA를 통해 프로젝트를 구성하는 경우
   에 약간의 차이가 있다.

직접 설정하는 경우 webpack을 직접 수정하여 설정하면 되지만,
CRA에서 webpack을 수정하려면 수정을 위한 모듈을 설치하여 수정해야 한다.
이번 글에서는 CRA에서 Alias를 설정하는 방법을 정리해보겠다.

webpack 수정 모듈 - craco

webpack 수정을 위한 모듈에는 여러가지가 있지만 그 중 craco를 사용하여 수정해보도록하겠다.
craco를 통해 webpack을 수정하기위해 이를 설치해주자.

npm install --save-dev @craco/craco craco-alias

1. tsconfig.paths.json 파일 생성
루트위치에 tsconfig.paths.json을 생성한다.
tsconfig.json의 path를 직접 수정하면 리액트 프로젝트 빌드시, 자동으로 초기화되기때문에 이러한 paths파일을 따로 만들어준다.

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

paths에 원하는 alias를 설정하면 된다.
위와 같이 설정하면 ../../../src/components/TodoList.tsx를 @/components/TodoList.tsx로 상대경로를 지정할 수 있다.

2. craco.config.js 파일 생성
루트위치에 craco.config.js를 생성한다.

// craco.config.js
const CracoAlias = require('craco-alias');

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

3. tsconfig.json파일에 extends를 추가해준다.

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
        ...
      }
    ...
  }

4. jest설정 추가
테스트파일에서도 절대경로를 사용하기위해 jest.config.js의 moduleNameMapper을 수정해준다.

module.exports={
    ...
    moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
}

5. package.json 파일 수정
craco설정을 적용하기위해 package.json파일의 react-scripts를 craco로 수정한다.

"scripts": {  
    "start": "craco start",  
    "build": "craco build",  
    "test": "jest --env=jsdom",  
    "eject": "craco eject"  
}  

---

👍 결과

테스트코드를 포함한 프로젝트 폴더에서 아래와 같이 절대경로를 사용할 수 있게 되었다.

import prepareReduxWrapper from '@/lib/prepareReduxWrapper';
import TodoFilters from '@/components/TodoFilters';

---

🙏 참고

• React에서 root import하기
• React Typescript | 절대경로 적용하기
• root로 import하기
• Webpack, React, Typescript, Jest 환경에서 Alias 적용하기 (절대 경로 import)