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 파일을 웹팩을 오버라이딩 해준다
Author And Source
이 문제에 관하여(typescript + react + emotion 환경에서 path alias 설정해주기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mingsomm/typescript-react-emotion-환경에서-path-alias-설정해주기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)