아무생각없이 임포트를 하다보면
'../../../styles/theme/Theme'
과 같이 뭘 가져왔는지는 알겠는데, 이게 대체 어디있는걸 가져온건지 모르겠는 난감할 때가 많다.
"compilerOptions": {
"baseUrl": ".",
},
"include": [
"src"
]
}
위와같이 설정을 하고,
src
┗─index.tsx
│ app.tsx
│ components/
│ ┗─home/
│ index.tsx
styles
┗─theme/Theme.ts
cssStyles/reset.css
프로젝트가 위와같이 구성이 되어있다고 한다면,
import { Container } from 'src/components/home/index'
import { Theme } from 'styles/theme/Theme'
과 같이 임포트를 할 수 있다. from뒤의 폴더경로를 모두 써줘야하는 귀찮음이 있지만, 프로젝트 구조를 명시적으로 입력하여 가독성이 좋아지는 장점이 있는것 같다.
이 분의 블로그를 참고해서 사용했었다.
React Typescript | 절대경로 적용하기(feat.React-CRA)
구체적인 설명은 위의 블로그에 있으니 생략한다.
craco를 사용함으로써 얻는 장점은 프로젝트 구조를 잘 알고 있다는 전제하에 import 루트를 여러군데로 설정할 수 있어서 from뒤의 폴더 경로를 짧게 입력할수 있다는 장점이 있다. 둘 다 써봤는데, 나는 결국 tsconfig 파일만 수정하는 방법으로 돌아가긴 했지만 craco도 충분히 익숙해지만 효과적인 방법인것 같다.