React 상대경로 -> 절대경로 변경
상대경로 설정 시 문제점
import utils from '../../../../utils/my-utils';
와 같이 패키지 구조가 깊어질 경우 임포트하기 번거로워지게 된다.
import utils from 'utils/my-utils';
와 같이 간단하게 임포트할 수 없을까?
지정된 절대경로로 임포트하기
상대경로를 지정된 절대경로로 바꾸는 방법은 세가지 정도 있는듯하다.
- Babel
- Webpack, Fusebox, ... ( module bundlers )
- create-react-app, create-react-app-ts
Babel
- React Native, React
Webpack, Fusebox
- Webpack
- webpack.config.js 설정
resolve: { modules: [ path.join(__dirname, "src"), "node_modules" ] }
- Fusebox
- fuse.js에 homeDir 설정
처럼 homeDir만 지정해주면 homeDirectory기준 '~/utils/my-utils'가 가능하다.FuseBox.init({ homeDir: "src", ...
create-react-app, create-react-app-ts
- .env파일에 NODE_PATH=src/ 설정만 하면 끝.
- 샘플소스
VSCode path 설정.
자바스크립트일 경우 jsconfig.json 타입스크립트일 경우 tsconfig.json 설정을 따로 해줘야한다.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*",
"src/*"
]
}
}
}
Pitfall
- 스토리북 tsconfig 설정 https://github.com/dividab/tsconfig-paths-webpack-plugin