앱개발 강의 4주차 Note - (2) 파이어베이스

4주차 (2) 파이어베이스

 

[서버 리스] 서버를 사용만 하자

 

서버를 만든다는건 많은 일들을 수반해야하는데, 꼭 하지 않아도 서버 제공하는 곳에서 서비스 이용하면 된다.

꿀팁 앱에서는 어떤게 필요할까?

1. 꿀팁을 서버로부터 가져오기

 

2. 꿀팁 찜하기

 

 

[파이어베이스]

 

구글에서 만든 서버리스 서비스.

파이어베이스도 프로젝트를 생성해야한다.

가입, 프로젝트 생성, 사용할 파이어베이스 서비스 활성화.

https://firebase.google.com/

 

 

[파이어베이스] 파이어베이스를 앱에 연결하다

 

프로젝트 생성 후에 프로젝트 내에서 앱 생성하기.

파이어베이스 입장에서 어떤 언어로 앱을 만드는지를 알아야한다.

우린 자바스크립트. 즉 웹 개발 기술 언어로 만들고 있다.

 

생성한 뒤에, 코드 확인하고

expo install firebase

 

접속정보 코드를 넣어야한다.

FirebaseConfig.js 만들기.

 

코드스니펫 코드 복사하고, 파이어베이스에서 생성된 코드 붙여넣어준다.

 

[파이어베이스] 파일 스토리지

 

파이어베이스 서비스 중 파일 스토리지를 쓸 것이다. 파일 저장소.

이미지가 저장된 주소를 제공해준다.

 

파이어베이스 - Storage 시작.

 

 

images 폴더 만들어주기.

 

 

[파이어베이스] 리얼타임 데이터베이스 - 설정

 

리얼타임 데이터베이스 소개

 

우리가 배운 리스트, 딕셔너리 구조. 즉 JSON 형태로 저장/관리되는 데이터베이스 서비스.

SQL과는 다르게 JSON형태로 저장된다.

 

파이어베이스에서, Realtime Database 시작.

잠금모드에서 시작한다.

그리고 규칙 수정! read, write true로 변경.

 

 

data.json 파일을 불러와준다.

 

 

[파이어베이스] 리얼타임 데이터베이스 - 전체 데이터 읽기

 

파이어베이스 리얼타임 데이터베이스 전용 함수에 데이터 저장 위치를 알려주면서 데이터를 가져올 수 있다.

 

데이터 가져오기 함수를 넣어야한다.

이 함수는 사용설명서에 있다. 구글링해도 좋다.

 

MainPage.js에서 크게 바뀐 것이 무엇이냐.

data.json 파일을 바라보던 것이, 파이어베이스 서버에 업로드된 데이터를 가져오게 되었다.

 

 

[파이어베이스] 리얼타임 데이터베이스 - 특정 데이터 읽기

 

디테일 화면 데이터는,

자세한 내용의 데이터, 댓글 등의 데이터가 있을텐데 이 데이터도 실시간으로 변경될 수 있다.

 

인덱스 번호를 content에서 꺼내서 넘겨주는 방식으로 변경됨.

DetailPage.js에서 넘겨받은 idx 팁의 상세 데이터를 조회한다.

 

아까 firebase_db 함수에서, tip 데이터가 들어있는 주소 안에 몇번 데이터를 구할 것인지 idx를 붙인다.

 //넘어온 데이터는 route.params에 들어 있습니다.

        const { idx } = route.params;

        firebase_db.ref('/tip/'+idx).once('value').then((snapshot) => {

            let tip = snapshot.val();

            setTip(tip)

 

 

[파이어베이스] 리얼타임 데이터베이스 - 쓰기

 

나만의 꿀팁 앱에서 데이터를 저장해야하는 상황.

꿀팁 찜할때의 상황이다.

 

앱을 수많은 사람들이 사용할텐데..

사용자마다 유니크한 ID를 부여해줘야할 것이다.

expo-contants 라는 기능!

import Constants from 'expo-constants';

 

어떤 찜 데이터를 데이터베이스에 저장해야하나?

찜 데이터가 어디에 위치하고 있는지.

tip 상태에 저장되어 관리되고 있으니, tip을 저장하면 된다.

 

like라는 폴더는 원래 없었는데,

코드에서 아예 만들어주면서 누구의 데이터이고 어떤 index의 찜을 저장했는지 주소를 부여해준다.

 

찜을 like 함수로 변경함.

 

 const like = () => {

        

        // like 방 안에

        // 특정 사용자 방안에

        // 특정 찜 데이터 아이디 방안에

        // 특정 찜 데이터 몽땅 저장!

        // 찜 데이터 방 > 사용자 방 > 어떤 찜인지 아이디

        const user_id = Constants.installationId;

        firebase_db.ref('/like/'+user_idx+'/'+ tip.idx).set(tip,function(error){

            console.log(error)

            Alert.alert("찜 완료!")

        });

    }