[CRA] create-react-app 프로젝트에 module-alias 적용하기
April 21, 2020 - [js, react, create-react-app, module-alias]
프로젝트의 폴더 구조를 개선해 나가다 보면 폴더 구조의 depth 가 깊어짐에 따라 import xxx from '../../../../utils'
와 같이 보기 싫은 코드가 만들어 질 수 있다.
프로젝트/src 폴더 기준으로 간단하게 import xxx from '@/utils'
와 같이 접근하여 사용할 수 있으면 참 좋겠다는 바램이 생긴다. (그리고 module-alias 모듈이 바로 우리의 바램을 만족시킨다)
특별히 CRA로 생성한 프로젝트에 module-alias 를 이용해 path 별칭을 세팅하는 방법을 공유한다.
현재(20년 6월) 모듈 사용시 path에 별칭을 부여하는 기능이 CRA 4.0 의 마일스톤으로 등록되어 있는 중이다. 하지만 그 전에 별칭사용이 꼭 필요하다면 yarn eject
가 필요하다. (eject 없이 CRA의 설정을 오버라이드 하는 꼼수가 없는 것은 아니지만 굳이 그렇게 까지 할꺼면 그냥 eject 하는 것이 낫지 않겠나 싶다)
CRA 앱 추출
(뭔가 세부적인 커스터마이징을 하려면 먼저 이렇게 해야함)
yarn eject
module-alias 설치
(웹팩 빌드타임에만 사용될 것이므로 -D 로 설치)
yarn add -D module-alias
package.json 루트 위치에 별칭 정의
...
"_moduleAliases": {
"@": "src"
}
...
webpack.config.js 에 매핑 정보를 등록
웹팩에서 package.json 에 정의된 매핑 정보를 사용할 수 있도록 또 등록해 줘야 한다
config/webpack.config.js 에 별칭 매핑 정보(appPackageJson._moduleAliases
)를 등록
...
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {}),
...(appPackageJson._moduleAliases || {}),
},
...
appPackageJson
변수는 위쪽에 보면 const appPackageJson = require(paths.appPackageJson)
와 같이 package.json 파일 내용이 담겨 있음을 확인할 수 있다
/scripts/start.js, build.js 에 module-alias 모듈 등록
코드 상단에 적절한 곳에 아래 코드를 삽입한다
// set module-alias
require('module-alias/register')
끝~