파이어베이스에 웹 프로젝트 추가하기
웹 프로젝트에서 파이어베이스를 사용할 수 있도록 콘솔에 등록하고 SDK를 추가해보자
선행 작업
이 글은 파이어베이스 프로젝트 생성 이후의 일을 다루므로 파이어베이스 프로젝트를 생성하지 않았다면 아래 링크에서 선행 작업을 완료해야한다.
1. Firebase 프로젝트 생성하기
[Firebase] Firebase 프로젝트 생성하기
Firebase 프로젝트 생성하기 Google Firebase 프로젝트를 생성해보자. Google Firebase Console 접속 파이어베이스 서비스를 이용하기 위해서는 구글 파이어베이스 콘솔에 접속해야한다. https://console.firebase..
spiralmoon.tistory.com
작업 순서
1. 파이어베이스에 웹 프로젝트 등록
2-1. 웹 프로젝트의 프론트엔드에 SDK 포함 및 설정
2-2. 웹 프로젝트의 백엔드에 SDK 설치 및 설정
파이어베이스에 웹 프로젝트 등록
파이어베이스 웹 페이지로 이동해서 "앱 추가" 버튼을 누른다.
웹앱 아이콘 클릭
등록할 웹앱의 이름을 정하고 "앱 등록" 클릭
웹 프로젝트가 아주 간단하게 추가되었다.
CDN으로 Firebase SDK를 웹 프로젝트에 포함 및 설정하는 소스코드가 안내되는데, 일단 복사하고 넘어가도록 하자.
(지금 복사 안해도 "Settings >> 일반 >> 내 앱"에서 다시 확인 가능)
웹 프로젝트의 프론트엔드에 SDK 포함 및 설정
프론트엔드 소스코드인 HTML + Javascript 레벨에서 파이어베이스를 포함시키는 방법이다.
다만, 사용자가 프론트엔드 소스코드를 열어볼 수 있기 때문에 보안에 민감하다면 그냥 백엔드에서 설정하는 것을 권장한다.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "your api key",
authDomain: "your auth domain",
databaseURL: "your database url",
projectId: "your project id",
storageBucket: "yuor storage bucket",
messagingSenderId: "your messaging sender id",
appId: "your app id",
measurementId: "your measurement id"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
위 소스코드를 HTML 파일의 <body> 태그 하단에 붙여넣고 사용하면 된다. SDK가 CDN으로 불러와지므로 별도로 설치할 필요는 없다.
이 코드는 파이어베이스에 웹 프로젝트를 등록할 때 2번 항목에 나왔던 코드다. (위에서 복사하라고 했던 코드)
웹 프로젝트의 백엔드에 SDK 설치 및 설정
백엔드 소스코드에서 파이어베이스를 포함시키는 방법이다.
백엔드 소스코드는 사용자에게 공개되지 않기 때문에 프론트엔드에서 설정하는 방법보다 안전하다.
Google은 현재 여러 언어나 프레임워크에서 파이어베이스를 사용할 수 있도록 각각 SDK를 만들어 배포중이다.
대표적으로 Node.js, Java, Python, Go, C# 등등... 어쨌든 기본 인터페이스는 동일하다고 보면 된다.
Node.js 환경에서 파이어베이스를 설정하는 상황을 예시로 들어보겠다.
$ npm install firebase
위 명령어로 파이어베이스 패키지를 프로젝트 내에 설치한다.
import firebase from 'firebase';
firebase.initializeApp({
apiKey: "your api key",
authDomain: "your auth domain",
databaseURL: "your database url",
projectId: "your project id",
storageBucket: "yuor storage bucket",
messagingSenderId: "your messaging sender id",
appId: "your app id",
measurementId: "your measurement id"
});
firebase 패키지를 불러오고 설정 값을 넣어주면 끝이다. 다른 언어로 해도 거의 비슷하다.
설정 값은 아까 복사해두었던 코드에서 필요한 부분만 가져오면 된다. 복사하지 않았다면 "Settings >> 일반 >> 내 앱"에서 다시 확인 가능하다.
이제 이 프로젝트에서는 파이어베이스의 기능을 사용할 수 있다.
참고 자료
자바스크립트 프로젝트에 Firebase 추가 | Firebase
이 가이드에서는 웹 앱에서 또는 최종 사용자의 액세스를 위한 클라이언트(예: Node.js 데스크톱 또는 IoT 애플리케이션에서)로 Firebase 자바스크립트 SDK를 사용하는 방법을 설명합니다. 권한이 있는 환경(예: 서버)에서 관리 액세스를 설정하려면 대신 Firebase Admin SDK를 설정합니다. 시작하기 전에 원하는 편집자 또는 IDE를 설치합니다. 자바스크립트 프로젝트(웹 또는 Node.js)를 엽니다. Google 계정을 사용하여 Fir
firebase.google.com
'Operation > Firebase' 카테고리의 다른 글
| [Firebase] 파이어베이스에 BigQuery 연결하기 (0) | 2020.03.17 |
|---|---|
| [Firebase] 파이어베이스로 호스팅하기 (2) | 2019.12.28 |
| [Firebase] Firebase 프로젝트에 Android, iOS 연결하기 (0) | 2019.12.03 |
| [Firebase] Firebase 프로젝트 생성하기 (0) | 2019.12.03 |
댓글