alias path로 절대경로 세팅하기
평소 공부할때는 필요하지 않았지만 프로젝트에서는 꼭!! 필수로!!! 해야하는 세팅이 있다.
바로바로.....
상대경로를 alias path를 활용하여 절대경로로 바꾸기!
오늘은 그 과정에 대한 포스팅이다. 😇
프로젝트가 간단하다면 import를 할 컴포넌트의 depth가 그렇게 깊숙히 있지는 않다.
컴포넌트를 또 새로운 컴포넌트로 쪼개야 하고, 어느정도 규모가 되는 프로젝트에서는 위와 같이 import를 하는데에만 어지러워질 것이다.
이를 간결하고 직관적으로 처리하기 위해 우리는 config에서 alias path를 통해 절대경로를 세팅해주어야 한다.
이번 프로젝트는 TypeScript+React 프로젝트이므로 CRA(최근 업데이트가 없어 곧 안쓰게될...RIP..)로 우선 개발 환경을 세팅해준다.
개발 환경 세팅 생략...
나는 타입스크립트 환경이기 때문에 tsconfig.json 파일에 세팅을 할거다. (자바스크립트는 jsconfig.json)
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
...
},
"include": ["src"]
}baseUrl과 paths에 위와 같이 alias를 설정해준다.
그런데..
Vite+TypeScript 개발 환경에서처럼 세팅만 하면 끝날 줄 알았는데 왜 런타임 에러가 나는거지..?? (당황)
찾아보니 CRA는 내부적으로 Webpack을 사용하므로, Webpack의 alias 경로 설정과 충돌할 수 있다고 한다.
This error occurs because webpack can’t resolve imports defined using the path aliases in the tsconfig.json file.
An easy fix for this error is to update the webpack configuration to resolve the path alias. However, the default CRA setup doesn’t provide support for modifying the webpack configuration without ejecting, which can be inconvenient.
Fortunately, the CRACO package provides a convenient way to modify configurations for ESLint, Babel, and webpack in a CRA project without needing to eject.
음.. 내가 커스텀한 path alias를 확인할 수 있도록 웹팩 구성을 업데이트 해야하는거군..
Craco는 CRA의 기본적인 Webpack 및 Babel 설정을 재정의하고 확장하기 위한 도구라고 한다.
이걸 활용해서 업데이트 해야겠다!!
npm i -D @craco/craco
npm i tsconfig-paths-webpack-plugin
Craco를 설치해주고, tsconfig-paths-webpack-plugin도 함께 설치해준다.
위 플러그인은 tsconfig.json에서 커스텀한 path alias의 경로가 지정된 모듈을 로드하는데 사용할 수 있다.
이 플러그인을 사용하면 alias 항목을 자동으로 생성하여 webpack.config.js에 따로 추가하지 않아도 된다!! 🐶🍯
// craco.config.js
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
module.exports = {
plugins: [
{
plugin: {
overrideWebpackConfig: ({ webpackConfig }) => {
webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));
return webpackConfig;
},
},
},
],
};
프로젝트의 최상단 경로에 craco.config.js 설정 파일을 추가한다.
// package.json
{
...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
...
}
pakage.json에서 scripts를 craco로 빌드되게끔 수정해주면 진짜 끝!
🌟 Ta-da!!
그 동안 alias path를 사용하지 않았었고, Vite 환경에서 alias path 커스텀을 할 땐 간편했었다.
CRA도 똑같이 간단할거라고 생각했던게 경기도 오산이다..
장점도 많지만, 이런 간단한 일도 웹팩과 충돌되어 한번 더 뭔가를 작업해야하다니.. 게다가 업데이트는 언제 해줄거야..
다음엔 CRA랑 Vite의 장단점 비교를 해봐야겠다 🙃
<Ref>
https://blog.logrocket.com/using-path-aliases-cleaner-react-typescript-imports/
https://www.npmjs.com/package/tsconfig-paths-webpack-plugin