[JAVASCRIPT 공부일지] 4주차 - 3 (파이어베이스 가입 및 사용)

파이어베이스는 서버를 쉽게 사용할 수 있도록 도와주는 서비스입니다. 이번 공부일지에서는 파이어베이스에 가입하고, 프로젝트에 적용하여 사용하는 방법까지 공부해보겠습니다.

---

파이어베이스를 사용하기 위해서는 구글 계정으로 로그인 후 '시작하기'를 눌러 진행해야합니다.

가입을하고 프로젝트를 생성했으면 이제 앱에 연결할 수 있습니다.

정리하자면,
1) 파이어베이스에 가입
2) 파이어베이스 프로젝트를 생성 (만든 프로젝트와 이름이 일치해야합니다.)
3) 그 후 두개를 연결

---

파이어베이스에 가입을 완료하였으면,

1) 프로젝트 시작하기

2) 프로젝트 이름 지정 (Expo 프로젝트와 이름을 일치시키는게 관리하기 편합니다.)

3) 구글 애널리틱스 사용 설정

>> 이 서비스를 기본적으로 권장
cf) 구글 애널리틱스?
>> 웹사이트나 앱에 누가, 어디서 접속하고 누가, 어디서 다운받고, 어느 페이지를 많이 보고, 어느페이지에서 많이 끝내는지 분석할 수 있는 기능입니다.

4) 파이어베이스 앱에 연결하기

파이어베이스 입장에서는 작성한 코드가 자바스크립트로 되어있기때문에 '웹'이라고 인식합니다.
- 웹을 선택하고, 앱 이름도 프로젝트 이름과 일치시켜줍니다.
- 호스팅은 선택하지 않습니다.

5) 파이어베이스 expo로 설치

expo install firebase

6) firebaseConfig.js 파일 생성 (= 자바스크립트 파일)
- 파이어베이스 설정 파일
- 위치 = app.js와 동일한 위치에 생성
- firebaseConfig.js 안에 파이어베이스 프로젝트 생성 시 제공해준 접속코드를 입력 (외부에 공개 X)

---

<파이어베이스 : 파일 스토리지 활용>

이미지를 외부저장소에 저장하고, 그 이미지가 저장되어있는 외부 저장소의 주소를 불러오는 것입니다.

이렇게 이미지를 외부에서 관리할 수 있게되면 주소만 가져와서 로딩시키면 되므로 앱은 매우 가벼워질것입니다.
(회사, 공공단체에서 사용하는 FTP서버와 비슷한 형태)
cf) FTP 서버 : 이미지나 데이터들을 일정한 저장소에 저장한 후 불러오는 형태

<파일 스토리지 : 업로드>
이미지를 올리기위해서는
1) 파이어베이스의 왼쪽에 Storage 를 누르고 시작

2) 저장위치 설정 - 아시아 
ex) asia-northeast3

3) 버킷 생성

4) images 폴더 생성

5) images에 들어가서 이미지 저장소 주소 확인 후 파일 업로드

6) 업로드 후 업로드 된 파일을 눌러보면 미리보기 이미지가 우측에 표시됩니다,
- 이름클릭 >> 하이퍼링크 연결
- 그 하이퍼링크가 이미지에 접근할 수 있는 주소입니다.

---

<파이어베이스 - 리얼타임 데이터베이스 설정>

리얼타임 데이터베이스?
: 앱 개발을 할때 필요한 데이터가 담겨있는 데이터 파일(ex. data.json)을
프로젝트 내(로컬 저장)에 저장하는 것이 아닌 외부 데이터베이스 저장소에 저장을 하는 방식

: 플랫폼과 실시간 데이터 주고 받는 것에 특화되어있는 데이터베이스 
ex) noSQL

이처럼 파일 스토리지와 리얼타임 데이터베이스를 용도에 맞게 사용하시면됩니다.
이미지 저장시에는 파일 스토리지
JSON데이터 관리는 리얼타임 데이터베이스

