🥬🍖프론트를 Firebase에 싸서 드셔보세요 | 1 - 프로젝트 시작하기

Motivation

프론트만 만들어오다가 BaaS(Backend as a service)를 이용해, 백엔드를 구축하고 싶었다. 지금의 Firebase는 8이 아닌 9 버전으로, 바뀐 부분이 많아 배우면서 어려움이 있었다. 삽질하면서 배운 Firebase 사용법을 깔끔하게 정리하고 싶었다.

Firebase 8 vs 9

Version 8에서 9이 되면서, Firebase를 이용하는 방식에 변화가 생겼다. 기존에는 Firebase Object를 만들어서 그안의 method를 실행했다.

반면, 이제는 webpack같은 module bundler로 필요한 부분만 import해와서 사용할 수 있다.

import { initializeApp } from "firebase/app";

initializeApp();

Overview

전체 과정을 요약하면 다음과 같다.

1. Firebase 프로젝트를 생성한다.
2. NPM으로 Webpack을 설치 후 설정해준다.
3. NPM으로 Firebase를 설치한다. node_modules 폴더에 저장된다.
4. Firebase를 사용하고 싶은 js 파일에서 원하는 부분을 import해온다.
5. Webpack이 bundling할 때, 필요한 dependencies를 적절히 대체해서 하나의 output 파일로 만들어준다.
6. Firebase-tools를 이용해 사이트에 deploy한다. 🔥

Firebase 프로젝트 생성

https://firebase.google.com

Firebase 홈페이지에 들어가 Get Started 버튼을 클릭한다.

+ 프로젝트 추가를 누른다.

프로젝트 이름을 지정해준다.

지금은 필요가 없으니 Google 애널리틱스 사용은 꺼준 후 프로젝트 만들기를 클릭한다.

프로젝트가 준비되었다.

프로젝트 이름(myProject) 밑에 </>버튼을 클릭해서 앱을 추가해준다.

앱 닉네임과 호스팅 설정을 해준다. 그냥 체크해주면 된다.

어차피 나중에 설정해줄 내용이니 다음을 눌러 우선은 쭉 넘어가면 된다.

마찬가지로 넘어가준다.

콘솔로 이동을 누르면 웹 앱을 추가할 수 있다.

🔥이제 다음 단계에서는 간단한 프론트 코드를 만들고 webpack을 설치하자.