Firebase
소개
파이어베이스는 모바일 앱 및 웹 애플리케이션 개발에 필요한 데이터베이스, 사용자 인증, 호스팅, 스토리지, 크래시리포팅(문제보고), 퍼포먼스, 광고 등을 API의 형태로 제공하는 백엔드 서비스(BaaS, Backend as a service)이다.
파이어베이스는 유료 서비스이지만 1GB의 스토리지와 월 10GB의 트래픽은 무료로 제공된다.
Firebase 프로젝트 생성
구글 계정을 준비하고 Firebase Console로 이동한다.
‘프로젝트 추가’를 클릭하고 ‘프로젝트 이름’과 ‘국가/지역’을 입력한 후, ‘프로젝트 만들기’를 클릭하여 새로운 프로젝트를 생성한다.
Firebase CLI 설치
Firebase CLI는 Firebase 프로젝트 관리, 조회, 배포를 위한 여러 가지 도구를 제공한다. Firebase CLI를 설치하기 위해서 사전에 Node.js가 설치가 필요하다.
npm을 사용하여 Firebase CLI를 설치하도록 한다.
$ npm install -g firebase-tools
$ firebase --version
Firebase CLI가 정상적으로 설치되었으면 Google 계정으로 로그인한다.
$ firebase login
로그인을 실시하면 로컬 컴퓨터를 Firebase 계정에 연결하고 프로젝트에 대한 액세스를 허용한다. 정상적으로 로그인되었는지 테스트하려면 firebase list를 실행하여 Firebase 프로젝트 목록이 표시되는지 확인한다. 이 목록이 Firebase 콘솔 상의 프로젝트와 일치해야 한다.
$ firebase list
Deploy
Firebase와 연동할 프로젝트에는 firebase.json 파일이 필요하다. 이것을 생성하기 위해 아래의 명령어를 실행한다.
호스팅을 사용할 것이므로 Hosting을 선택(space)한 후, 엔터를 입력하여 다음으로 진행한다.
$ firebase init
Select a default Firebase project for this directory: [create a new project] What do you want to use as your public directory?(public) / Configure as a single-page app (rewrite all urls to /index.html)? n
Project creation is only available from the Firebase Console Please visit https://console.firebase.google.com to create a new project, then run firebase use --add
$ firebase use --add
로컬 프로젝트를 파이어베이스 CLI로 실행하여 보자.
$ firebase serve
프로젝트 빌드 결과물을 Firebase 호스팅을 통해 원격 배포하기 위해서는 아래의 명령을 실행한다.
$ firebase deploy
Hosting URL : https://프로젝트아이디.firebaseapp.com
memo web 만들기
기능 구조
- 인증기능을 이용한 구글창 호출
- 구글 로그인 성공 -> 메모리스트 출력 구글 로그인 실패 -> 구글창 다시 호출
- 메모 저장 기능
- 메모 한 건 출력 기능
- 메모 수정 기능
- 메모 삭제 기능
환경설정
- firebase 콘솔창에서 새 프로젝트 만들기
- 'Authentication'메뉴 -> 로그인 방법 설정 -> '구글' 사용설정함
- 'Database' 메뉴 -> 'Realtime Database'로 설정 -> 규칙
{ /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */ "rules": { ".read": "auth != null", ".write": "auth != null" } } - node js 설치
- firebase cli 설치
- firebase login
- firebase init -> Database, hosting 선택
- firebase serve
세부 기능 구현하기
1. 인증
'앱추가' -> '웹 앱에 Firebase 추가' 자바스크립트 코드 index.html 안에 붙이기
2. 실시간데이터베이스
firebase 콘솔 database 메뉴 -> 실시간데이터베이스 -> 데이터 탭 -> memos라고 설정
자바스크립트 프로젝트에 Firebase 추가
앱에 Firebase 추가
앱에 Firebase를 추가하려면 Firebase 프로젝트와 프로젝트에 대한 일부 세부정보가 있는 초기화 코드의 간단한 스니펫이 필요합니다.
- Firebase 콘솔에서 Firebase 프로젝트를 만듭니다.
- 기존에 Firebase 프로젝트가 없으면 프로젝트 추가를 클릭하고 기존의 Google Cloud Platform 프로젝트 이름 또는 새 프로젝트 이름을 입력합니다.
- 사용할 기존 Firebase 프로젝트가 있는 경우 콘솔에서 해당 프로젝트를 선택합니다.
- Firebase 콘솔의 프로젝트 개요 페이지에서 웹 앱에 Firebase 추가를 클릭합니다. 프로젝트에 앱이 이미 있으면 프로젝트 개요 페이지에서 앱 추가를 선택합니다.
- 스크립트 태그에 프로젝트의 맞춤설정된 코드를 복사해 붙여넣습니다.
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
Firebase 서비스 사용
Firebase App은 여러 Firebase 서비스를 사용할 수 있습니다. firebase 네임스페이스로 각 서비스에 액세스할 수 있습니다.
- firebase.auth() — 인증
- firebase.storage() — Cloud Storage
- firebase.database() — 실시간 데이터베이스
- firebase.firestore() — Cloud Firestore
- firebase.messaging() — 클라우드 메시징
- firebase.functions() — Cloud Functions
개발용 로컬 웹 서버 실행
웹 앱을 개발하는 경우 Firebase 자바스크립트 SDK의 특정 부분에서는 로컬 파일 시스템이 아닌 서버에서 웹 앱을 제공하도록 요구합니다. Firebase CLI에서 다음과 같이 로컬 서버를 실행할 수 있습니다.
$ npm install -g firebase-tools
$ firebase init # Generate a firebase.json (REQUIRED)
$ firebase serve # Start development server
Firebase 호스팅을 사용하여 웹 앱 호스팅
정적 콘텐츠로만 구성된 웹 앱을 빌드하는 경우 Firebase 호스팅을 사용하여 손쉽게 배포할 수 있습니다. Firebase 호스팅은 최신 프런트엔드 웹 애플리케이션을 위한 개발자 중심의 정적 웹 호스팅 서비스입니다. Firebase 호스팅을 사용하면 명령 한 번으로 SSL 지원 웹 앱을 글로벌 콘텐츠 전송 네트워크(CDN)의 자체 도메인에 배포할 수 있습니다.
자바스크립트에서 Google 로그인으로 인증하기
시작하기 전에
- 자바스크립트 프로젝트에 Firebase를 추가합니다.
- Firebase 콘솔에서 Google 로그인을 사용 설정합니다.
- Firebase 콘솔에서 인증 섹션을 엽니다.
- 로그인 방법 탭에서 Google 로그인 방법을 사용 설정하고 저장을 클릭합니다.
Firebase SDK로 로그인 과정 처리하기
웹 앱을 개발하는 경우, Google 계정을 통해 Firebase에 사용자를 인증하는 가장 쉬운 방법은 Firebase 자바스크립트 SDK로 로그인 과정을 처리하는 것입니다.브라우저가 아닌 Node.js 등의 환경에서 사용자를 인증하려면 로그인 과정을 직접 처리해야 합니다.
Firebase 자바스크립트 SDK로 로그인 과정을 처리하려면 다음 단계를 따릅니다.
- 다음과 같이 Google 제공업체 객체의 인스턴스를 생성합니다.
var provider = new firebase.auth.GoogleAuthProvider(); - 선택: 인증 제공업체에 요청하고자 하는 OAuth 2.0 범위를 추가로 지정합니다. 범위를 추가하려면 addScope을 호출합니다. 예를 들면 다음과 같습니다.
provider.addScope('https://www.googleapis.com/auth/contacts.readonly'); - 선택사항: 관련 맞춤 OAuth 매개변수를 명시적으로 전달하지 않고 제공업체의 OAuth 과정을 사용자가 선호하는 언어로 현지화하려면 OAuth 과정을 시작하기 전에 인증 인스턴스의 언어 코드를 업데이트합니다. 예를 들면 다음과 같습니다.
firebase.auth().languageCode = 'pt'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage(); - 선택사항: OAuth 요청과 함께 전송할 맞춤 OAuth 제공업체 매개변수를 추가로 지정합니다. 맞춤 매개변수를 추가하려면 초기화된 제공업체의 setCustomParameters를 호출하고, 호출 시 OAuth 제공업체 문서에 지정된 키를 포함하는 객체 및 해당 값을 사용합니다. 예를 들면 다음과 같습니다.
provider.setCustomParameters({ 'login_hint': 'user@example.com' }); - Google 제공업체 객체를 사용해 Firebase에 인증합니다. 팝업 창을 띄우거나 로그인 페이지로 리디렉션하여 사용자가 Google 계정에 로그인하도록 유도할 수 있습니다. 휴대기기의 경우 리디렉션을 사용하는 것이 바람직합니다.
- 팝업 창을 사용해서 로그인하려면 다음과 같이 signInWithPopup을 호출합니다.
firebase.auth().signInWithPopup(provider).then(function(result) { // This gives you a Google Access Token. You can use it to access the Google API. var token = result.credential.accessToken; // The signed-in user info. var user = result.user; // ... }).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); - 로그인 페이지로 리디렉션해서 로그인하려면 다음과 같이 signInWithRedirect를 호출합니다.
firebase.auth().signInWithRedirect(provider);