VS Code에서 TypeScript 경로 Alias 적용 오류 해결하기(tsconfig.json vs tsconfig.app.json)

리액트 프로젝트에서 tsconfig.json을 수정했는데도 VS Code에서 alias 관련 밑줄 오류가 계속 발생하는 문제를 겪었다.
결과적으로 tsconfig.app.json도 함께 수정해야 해결되었는데, 그 과정과 원인을 정리해보았다.

---

문제 상황

경로 Alias 설정을 추가했지만 VS Code에서 오류 발생

처음에 tsconfig.json에서 경로 Alias를 추가했다.

tsconfig.json 변경

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
      "@pages/*": ["pages/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"]
    }
  }
}

하지만

• VS Code에서 import { HomePage } from "@pages";와 같은 코드에서 빨간 밑줄이 계속 표시됨.
• 프로젝트를 실행하면 정상 동작하지만, VS Code가 경로를 인식하지 못함.

---

문제 원인: tsconfig.json이 아니라 tsconfig.app.json이 적용됨

VS Code는 tsconfig.json을 사용하지 않고, tsconfig.app.json을 기반으로 TypeScript 설정을 해석하고 있었음

확인 방법

1. VS Code에서 Go to Project Configuration (Ctrl + Shift + P) 실행
2. 이동된 파일을 확인해보니 → tsconfig.app.json이 열림

즉, VS Code가 tsconfig.app.json을 기반으로 TypeScript 설정을 적용하고 있었기 때문에, tsconfig.json만 수정해서는 오류가 해결되지 않았던 것

---

해결 방법: tsconfig.app.json에도 같은 설정 추가

tsconfig.app.json 수정

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"],
      "@pages/*": ["./pages/*"],
      "@components/*": ["./components/*"],
      "@layouts/*": ["./layouts/*"]
    }
  },
  "include": ["src"]
}

이후 VS Code를 재시작하니 오류가 사라짐

---

왜 tsconfig.app.json을 수정해야 했을까?

• tsconfig.json은 최상위 설정 파일로, 다른 설정 파일을 확장(extends)하는 역할만 함.
• 실제 src/ 내부의 TypeScript 코드(AppRouter.tsx 등)는 tsconfig.app.json의 설정을 따름.
• 따라서 tsconfig.app.json에도 같은 설정을 추가해야 VS Code가 alias를 정상적으로 인식할 수 있음.

---

결론

• TypeScript 설정이 tsconfig.json에서 바로 적용되지 않는다면, tsconfig.app.json을 함께 확인해야 한다.
• VS Code는 tsconfig.app.json을 기준으로 TypeScript 설정을 인식하기 때문에, tsconfig.json만 수정해도 반영되지 않을 수 있다.
• TypeScript 서버를 재시작하고 적용하면 확실한 해결이 가능하다

---

이 경험을 통해 TypeScript 설정 파일(tsconfig.json vs tsconfig.app.json)이 어떻게 적용되는지 더 깊이 이해할 수 있었다
다음에 비슷한 문제가 발생하면 바로 Go to Project Configuration을 실행해 확인해보자