본문 바로가기

Google

firebase 시작하기

firebase를 시작해보기 위해 진행사항을 정리해 본다. 


웹기반으로 알아볼 것이며 test해볼 프로젝트가 미리 있어야하기 때문에 아래와 같이 sample project를 github에서 clone한다. 


firebase를 적용할 샘플 프로젝트를 다운로드 하자

github 주소 : https://github.com/firebase/quickstart-js 

git이 설치되어 있다면 아래처럼 git clone을 통해 project를 다운로드 받는다. 

$ git clone https://github.com/firebase/quickstart-js.git

Cloning into 'quickstart-js'...

remote: Counting objects: 1459, done.

remote: Compressing objects: 100% (9/9), done.

remote: Total 1459 (delta 3), reused 0 (deReceiving objlta 0),ects:  99% (1446/145 p9)ack-reused 1448

Receiving objects: 100% (1459/1459), 776.00 KiB | 307.00 KiB/s, done.

Resolving deltas: 100% (842/842), done.

Checking connectivity... done.


clone이 된 directory를 들어가 보면 아래와 같이 sample 프로젝트 들이 보인다. 

$ pwd

/c/Users/Administrator/firebase/quickstart-js


$ ll

total 40

drwxr-xr-x 1 NHN 197121     0 10월 12 10:36 auth/

-rw-r--r-- 1 NHN 197121  7130 10월 12 10:36 CONTRIBUTING.md

drwxr-xr-x 1 NHN 197121     0 10월 12 10:36 database/

-rw-r--r-- 1 NHN 197121 12069 10월 12 10:36 LICENSE

-rw-r--r-- 1 NHN 197121  1045 10월 12 10:36 README.md

drwxr-xr-x 1 NHN 197121     0 10월 12 10:36 storage/



다운로드 받은 웹앱에 firebase를 추가하자. 

다운로드된 샘플 프로젝트 중에 데이터 베이스 앱을 골라서 firebase를 적용해 보고자 한다. 

$ cd database/

$ pwd

/c/Users/Administrator/firebase/quickstart-js/database

$ vi index.html


위와 같이 database 폴더로 이동해 보면 index.html 파일이 있고 여기에 내가 생성한 프로젝트의 firebase를 추가하면된다. 





근데, 내가만든 프로젝트는 뭐고 firebase 추가는 뭐냐?

내가만든 프로젝트는 firebase에 만든 프로젝트이며 아래와 같이 생성하거나 접근 가능하다. 


firebase측의 설명을 보면 이해하기 쉬운데 아래와 같이 진행하면 된다. 즉 firebase 콘솔에서 프로젝트를 생성하고 거기서 웹앱에 firebase 추가라는 것을 클릭하면 복사할 코드를 준다 그걸 저위에 index.html에 붙여넣으면 되는 것이다. 아래 가이드가 귀찮으면 그 아래에 설명을 보자. 


https://firebase.google.com/docs/web/setup

앱에 Firebase 추가

앱에 Firebase를 추가하려면 Firebase 프로젝트가 있어야 하며 프로젝트에 대한 몇 가지 세부정보를 포함하는 짧은 코드를 애플리케이션 HTML에 추가해야 합니다.

  1. Firebase 프로젝트를 갖고 있지 않다면 Firebase 콘솔에서 프로젝트를 만듭니다.
    • 앱에 연결된 기존 Google 프로젝트가 있으면 Google 프로젝트 가져오기를 클릭합니다. 그렇지 않은 경우 새 프로젝트 만들기를 클릭합니다.
    • 프로젝트가 이미 있으면 프로젝트 개요 페이지에서 앱 추가를 클릭합니다.
  2. 웹 앱에 Firebase 추가를 클릭합니다.
  3. 복사를 클릭하고 코드를 애플리케이션 HTML에 붙여넣습니다.

설정 코드를 다시 가져오려면 개요 페이지에서 앱 추가를 클릭하고 웹 옵션을 다시 선택합니다.

방금 복사한 코드는 다음과 비슷한 내용입니다.

  // TODO: Replace with your project's customized code snippet
 
<script src="https://www.gstatic.com/firebasejs/3.0.2/firebase.js"></script>
 
<script>
   
// Initialize Firebase
   
var config = {
      apiKey
: '<your-api-key>',
      authDomain
: '<your-auth-domain>',
      databaseURL
: '<your-database-url>',
      storageBucket
: '<your-storage-bucket>'
   
};
    firebase
.initializeApp(config);
 
</script>

이 코드는 인증, 저장소, 실시간 데이터베이스를 사용하도록 Firebase JavaScript SDK를 구성하는 초기화 정보를 포함합니다.


설명이 귀찮으면 그냥 해보자. 

https://console.firebase.google.com/

에 접근하면 아래와 같은화면이 나온다. 


프로젝트 만들기


새 프로젝트 만들기 클릭 

생성된 프로젝트에서 웹 앱에 Firebase 추가 버튼 클릭 


firebase 코드를 복사 




드디어 코드를 위의 index.html에 붙여넣는다. 


Firebase Auth 설정 변경 

아래와 같이 Auth를 선택하고 로그인 방법에서 구글을 사용설정한다. 



Firebase-CLI 설치 

아래 문서를 참고 하여 firebase cli를 설치한다. 

https://firebase.google.com/docs/cli/


설치가 완료되었으면 firebase serve라는 명령어를 쳐서 실행 

$ firebase serve

Starting Firebase development server...


Project Directory: C:\Users\Administrator\firebase\quickstart-js\database

Public Directory: ./


Server listening at: http://localhost:5000




localhost:5000에 접속하여 구글 로그인 



허용을 클릭하면 아래와 같이 인증이 완료되고 앱이 실행됩니다. 

글을 쓸 수가 있네요. 



'Google' 카테고리의 다른 글

Google related  (0) 2011.08.17
구글 웹 마스터 도구  (0) 2011.06.28
구글 인스턴스 검색  (0) 2010.10.08