[Firebase] 웹 프로젝트를 위한 Firebase 사용법 - (1) Firebase 시작하기

안녕하세요. 개발자 우디예요. 해당 블로그 포스팅은 개발과 관련된 내용을 정리하는 과정에서 작성되었습니다.

 

웹 프로젝트를 위한 Firebase 사용법 - (1) Firebase 시작하기

 

개요

Firebase를 사용한 웹 개발에 대해 알아보려고 합니다. 이번 내용은 Firebase 프로젝트를 어떻게 생성하고 웹 서비스에 액세스 할 수 있는 방법에 대해 알아봅시다. 

 

1. Firebase 프로젝트 만들기 

firebase를 사용하려면 우선 firebase에서 프로젝트를 생성해야 합니다. 다음 이미지 순서대로 따라 하시면 파이어베이스 프로젝트를 생성하실 수 있습니다😄

firebase 홈페이지 =>https://www.firebase.google.com

1. firebase 홈페이지 진입

2. firebase 프로젝트 추가하기

3. firebase 프로젝트 이름 입력

4. 구글 애널리틱스

저는 학습을 위한 프로젝트로 별도로 구글 애널리틱스를 사용하지 않았습니다. 최종 프로젝트 만들기 버튼을 클릭하시면 파이어베이스 프로젝트가 만들어집니다.

 

2. Firebase 앱 등록

Firebase 프로젝트가 생성되고 해당 프로젝트로 진입하면, 다음과 같은 화면을 마주합니다. 우리는 개발하는 프로젝트의 성격에 맞춰 앱을 등록하여야 합니다. 프로젝트 성격에 따라 iOS, Android, Web, Unity, Flutter 앱을 추가할 수 있습니다. 우리는 Web에서 Firebase를 사용하는 방법을 알아볼 예정이므로 Web을 선택합니다. 

Firebase 프로젝트 처음 진입 화면

 

Firebase에 웹 앱을 추가하는 것은 어렵지 않습니다. 다음 스크린숏과 같이 앱 닉네임을 입력한 후, 앱 등록 버튼을 누르시면 끝납니다. 

Firebase에 웹 앱 추가

3. Firebase SDK 추가 및 초기화

앱 등록을 마치면, 다음과 같이 Firebase SDK 추가 및 초기화에 대한 내용이 나옵니다. 그림과 같이 파이어베이스를 사용하려는 웹 프로젝트에서  npm install firbase  명령어를 통해 firebase사용을 위한 모듈을 설치한 후, 초기화를 진행해 주면 웹에서 firebase사용하기 위한 모든 준비가 끝이 납니다. 

Firease SDK 추가

 

저는 보통 다음과 같이 firebase.js 파일을 만들고, 해당 파일에서 firebase에서 사용하는 기능들을 export 하여 사용합니다. 

// firebase.js

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "AIzaSyBnBF98NJDVQ5nKZc16cUGJAW5PV3qBXQg",
  authDomain: "study-firebase-web.firebaseapp.com",
  projectId: "study-firebase-web",
  storageBucket: "study-firebase-web.appspot.com",
  messagingSenderId: "161658785411",
  appId: "1:161658785411:web:756d80621f28d06a0615b6"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);       // for 인증
export const storage = getStorage(app); // for 스토리지
export const db = getFirestore(app);    // for 데이터베이스