React + TypeScript 환경에서 절대경로 사용하기

이번 포스팅에선 React와 TypeScript 환경에서 절대경로 사용하는 법에 대해서 알아보도록 하자.

이전 포스팅에서 CRA로 프로젝트를 생성한 후 ESLint, Prettier 설정까지 마무리했다. 이어서 절대경로까지 진행해보겠다.

현재 CRA를 통해 프로젝트를 생성했기 때문에 webpack에 alias 설정을 통해 절대경로를 설정 할 수가 없다.
정확히 말해서 할 수는 있지만 eject를 해야하는 위험이 있다. 절대경로 하나 때문에 eject를 하기는 그렇고 다른 방법을 통해 설정해보도록 하겠다.

먼저 아래의 패키지를 설치한다.

# cra에서 webpack 또는 babel를 오더라이딩 할 수 있도록 해주는 패키지

npm i -D customize-cra react-app-rewired

위의 패키지를 설정했다면 package.json의 스크립트 파일을 수정해줘야 한다.
아래와 같이 수정해주자.

scripts: {
  ...,
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom",
  "eject": "react-scripts eject",
  ...,
}

이제 웹팩을 오버라이딩할 수 있다.
프로젝트 root 경로에 config-overrides.js 를 만들어 웹팩을 오버라이딩 할 수 있다.

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

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
  }),
);

아직 끝이 아니다.
우리는 타입스크립트를 사용하고 있기 때문에 타입스크립트에서 이해할 수 있도록 설정을 또 해줘야한다.

프로젝트 root 경로에 tsconfig.paths.json 파일을 만든다

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

이제 마지막 설정만 남았다. tsconfig.json에서 tsconifg.paths.json에서 설정한 내용을 이해할 수 있도록 추가 설정을 해줘야한다.

{
	...,
	"include": [],
	"extends": "./tsconfig.paths.json"  -> 추가
}

이제 모든 설정이 끝났으니 제대로 동작하는지 확인해보자. index.tsx 파일을 다음과 같이 수정하고 프로젝트를 실행하면 정상적으로 동작하는 것을 확인할 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from '@/App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

이제 절대경로 설정까지 마무리했다. 다음 포스팅에선 antd 라이브러리를 적용해보자.