[angular] 웹 파이어베이스 연동 구성

목차

  1. 파이어베이스 프로젝트 만들기
  2. 앵귤러 프로젝트 설정
  3. 파이어베이스와 앵귤러 연동

1. 파이어베이스 프로젝트 만들기

먼저 파이어베이스 콘솔에 접속하여 새로운 프로젝트를 만듭니다. 프로젝트를 만든 후, 애플리케이션을 추가하고 구성하세요. 애플리케이션을 구성할 때, 웹 앱의 설정을 확인하고 해당 설정을 나중에 사용할 것입니다.

2. 앵귤러 프로젝트 설정

앵귤러 프로젝트를 생성하고 작업할 디렉토리로 이동하세요. 그리고 firebase CLI를 사용하여 파이어베이스를 설치하세요.

npm install -g firebase-tools

3. 파이어베이스와 앵귤러 연동

앵귤러 프로젝트의 environment.ts 파일을 열고, 파이어베이스에서 제공한 설정을 사용하여 environment.firebase 객체를 설정하세요. 그리고 필요한 모듈을 가져옵니다.

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

파이어베이스 앱을 초기화하고 인증 및 데이터베이스 모듈을 초기화합니다.

const firebaseConfig = {
  // 파이어베이스에서 제공한 설정
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

이제 앵귤러 앱에서 파이어베이스를 사용할 수 있습니다. 필요한 경우 Firebase SDK를 사용하여 데이터를 읽고 쓰거나 사용자 인증을 구현할 수 있습니다.

이렇게 하면 앵귤러 애플리케이션과 웹 파이어베이스를 간단히 연동할 수 있습니다. 파이어베이스를 사용하면 데이터베이스 및 인증과 같은 기능을 쉽게 구현할 수 있어 개발 시간을 단축할 수 있습니다.