Firebase measurementId가 없어도 앱이 정상 작동하는 이유
"왜 어떤 프로젝트는 measurementId가 있고, 어떤 프로젝트는 없어도 잘 돌아갈까요?" Firebase의 핵심 기능(Auth, Firestore)과 부가 기능(Analytics)의 차이점 및 올바른 초기화 방법을 알아봅니다.
Q: ijm 프로젝트는 measurementId 파이프라인이 없는데 왜 작동하나요? 이거 용도가 뭔가요?
Firebase 콘솔에서 웹 앱을 등록하면 7개의 키가 담긴 `firebaseConfig` 객체를 줍니다. 여기서 유독 눈에 띄는 것이 맨 마지막의 `measurementId`입니다.
A: measurementId는 오직 "구글 애널리틱스(방문자 통계 추적)"를 위한 전용 키이기 때문입니다.
상세 설명: 핵심 6대 키 vs 부가 기능 키
`apiKey`, `authDomain`, `projectId` 등 상단의 6개 키는 로그인(Auth)이나 데이터베이스(Firestore) 접근을 위한 필수 뼈대입니다. 이 친구들이 없으면 Firebase 자체가 작동하지 않습니다.
하지만 `measurementId`는 선택 사항입니다. 만약 내 앱이 단순히 로그인 기능만 필요하고 사용자 방문 통계는 알 필요가 없다면, 과감히 지워버려도 아무 문제가 없습니다.
Q: 그럼 굳이 애널리틱스를 쓰려면 어떻게 해야 하나요?
통계 추적이 필요한 프로젝트(예: `quizzer` 앱)라면 `measurementId`를 환경변수에 넣고 코드를 추가해야 합니다. 단, 주의할 점이 있습니다.
A: SSR(서버 사이드 렌더링) 환경인 Next.js에서는 반드시 브라우저(window) 환경인지 체크하고 초기화해야 합니다.
상세 설명: Next.js에서의 올바른 Analytics 초기화
구글 애널리틱스는 오직 "브라우저(사용자의 화면)"에서만 작동합니다. 따라서 Next.js의 서버(Node.js)에서 빌드할 때 무턱대고 `getAnalytics()`를 호출하면 런타임 에러가 발생하며 앱이 뻗어버립니다.
반드시 `if (typeof window !== "undefined") { analytics = getAnalytics(app); }` 처럼 클라이언트 환경인지 방어 코드를 짜주어야 서버 빌드와 클라이언트 통계 추적이 모두 평화롭게 공존할 수 있습니다.
이정마 에디터
Frontend Developer
구글 콘솔에서 복사해 온 Firebase Config를 무지성으로 붙여넣지 마세요. 내가 정말 "방문자 통계" 기능이 필요한지 한 번만 고민해 보면 코드가 훨씬 가벼워집니다.