[트러블 슈팅] JS → TS 마이그레이션 과정에서 절대 경로 및 Barrel 패턴 이슈

🎯 문제 상황

포트폴리오 프로젝트를 JavaScript에서 TypeScript로 마이그레이션하는 과정 문제 발생

- 상대 경로(../../)를 절대 경로로 변경하기 위해 @ 별칭(alias)을 설정했으나,
import 시 src가 아닌 node_modules를 기준으로 탐색

- tsconfig.json에서 baseUrl, paths 설정을 모두 적용했음에도 불구하고
.jsx 파일에서는 설정이 정상적으로 동작 하지 못함

- index.ts에서 Barrel 패턴(export *)을 활용하려 했으나 TypeScript에서 import가 정상적으로 처리하지 못함

---

🔍 원인 분석

- TypeScript 경로 별칭 설정은 TS 파일(.ts, .tsx) 기준으로만 정확히 적용

- 기존 파일이 .jsx 확장자일 경우, tsconfig.json의 설정이 정상적으로 반영되지 않음

- Barrel 패턴 사용 시, TypeScript는 기본적으로 .ts 확장자를 명시한 import를 허용하지 않음

---

📃해결방법

1 tsconfig.json 경로 별칭 설정

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

- baseUrl을 프로젝트 루트로 설정

- @/ 입력 시 src 디렉토리를 기준으로 모듈을 탐색하도록 설정

---

2. index.ts에서 Barrel 패턴 사용 설정

{
    "compilerOptions": {
    "allowImportingTsExtensions": true
    }
}

- index.ts에서 .ts / .tsx 모듈을 확장자 포함하여 import 가능