Typescript - 모듈 또는 해당 형식 선언을 찾을 수 없습니다

tsconfig.path.json에서 절대 경로를 명시해줬음에도 불구하고 경로를 인식하지 못하는 상황을 마주 했다
api 와 routes를 왜 인식하지 못했는지 기록하려 한다!

해결 방법

언어에 대한 이해도가 부족해서 생긴 문제였다

타입스크립트에서 모듈 import를 하려면, export를 해줘야 하는데 해주지 않았기 때문이다
그냥 export default 하면 바로 경로를 인식해 온다.

지식 보충

Export 와 Export Default 의 차이는 무엇인가

export는 js 모듈에서 함수, 객체, 원시 값을 내보 낼 때 사용합니다.
내보낸 값은 다른 프로그램에서 imort 문으로 가져가 사용할 수 있습니다

크게 export 방식은 2가지로 나누어집니다. named와 default이죠

named 방식은 export 할 대상의 이름을 명시합니다.
즉 named 방식은 여러 값을 보낼 때 유용합니다. 가져 갈 때는 내보낸 값과 동일함 이름을 사용해야 합니다.

// 먼저 선언한 식별자 내보내기
export { myFunction, myVariable };

// 각각의 식별자 내보내기
// (변수, 상수, 함수, 클래스)
export let myVariable = Math.sqrt(2);
export function myFunction() { ... };

default는 어떤 이름으로도 가져올 수 있습니다. default module을 import 하면 원하는 이름으로 모듈을 임포트 할 수 있는 것이죠
대신 단일 값을 내보낼 때만 주로 사용합니다

정리하면, 한 모듈 내에 export 할 것이 1개이면 default, 2개 이상이면 named 방식으로 사용합니다

mdn web docs 에 더 자세한 내용이 나와 있습니다

타입스크립트의 절대 경로는 어떻게 설정하는가

프로젝트의 root 폴더에 tsconfig.path.json을 선언합니다

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
	"@routes/*": ["src/routes/*"],
	"@api/*": ["src/routes/api/*"]
}}
}

paths에 @[경로]/* : [원하는 폴더의 절대 경로/*]로 미리 매핑합니다
실제로 사용할 때는 import routes from "@routes/index"와 같이 사용합니다