왜 import에 빨간줄이 뜨는가?

오류메시지

원본메시지

'Auth' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.ts(1484)
(alias) interface Auth
import Auth
Interface representing Firebase Auth service.

@remarks
See Firebase Authentication for a full guide on how to use the Firebase Auth service.

@public

결론: 타입인 Auth를 구분하지 않고 import해서 빨간줄이 뜸

왜 분리해야 할까?

1. TypeScript의 타입/값 구분

TypeScript는 컴파일 타임과 런타임을 구분합니다:

// Auth는 "타입"입니다 (컴파일 후 사라짐)
type Auth = { ... }

// getAuth는 "값"입니다 (런타임에 실행됨)
function getAuth() { ... }

2. Firebase의 Export 구조

Firebase v9+는 다음과 같이 export합니다:

// firebase/auth 패키지 내부 구조
export function getAuth() { ... }        	// 값 export
export function signInWithEmail() { ... } 	// 값 export
export type Auth = { ... }               	// 타입만 export
export type User = { ... }               	// 타입만 export

3. 문제가 발생하는 이유

// ❌ 이렇게 쓰면:
import { getAuth, Auth } from 'firebase/auth';

TypeScript는 Auth가:

• 실행 가능한 값인지? (함수, 클래스, 객체)
• 컴파일 시에만 쓰이는 타입인지?

를 구분하지 못해 혼란스러워합니다.

올바른 해결 방법

✅ 방법 1: type 키워드 사용

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import type { FirebaseApp } from 'firebase/app';
import type { Auth } from 'firebase/auth';

// 명확하게 구분됨:
// - initializeApp, getAuth: 런타임 값
// - FirebaseApp, Auth: 컴파일 타임 타입

✅ 방법 2: 한 줄에 혼합 (TypeScript 4.5+)

import { getAuth, type Auth } from 'firebase/auth';
//                ^^^^ 이 타입만 type으로 표시

장점 정리

구분	장점
번들 크기	타입은 컴파일 후 제거되어 최종 JS 파일에 포함 안 됨
명확성	타입과 값의 역할이 코드에서 명확히 보임
에러 방지	TypeScript가 정확히 검사할 수 있음
Tree-shaking	사용하지 않는 코드 자동 제거가 더 잘 됨