Skip to content

Week 5 firebase

Jump to bottom
JunBae edited this page Dec 6, 2019 · 5 revisions

1대1 메신저 만들기

시작하기

프로젝트 생성하기

  • firebase 사이트로 가서 회원가입 후, 웹 프로젝트 생성한다.
  • 프로젝트로 들어가서 'project overview'의 proejct settings로 이동한다.
  • 설정위치
  • 일반의 내앱의 firebase SDK snippet탭의 CDN을 선택하여 스크립트를 복사한다
  • 키

프로젝트에 적용하기

  • 위에서 가져온 키를 아래와 같이 하나의 파일에서 관리하도록 한다.
//firebase.js
import * as firebase from "firebase"
import "firebase/database"//자신이 쓰려는 firebase기능을 추가한다.
let firebaseConfig ={
    apiKey: 
    authDomain: ,
    databaseURL: ,
    projectId: ,
    storageBucket: ,
    messagingSenderId: ,
    appId: ,
    measurementId: 
}

function Firebase() {
  if (!firebase.apps.length) {//로딩 여부
    firebase.initializeApp(firebaseConfig) //설정 초기화
  }
  firebase.analytics()
  this.database = firebase.database()
}

export default new Firebase()

firebase 데이터베이스 설정하기

  • 이제 firebase를 적용할 프로젝트의 루트폴더에서 콘솔로 입력하여 firebase설정을 구성한다.
  1. 로그인
  • firebase login으로 로그인을 한다.
  1. firebase 기능을 선택하여 설치

  • firebase init

  • firebase init

  • database를 스페이스바로 선택하고 enter로 다음으로 넘어간다.

  • 'Please select an option'

    • Use an existing project을 선택

  • Select a default Firebase project for this directory:

    • 사이트에서 생성한 프로젝트를 선택

  • What file should be used for Database Rules?

    • 자동으로 (database.rules.json)입력된것을 enter하여 넘겨준다.

  • 선택 예

    //해당 폴더 루트로 이동
firebase login//로그인
firebase init//프로젝트에 필요한 firebase를 설치
//database 를 스페이스바로 선택
//사이트에서 생성한 프로젝트를 선택
//나머지는 기본으로 설정한다.(Use an existing project, database.rules.json)

  • database.rules.json설정 { "rules": { ".read": true, ".write": true } }

  • 읽기, 쓰기를 true로 하여 읽고 쓰기가 가능하도록 한다.

읽기

쓰기

정렬

탐색

  • 참고

부스트캠프 맴버십 - 그룹프로젝트 (서준배, 최성찬, 홍승표, 황선준)

Clone this wiki locally