typescript + react + emotion 환경에서 path alias 설정해주기

create-react-app, typescript, emotion으로 React 프로젝트 시작하기

React와 typescript 는 npx create-react-app 폴더명 --template typescript를 이용하여 설치하였고,
기본적인 emotion, babel, eslint, prettier 설정은 위의 페이지에서 보고 배우며 설정했다.

문제 발생

import { MainPage } from '../../../../Pages'

이 것 까진 아니었지만, 파일 경로가 길어진다는 문제점이 있었다...
그러다 path alias 를 알게 되었고, 설정을 이것 저것 찾아보았다. tsconfig.json 을 설정해주면 된다고 해서 설정하고 돌려봤지만..

하늘은 너무 무심하셨다.
나답지 않게 삽질을 하지 않고 성공할 거란 예상은 하지도 않았음에도 슬펐다 .. 멈춰 오류 ..

그러다 어찌어찌 tsconfig.json에서 paths를 설정해주어도 경로를 찾아가지 못하는 문제가 존재하였다...

해결

Creating path aliases in create-react-app with react-app-rewired

두 시간 삽질하고 위와 같은 페이지를 알아버렸다....!

	// tsconfig.json 

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

// config-overrides.js
const {
  useBabelRc,
  removeModuleScopePlugin,
  override,
  addWebpackAlias,
} = require('customize-cra')
const path = require('path')

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

config-overrides.js 파일에서 WebpackAlias 를 설정해주면 아름답게.. 아름답게 !! 단축해서 사용이 가능하다.⏤config-overrides.js 파일을 웹팩을 오버라이딩 해준다