React Typescript 프로젝트 절대경로 설정하기

이전부터 craco를 사용하여 타입스크립트 절대경로 셋팅하던 나

craco가 deprecated 되었다는 어마무시한 소식을 들어버렸다. 😱

따라서 이번 사이드 프로젝트에서는 어떤 라이브러리로 셋팅을 할까 하다가 ‘react-app-rewired’로 결정했다.

이 글은 내가 까먹지 않기 위함 + 나처럼 React typescript Project 절대경로 셋팅을 위해 craco 라이브러리를 사용하시던 분들을 위한 글이다.

Setting 순서

1. react-app-rewired downloads

• create-react-app 2.x or Webpack 4

npm install react-app-rewired --save-dev

• create-react-app 1.x or Webpack 3

npm install react-app-rewired@1.6.2 --save-dev

필자는 조건에 맞는 첫 번째 방법으로 다운로드했고, 그 결과 2.2.1 버전이 설치되었다.

2. config-overrides.js 작성

package.json과 같은 레벨 즉 프로젝트 최상위 레벨에

config-overrides.js 파일을 만들어 해당 내용을 복사, 붙여넣기 해준다.

나는 _로 절대경로를 셋팅하기 위해 다음과 같은 alias를 적었지만, 원하는 규칙대로 작성하면 된다.

const path = require("path");
const { override, addWebpackAlias } = require("customize-cra");

module.exports = override(
  addWebpackAlias({
    _: path.resolve(__dirname, "src"),
    // '@': path.resolve(__dirname, 'src'), 사용하지 않는 규칙
  })
);

@로 절대경로 셋팅도 많이 하시던데, CRA typescript에서는 이미 상위에 @types 경로를 갖는 다른 폴더가 존재한다.

따라서 @types만 또 따로 설정해줘야 하는 불편함이 있었다.. 🤔 (결론: 언더바가 더 편하다.)

3. tsconfig.json 수정

이제 tsconfig.json에 config-overrides.js에 작성해줬던 규칙 기반으로 paths를 설정해줘야 한다.

하지만 tsconfig.json의 paths 옵션은 컴파일 시 사라지는 이슈가 있다.

⇒ 따라서 확장할 부분(paths)만 별도의 파일에 작성하여 extends 옵션을 이용하는 방법을 택했다.

tsconfig.json과 같은 레벨에 tsconfig.paths.json 파일을 만들어준다.

config-overrides.js에 작성했던 규칙과 동일하게 paths 옵션을 작성해준다.

baseUrl은 tsconfig.json compileOptions 안에 있으므로 별도로 추가해 줄 필요가 없다.

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

tsconfig.paths.json을 작성해 줬으면, 이제 tsconfig.json을 수정해주자.

extends 옵션을 추가해 tsconfig.paths.json의 경로를 지정해준다.

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": ".",
    "allowJs": true,
    "checkJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": ["src"],
  "exclude": ["node_modules", "build"]
}

4. package.json 수정

react-script 기반으로 실행되던 app을 react-app-rewired 기반 실행으로 변경해줘야 한다.

package.json의 scripts 옵션을 다음과 같이 변경해주자.

// package.json
// react-script를 전부 react-app-rewired로 변경
// ...

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

5. 적용

이제 설정해 준 _/디렉토리이름 규칙을 사용할 수 있다!

만약 계속해서 빨간색 오류가 출력된다면, vscode를 한번 종료했다가 다시 실행시키자.

너무 깔끔하다! 👍

(+) 번외

eslint에서 config-overrides.js에 대해 계속 오류를 뱉는다. 🤮

이때 eslint ignaorePatterns 옵션을 추가함으로써 config-overrides.js의 checking을 끌 수 있다.

// .eslintrc.js
// ...

ignorePatterns: ['config-overrides.js'], // 이 옵션을 추가한다.

마무리

절대경로 세팅으로 모두들 깔끔하게, 가독성 좋게 프로젝트 코드를 구성할 수 있었으면 좋겠다.

혹시 문제가 있거나 추가적인 궁금증이 있다면 댓글로 달아주시길 🙇🏻‍♀️

출처

https://github.com/timarney/react-app-rewired#readme