React를 포함한 프론트엔드 프로젝트를 진행하다보면 소스파일의 폴더구조가 깊어지고 해당 코드를 import
하려면 상대참조로 너무 길어져서 읽기어렵고 복잡하게 보이는 경우가 있다.
이럴 경우 typescript의 paths alias 기능을 사용하면 훨씬 가독성있게 설정할 수 있다.
예시
설정 전
import util from '../../../../src/funcs/util';
설정 후
import util from '@funcs/util';
프로젝트 폴더 최상위에 있는 tsconfig.json
파일에 paths 옵션에 경로를 축약하고싶은 값을 입력한다.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components": ["./src/components/module"],
"@funcs": ["./src/funcs"],
"@api": ["./src/api/api"],
"@styles": ["./src/components/styles"]
}
}
}
이렇게까지만 해도 에디터 상에서는 문제없이 /src/funcs 경로를 @funcs 라는 별칭으로 자동완성이 되고 import도 할 수 있다.
하지만 실제로 실행해보거나 build하게되면 해당 module을 찾을 수 없다는 오류가 발생할 것이다.
React, React-Native 등의 코드는 babel을 통해 js로 트랜스파일링되는데 소스코드 상에 작성한 @funcs/util
의 경로는 babel이 모듈로 인식하여 node_modules에서 찾아서 그렇다. node_modules가 아니라 내가 정한 path 규칙에 맞는 폴더경로를 찾도록 하려면 추가 패키지를 설치 후 babel 설정을 해줘야 한다.
npm install --save-dev babel-plugin-module-resolver
react-native 를 expo로 시작했다면 최상위 경로에 babel.config.js
파일이 있을 것이다.
다음과 같이 plugins에 module-resolver
관련 설정을 추가해준다.
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
"expo-router/babel",
[
"module-resolver",
{
root: ["."],
alias: {
"@components": "./src/components/module/",
"@funcs": "./src/funcs/",
"@api": "./src/api/api",
"@styles": "./src/components/styles/",
},
},
],
],
};
};
여기까지하면 에디터 상에서 자동완성, import 는 물론이고 실행했을 때도 정상적으로 동작한다.
alias로 등록한 경로에 index.ts
을 만들어서 named export 를 등록해두면 import할 때 저 효율적으로 할 수 있을 것이다.
정리가 잘 된 글이네요. 도움이 됐습니다.