| Webpack (CRA 또는 nextjs) | Vite |
| tsconfig.json만 설정 | tsconfig.json만 설정 vite.config.js 에도 path 설정이 필요 |
|
tsconfig.json
"paths": { "@/*": ["*"],
"@components": ["components"],
"@components/*": ["components/*"],
"@layouts": ["layouts"],
"@layouts/*": ["layouts/*"]
}
|
tsconfig.json
"paths": { "@/*": ["*"],
"@components": ["components"],
"@components/*": ["components/*"],
"@layouts": ["layouts"],
"@layouts/*": ["layouts/*"]
}
vite.config.js resolve: {
alias: [
{ find: '@', replacement: path.resolve(__dirname, 'src') },
{
find: '@components',
replacement: path.resolve(__dirname, 'src/components'),
},
{
find: '@layouts',
replacement: path.resolve(__dirname, 'src/layouts'),
},
],
},
|
자세한 내용은 아래 링크를 참조
typescript paths 관련 문제 3가지와 해결책
typescript로 nodejs나 react 프로젝트를 진행할 때 paths를 설정하면 경로를 깔끔하게 관리할 수 있다.가령 이런 경로를이렇게 사용할 수 있는 것이다.그런데 사용하다보면 이런저런 문제가 발생한다.
velog.io
[Vite] Vite 환경에서 path alias 설정하기
Vite에서 path alias 설정하기
velog.io
'IT > React + TypeScript' 카테고리의 다른 글
| Redux vs. React Context 어떤것을 써야할까? (0) | 2021.03.24 |
|---|---|
| Webworker 언제 사용 해야 될까? (0) | 2020.02.28 |
| Jest 절대경로 설정(script: test 에 적용) (0) | 2020.01.14 |
| package-lock.json 또는 yarn.lock 왜 필요한가? (0) | 2020.01.06 |
| 정말 쉽게 Dispatch & states 를 Redux Hooks 사용하기 (0) | 2019.06.26 |