1. 리얼타임 데이터베이스 생성

2. 위치는 데이터베이스 센터 3곳 중 가까운 '싱가포르' 선택

3. 잠금모드 or 테스트모드
>> 일단 잠금모드로 시작 후 잠금설정 직접해보기

4. const firebaseConfig 값 수정 (apiKey 포함)

const firebaseConfig = {
    apiKey: "xxx",
    authDomain: "xxx.com",
    projectId: "xxx",
    // databaseURL:"이 부분 기입",
    messagingSenderId: "xxx",
    appId: "xxx",
    measurementId: "xxx"
};

databaseURL에 직접 받은 키 값 입력 (= Realtime database의 주소)
>> 데이터베이스 연결세팅 완료

5. 리얼타임 데이터베이스의 규칙 부분
- rules의 read와 write= false -> 모두 true로 바꿔주시면 됩니다.
>> 수정 후 게시 클릭

6. JSON 데이터 가져오기

7. 데이터 원격 관리 완료

---

<리얼타임 데이터베이스 - 전체 데이터 읽기>

MainPage.js에서
1. 전체 데이터 가져오기 함수

2. 데이터 가져오기 함수 (=파이어베이스 API함수)
>> 파이어베이스 사이트 우측상단 "문서로 이동" -> "웹 시작하기" 를 통해
realtime database에 관련된 함수를 볼 수 있습니다.

3) 전체 조회 함수 사용

firebase_db.ref('/tip').once('value').then((snapshot) => {
   let tip = snapshot.val();
})

>> 조회한 데이터는 snapshot 부분에 담겨서 { } 내부에서 사용할 수 있는데 그 중 실제로 우리에게 필요한 데이터는 snapshot.val()로 가져와 tip이라는 변수에 담아 사용할 수 있습니다.

firebaseConfig.js 파일 맨 밑에

export const firebase_db = firebase.database()

로 파이어베이스 설정의 모든 기능을 함축적으로 만들어서 밖으로 내보내고 있습니다. 
firebase_db라는 변수를 활용하여 사용할 페이지에서

import {firebase_db} from "../firebaseConfig"

로 불러와서 사용하게 됩니다.

이렇게 import된 firebase_db는

useEffect(()=>{
    navigation.setOptions({
      title:'프로젝트 제목'
    })  
		//뒤의 1000 숫자는 1초를 뜻함
    	//1초 뒤에 실행되는 코드들이 담겨 있는 함수
    setTimeout(()=>{
        firebase_db.ref('/tip').once('value').then((snapshot) => {
          console.log("파이어베이스에서 데이터 가져왔습니다!!")
          let tip = snapshot.val();
          
          setState(tip)
          setCateState(tip)
          getLocation()
          setReady(false)
        });
    },1000)
 
    
  },[])

setTimeout(()) 에서 firebase_db.ref 
(ref (=reference)라는 함수를 꺼내서 씁니다.)
>> 파이어베이스 DB에서 어떠한 방을 조회할 것인가에 해당합니다.

('/tip')을 써서 팁이 모여진 곳에 들어감을 의미합니다.

once('value') (= value(값)을 가져올 것)

그리고 이 값들은 snapshot변수에 담겨져서

let tip = snapshot.val()

을 통해 변수 tip에 담기게됩니다.

cf) snapshot은 파이어베이스상에서 어떠한 데이터를 가져올때 쓰는 변수명
cf) setTimeout의 1000, 2000 등 지연시간의 의미?
>> 사용자들마다 네트워크가 다 다르기 때문에 setTimeout으로 적절한 시간을 부여, 
>> 하지만 setTimeout 함수 기능보다 파이어베이스 API 함수 조회 시간에 따른 완료시간을 사용하는게 훨씬 적절합니다.

---

다음 공부일지에서는 리얼타임 데이터베이스에 대해 더 알아보고 마무리해보겠습니다.

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.