Preiew
- babel.config.js에 경로를 추가합니다.
- tsconfig.json에 경로 추가해서 vscode가 인식할 수 있게 만들어줍니다.
- metro server 캐시를 리셋해줍니다. (이것 때문에 삽질함)
babel.config.js
"babel-plugin-root-import",
{
paths: [{ rootPathSuffix: "./src", rootPathPrefix: "~/" }],
},
src/components 디렉토리를 절대경로로 추가해보겠습니다.
"babel-plugin-root-import",
{
paths: [
{ rootPathSuffix: "./src", rootPathPrefix: "~/" },
{
rootPathSuffix: "./src/components",
rootPathPrefix: "@components/",
},
],
},
rootPathSuffix에는 진짜로 경로를 적어주고 rootPathPrefix에는 우리가 사용할 alias를 설정해주면 됩니다.
tsconfig.json
vscode에서 우리가 설정한 경로를 인식시키기 위해 tsconfig.json 파일에서도 경로를 설정해줍시다.
"baseUrl": "./"
"paths": {
"~/*": ["./src/*"],
"@components/*": ["./src/components/*"]
}
캐시 리셋!
설정을 변경했으면 캐시리셋과 함께 서버를 다시 시작해줍니다.
$ yarn start --reset-cache
그럼 절대경로가 잘 적용되는 것을 확인할 수 있습니다.
'Frontend' 카테고리의 다른 글
Throttle와 Debounce (0) | 2022.08.26 |
---|---|
Code Splitting 테스트해보자 (0) | 2022.08.26 |
Next.js + Jest + Testing-library 환경설정하기 (0) | 2022.08.26 |
Redux + Redux-thunk 동작원리 (0) | 2022.08.26 |
webpack guide 정리 (0) | 2022.08.26 |