firebase-auth.js 구조 뜯어보기 — 주요 함수와 async/await

잔나비·2025년 9월 1일

Firebase FirebaseAuth JavaScript async await authentication web개발 비동기 프론트엔드

jannabee로그

목록 보기

9/14

Firebase Authentication 기초: 이메일 로그인 전 과정 직접 만들어보기

포스팅에 이어 firebase-auth.js 구조를 좀 더 뜯어보면서 복습하고자 한다.

firebase-auth.js는 무슨 역할을 할까?

firebase-init.js에서 Firebase를 연결해두면,
firebase-auth.js는 그 연결된 auth 객체를 기반으로 사용자 인증 관련 기능을 모아둔 파일이다.
즉, init이 "Wi-Fi 연결", auth.js는 "인터넷 서비스 사용" 단계.

함수 분류 정리 (회원가입 / 로그인 / 비밀번호 / 로그아웃 / 탈퇴)

카테고리	함수명	설명
회원가입	`createUserWithEmailAndPassword`	이메일+비밀번호로 새 계정 생성
	`updateProfile`	프로필(닉네임) 업데이트
	`sendEmailVerification`	가입자 이메일로 인증 메일 발송
로그인	`signInWithEmailAndPassword`	이메일+비밀번호 로그인
	`GoogleAuthProvider` / `GithubAuthProvider`	소셜 로그인 Provider
	`signInWithPopup`	팝업창으로 소셜 로그인 진행
비밀번호	`sendPasswordResetEmail`	비밀번호 재설정 이메일 보내기
로그아웃	`signOut`	현재 로그인된 사용자 로그아웃
탈퇴	`deleteUser`	계정 삭제
	`reauthenticateWithCredential`	이메일/비번으로 재인증
	`reauthenticateWithPopup`	소셜 로그인 계정 재인증
	`EmailAuthProvider`	이메일/비번 Provider 객체 생성

✅ Firebase 함수 이름만 봐도 대부분 역할을 직관적으로 알 수 있다.

async / await 다시 짚기

Firebase 함수들은 서버랑 통신하는 비동기 작업이 많음.
그래서 async/await을 붙여야 순서대로 잘 처리 가능.

async : "이 함수 안에는 기다려야 하는 작업이 있어요" 라고 표시

await : "이 작업이 끝날 때까지 잠깐 멈춰!"
→ 치킨 주문 후, 배달 오기 전까지는 먹을 수 없는 것과 같음.

await 덕분에 "계정 생성 → 프로필 업데이트 → 이메일 발송"이 순차적으로 실행됨.

만약 await이 없으면 서버 응답이 오기 전에 다음 코드가 실행되어 에러 발생 가능.

1️⃣ "비동기(async)"라는 말의 뜻

동기(Synchronous): 일이 한 줄로 차례차례 진행되는 것.
👉 예: 편의점에서 계산대 줄 서기. 앞사람이 끝나야 내가 계산 가능.
비동기(Asynchronous): 동시에 여러 일을 처리할 수 있는 것.
👉 예: 배달 주문하기. 치킨 시키고, 치킨이 올 때까지 공부도 하고 빨래도 할 수 있음. 치킨이 다 와야 먹을 수 있듯이, "결과는 나중에" 옴.

✔️ 자바스크립트에서 서버랑 통신하는 대부분의 작업은 비동기다.
왜냐면 서버 응답이 언제 올지 모르니까, 기다리는 동안 프로그램이 멈추면 안 되기 때문.

2️⃣ 왜 await라는 단어를 쓸까?

await 은 "이 비동기 함수가 끝나서 결과를 돌려줄 때까지 멈춰라"라는 의미
그 동안 아래 줄 코드들은 실행되지 않고 기다린다.
createUserWithEmailAndPassword 같은 파이어베이스 내장 함수는 실행되고 나면 Promise(결과 약속)를 돌려준다.
await 덕분에, 이 약속값이 돌아오기 전까지 아랫줄의 코드들은 실행되지 않고 오류를 막을 수 있다.

3️⃣ try/catch 라는 표현은 왜 쓸까?

"에러가 날 수도 있는 코드를 시도해보고, 에러가 나면 그걸 잡아서 처리하겠다"는 의미.

try {
  const user = await createUserWithEmailAndPassword(auth, email, password);
  console.log("회원가입 성공:", user);
} catch (error) {
  console.log("회원가입 실패:", error.message);
}

try = 유저한테 이메일이랑 비밀번호 받아서 회원정보 생성하는 것 시도
catch = 만약 정보가 안 오거나, 오류가 생기면 그 상황을 잡아서 알려줘.
try / catch 구문 덕분에 프로그램이 중간에 뻗어버리고 나머지 코드가 실행 안 되는 상황을 방지할 수 있다.

이 js파일에서도 마찬가지로
임포트를 했으니 익스포트를 한다.

export는 왜 할까?

firebase-auth.js에서 만든 함수를 다른 파일에서 쓸 수 있도록 공개하는 역할.
예시:

// firebase-auth.js
export const logout = async () => {
  await signOut(auth);
};

// dashboard.js
import { logout } from './firebase/firebase-auth.js';