[스파르타코딩클럽] 앱개발 종합반 4주차 [21.11.15 - 21.11.21]

앞서 3주간 화면을 그리는 방법에 대해 배워봤다면, 4주차에선 사용자들에게 보여주고 싶은 데이터와 사용자들이 앱을 사용하면서 발생하는 데이터를 관리 및 보여주는 방법, 즉 서버를 직접 다뤄보려고 한다.

 

0. 4주차의 주요 키워드

1) 앱과 서버: 데이터가 담겨있는 곳, 즉 서버와 앱과의 관계 살펴보기

2) 서버리스: 서버를 직접 구축하지 않고 서버를 사용하는 방법 알아보기

3) 파이어베이스: 서버리스의 한 종류인 파이어베이스 사용방법 익히기

 

1) 앱과 서버

서버의 동작 방식에는 크게 서버가 정해 놓은 도메인 주소를 써서, 서버가 만들어 놓은 함수를 가져다 쓰는 방법이 있다. 만약 서버에 무언가를 요청해야 하는 상황에서는 반드시 앞서 언급한 규칙에 따라 진행해야하고,  만약 정해진 규칙에 따르지 않고 요청을 하면 응답하지 않는다. 이렇게 서버에서 정해 놓은 규칙을 API(Application Programming Interface)라 한다.

 

서버가 앱에 요청으로 데이터를 제공할 때는 JSON 형태의 데이터로 전달해준다.

서울 대기 OPEN API(JSON 데이터)

 

이 서버가 필요한 이유는 앱에 모든 데이터를 담을 수 없다. 서버가 없을시 문제 ! 우선 첫 번째 앱 용량이 커질 수 있고, 두 번째 만약 앱에 새로운 데이터를 업데이트해서 다시 사용자에게 제공하려면 다시 배포해야 하는 상황이 벌어진다. 그렇기 때문에 서버를 통해서 앱에 서버의 데이터를 가져오고 변경하는 것이 중요하다.

 

2) 서버리스

서버를 0부터 만드는 일은 쉬운일이 아니다. 그렇기 때문에 이 서버를 대신 만들어놓고 필요한 기능, 1) 데이터 생성 2) 데이터 조회 3) 데이터 삭제/수정 등을 제공해주는 서비스들이 존재한다. 서버가 없어서가 아닌 서버를 직접 만들 필요가 없다는 의미로  '서버리스'라 부른다.

 

3) 파이어베이스

서비리스를 제공해주는 서비스는 다양하게 있는데, 그 중에서 우리는 구글의 파이어베이스를 통해서 나만의 꿀 팁 앱에 필요한 기능을 하나씩 붙여가면서 실습해보았다.

 

1. [앱과 서버] 날씨 서버 외부 API

-리액트 네이티브에 주로 데이터를 준비하는 시점

리액트 네이티브로 앱을 만들면서 서버와 통신(대화)하는 시점은 크게 두 가지이다.

1) 앱 화면이 그려진 다음 데이터를 준비 ← useEffect

데이터를 가져오는 요청은 항상 useEffect 안에서 API를 통해 요청을 하고 준비를 할 것이다.

 

 

2) 앱에서 사용자가 저장 버튼을 눌렀다!

나만의 꿀 팁 앱으로 예를 들면, 앱의 데이터 저장 시점은, 사용자가 꿀팁을 보고 팁 찜하기 버튼을 눌렀을 때 이다.

 

-서버 API란?

앞서 배운 API유형은 서버가 제공하는 도메인 사용, 서버가 만들어놓은 함수 사용 하는 방법 2가지가 있엇는데, 서버가 제공하는 도메인을 사용하는 방법을 통해서 실습을 해보려고 한다.

{ } 표현식을 배울때 MainPage 우측 상단에 두었던 날씨 텍스트 영역을 이제, 실제 날씨 데이터를 넣어보도록 하겠다.(날씨 데이터를 제공해주는 일정 요청에 대해선 무료 API를 제공해주는 openweathermap api 를 사용한다.)

 

-날씨 앱에 날씨 API 사용해보기

API를 통해 날씨 데이터를 가져온다는 것은 다음 순서로 진행되어야 한다.

1) 현재 위치(좌표) 데이터 필요, 가져오기 

2) 위치 데이터를 이용해 현재 위치 날씨 데이터 가져오기(날씨 API에 요청하기)

정리하면 내가 있는 위치 데이터를 서버에 보내주고, 날씨 데이터를 주는 API를 사용하면 된다.

 

-[실습] 날씨 API 사용

1)앱 위치 정보 권한 설정

우선 expo에 있는 현재 위치 도구를 설치해준다.

expo install expo-location

그리고 MainPage.js에 날씨 가져오기 도구를 적용해서, 위치추적과 관련된 alert가 나오면 위치도구 설치가 완료된 것이다!!

ㅇㅇㅇㅇㅇㅇㅇ

더 자세히 MainPage를 보면서 현재 위치를 적용한 코드리뷰를 하면 다음과 같다.

우선 import 해온 모습이 다른 도구들과 사뭇 다른데, 빨간색 블랭크 안에  * as 이하의 코드가 무슨 의미이냐?.. 엑스포 로케이션 도구를 앞으로 이 js파일 안에서 모두 Location이라 지칭하겠다는 의미이다. 따로 정해진 이름이 없어서 이렇게 지칭하여 사용하는듯 하다. 위의 StatuBar 나 다른 도구들은 이미 이름이 정해져 있기 때문에 그대로 가져와서 사용한 것이다.

 

그 다음 getLocation이라는 함수를 만들어서 useEffect 안에다가 두고 앱 실행이 되자마자 위치좌표를 가져올 수 있게 했고,

getLocation 함수를 살펴보면 조건문 처럼 try 와 catch 로 나뉘어 있는데, try/catch는 API를 사용 할 때 주로 사용하는 에러 처리 방지 코드이다. 사용자가 API 호출을 제대로 호출 했을 수도 있지만 서버 측에서 혹은 휴대폰 자체에서 등, 앱 외적으로 오류가 발생 할 수 있다. 이런 상황들을 처리하기 위한 코드이다. try{ } 부분엔 API요청 같은 작업 코드를 catch{ } 부분엔 에러가 발생 했을 때 실행 할 alert 코드를 작성한다.

try { } 안에 await 이후에 코드를 보면 requestPermissionsAsync() 는 위치추적과 관련한 팝업창을 띄우게 하는 코드이고, 그다음 팝업을 선택지인 allow와 deny 중 allow를 선택하면 바로 밑에 getCurrentPositionAsync(현재 위치 좌표를 가져오는 코드)가 쭉 진행이되고 deny를 누르면 위치 추적을 허용하지 않고 아래 코드가 실행이 되지 않는다. 즉 현재 위치를 가져오지 않는다.

 

앞서 구현한 코드 로직을 쭉 보다보면 async / await 키워드를 볼 수 있다. 우선 이 코드를 쓰는 이유는 함수의 실행 순서를 딱! 고정하기 위해서이다. 자바스크립트 특성상 작업이 끝나는 순서대로 결과값이 주어진다. 그렇기 때문에 실행되는 순서가 따로 없으면 뒤죽박죽(비동기) 되어버린다. 그래서 async/await 를 사용해서 함수 실행 순서를 정해주면 원하는 실행순서로 픽스할 수 있을 것이다.

async/await 함수 사용 예시

위의 getLocation 함수코드와 예시를 통해  함수들을 감싸는 함수 선언 부 앞에 async, 사용하는 함수들 앞엔 await 를 사용해야 하는 것을 알 수 있다.

 

2) API 사용

API는 API를 만든 서버 개발자가 사용법을 정리해서 알려준다. 우리가 사용할 날씨 앱 API는 이 공식 문서에 설명서가 적혀 있다.

사용 할 날씨 관련 API 공식문서 링크

서버가 제공하는 도메인 형식의 API를 사용하려면, 사용을 위한 도구가 필요하다. 이를 axios 라고 부르고, 다음과 같이 설치를 진행한다.

yarn add axios

날씨 API 사용법에 따라 간단히 위도 경도만 주소에 넣어주면 날씨 데이터를 건네주는 API를 준비했다.

(** key 값은 API를 사용할 땐 API 제공 업체측에 가입을 한 다음 부여받은 키 값을 같이 줘야 하는 경우가 있다.)

날씨 API에서 전달해준 데이터

날씨 API가 주는 데이터는 위의 이미지는 짧지만 실제로 엄청 길다. 여기서 필요한 데이터만 가지고 오면 된다. 필요한 데이터를 어떻게 찾느냐?

https://openweathermap.org/current

위 링크에 API 공식문서를 보면 어떤 키값은 어떤 데이터를 뜻하는지 나와 있다. 우리는 현재 날씨 상태만 알면되므로, 다음과 같은 데이터만 가져 오면 된다.

위의 선언된 온도와 날씨 상태의 값은 딕셔너리 키값의 키값의 키값 구조, 즉 딕셔너리가 중첩으로 들어가 있는 데이터 구조이기 때문에 원하는 키값을 잘 찾고 가장 최상위 키값부터 차근차근 찾아야 한다. 그리고 확인을 위해서 밑에 로그로 찍어보는 것도 중요할 수 있다. 현재까지 상황은 외부의 서버에 요청을 해서 응답 데이터 까지 가져오는 과정인데, 여기서 끝이 아니다. 앱 화면에 계속 바뀌는 새로운 데이터를 그려줄 것이기 때문에 상태 관리를 해야한다.

 

weather 라는 상태를 선언하고, setWeather 라는 상태가 주는 상태 변경 함수를 사용해서 온도와 날씨 상태를 저장을 해서 화면 그려지게 만들 수 있는 것이다.

2. [파이어베이스] 파이어베이스

-앱 서비스에서 필요한 기능

나만의 꿀팁 앱에서는 필요한 서버적 기능이 어떤 것이 있을까?

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

👉앱 내에 데이터로써 존재한다면, 꿀팁을 업데이트 하고 싶을때 어떻게 해야할까? 앱을 항상 앱 마켓에 재배포 해야하고, 사용자들은 항상 다시금 다운로드를 받아야 하는 수고로움이 생긴다. 그렇기 때문에 서버에 데이터를 저장해두고, API 형태로 사용하면, 실시간 업데이트 현황도 앱에 반영이 될 것이다. 정리하자면 필요할 때마다 데이터를 서버로부터 가져오면 되기때문에 Light한 앱으로 사용할 수 있다.

2. 꿀팁 찜하기

👉 꿀팁 찜하기 기능도 서버에서 관리를 해야한다. 나만의 꿀팁 앱은 현재 로그인 로그아웃 기능이없지만, 여러분들이 다른 휴대폰에서 로그인 했을때 여러분의 데이터를 확인할 수 있으려면, 어디선가 관리되어야 한다. 그래야 사용자 데이터를 어디서든 관리하고 보여줄 수 있기 때문이다.

 

-파이어베이스(firebase)

앞서 이야기 했지만 파이어베이스는 구글에서 만든 서버리스 서비스 중에 하나이고 4주차 수업동안 우리는 서버를 직접 구현, 구성 할 필요없이 필요한 서버 기능을 제공하는 곳(파이어베이스)에서, 서비스를 사용할 것이다.

위의 이미지를 보면 파이어베이스가 지원하는 서버리스 서비스들이 상당히 많다. 우리가 필요한 데이터베이스, 이미지 파일 서버는 물론 여러분들이 지금은 몰라도 되는 푸시 알람 기능, 로그인 인증 기능 등등 아주 다양한 기능들이 준비되어 있다. 이 많은 기능들을 우리는 손하나 까딱 안하고 쉽게 필요한 기능만 뽑아서 사용할 수 있다.

4주차 수업에서는 서버리스 기능 중에 데이터베이스, 이미지 파일 서버를 사용하여 실습해보았다.

 

-[실습]파이어베이스 프로젝트 생성하기

https://firebase.google.com/?hl=ko 

Firebase

구글 서비스이기 때문에 구글 계정을 만들고, 바로 위의 사이트 링크에 들어가면 바로 프로젝트를 만들수 있다.

 

-가입절차 및 파이어베이스 프로젝트 생성

3. [파이어베이스] 앱 연동 및 파일 스토리지 사용

-firebase 라이브러리 설치 및 연결

프로젝트가 생성되었으면, 파이어베이스에 iOS를 개발하고 있는지 안드로이드를 개발하고 있는지 웹을 개발하고 있는지 알려줘야 개발 중인 앱에 파이어베이스를 코드단에서 연결할 수 있는 연결 정보를 준다. 일단 우린 안드로이드, iOS 앱 전용 개발을 Expo에서 따로 하고 있지 않고 자바스크립트로만 개발을 하고 있기 때문에 웹 SDK를 이용하여 쉽게 파이어베이스 사용해보려고 한다.

 

1. [실습] 파이어베이스 프로젝트 내에 앱 생성하기

2. [실습] 설치

1) 파이어베이스 연결정보 확인

2) 앱에 파이어베이스 도구 설치 및 연결

파이어베이스와 연결해주는 expo 도구를 설치하려고한다.(아래의 코드를 터미널로 설치해준다.)

 expo install firebase

설치가 완료됐으면, firebaseConfig.js 파일을 하나 생성해서 아래 우측 이미지와 같은 코드를 넣어준다. (여기서 잠깐! 접속정보에는 각자 자신의 접속 정보 코드를 넣어야 한다.)

 

firebaseConfig.js 코드 설정시 유의사항!!!!

최근 파이어베이스에서 프로젝트를 만들면 원래는 설정 코드에 넣어줬던 databaseUrl을 안넣어주고 있다. 필자 같은 경우도 프로젝트 생성시 접속정보를 가져와서 앱을 실행했는데 error가 떠서 당황 했는데, 이런 상황에서는 당황하지 말고! 다음과 같이 리얼타임 데이터베이스 탭으로 들어가서, 데이터베이스 주소를 설정코드에 넣어주면된다.

-파일 저장소 스토리지(storage)

가장 먼저 사용하게 되는 파이어베이스 서비스는 파일 스토리지이다. 간단히 파일 저장소라고 여기면 충분하다. 멀리 있는 파일 저장소에 이미지 및 사용할 파일을 올려두고, 필요할 때마다 꺼내 쓰는 용도로 사용하면 된다.

4. [파이어베이스] 리얼타임 데이터베이스 - 설정, 전체 데이터 읽기

- 리얼타임 데이터베이스

보통 데이터베이스라고 하면 SQL, MySQL과 같은 엑셀 형식의 데이터베이스 파일을 떠올릴텐데, 리얼타임 데이터베이스는 이 구조와 완전히 다른 리스트, 딕셔너리 구조, 즉 JSON 형태로 저장/관리되는 데이터베이스 서비스이다. 이 서비스를 사용 할 땐, 파이어베이스에서 제공해주는 함수들을 이용하기만 하면 데이터 저장/수정/삭제가 가능하다.

이름이 리얼타임 데이터베이스인 이유는, 플랫폼과 실시간 데이터 주고 받는 것에 특화되어 있어서 명명되었다고 한다.

 

그럼 언제 파일 저장소 스토리지를 쓰고, 언제 리얼타임 데이터베이스를 사용할까?

 

이미지 저장 → 파일 저장소 스토리지

JSON 데이터 → 리얼 타임 데이터베이스

 

이미지 데이터는 Storage에서 JSON 데이터와 같은 텍스트 데이터는 Realtime Database에서 관리된다고 구분하여 생각하면 된다.

 

1. [실습] 리얼타입 데이터베이스 생성

잠금모드로 시작하는 이유는 나중에 보안규칙을 직접 바꿔보기 위해서이다. 현재의 보안규칙의 내용은 화면 우측에 콘솔창 같은 이미지 아래 '모든 제3자 읽기 및 쓰기가 거부됩니다.' 라고 나와있다.

리얼타임 데이터 베이스가 잘 생성 되었고 각각 나와 있는 sparta-myhoneytip~~, like, tip 모두 다 딕셔너리 키값이다.

앞서 보안규칙을 잠금모드로 시작했는데, 이제 우리는 앱에서 원격으로 리얼타임 데이터베이스에 접근해서 데이터 조회, 수정, 삭제를 다 진행할 것이기 때문에 보안규칙을 false 에서 true로 모두 수정해서 바꾸기로 하겠다.

적용이 끝난 모습이다. 누구나 데이터 베이스를 도용, 수정, 삭제할 수 있다는 경고문이 나와있다.

위의 이미지 순서대로 적용해서 마지막 이미지를 보면 우리가 가진 팁들이 딕셔너리 구조로 저장이 되며, 숫자 0,1,2,3,4...은 리스트의 형태로 문제가 차곡차곡 쌓여 있는 모습을 볼 수 있다.(리스트형태)

따라서 이 데이터를 앱에 가져오게 된다면, data.json 데이터를 이용했던 것과 동일하게 사용이 가능하다. 또 image의 값 부분을 눌러보면 값을 수정할 수 있게 활성화 되는데, 만약 이미지를 수정하고 싶을 땐 우리가 파일 저장소에 올렸던 이미지 주소를 넣으면 된다.!!

 

-앱에서 리얼타임 데이터베이스 사용하기

지금까지 우리가 한 내용을 정리하자면 

 

1) 앱에 firebaseConfig.js를 설정하여 파이어베이스에 접속

2) 리얼타임 데이터베이스를 생성

3) 데이터베이스에 꿀팁(data.json) 업로드

 

그럼 이제 실제로 앱에서 파이어베이스 서버에 접속한 다음 그 데이터들을 불러오는일만 남았다. 일단 그 전에 현재 코드상황 먼저 살펴보자!

👉현재 Mainpage.js 코드 상태

파이어베이스 데이터는 과연 어디에 위치시켜야 할까? 화면이 실행되면 파이어베이스에 데이터를 요청을하고, 그 데이터를 상태관리를 해서 준비가되면 화면을 다시 보여주는 순서로, 원래 우리가 했던 Flow 대로 생각을 해서 파이어베이스 코드를 적용하면 될 것이다.

우리가 이전에 날씨 API를 호출할 때 도메인을 써서 데이터를 가져왔다면, 이번에 파이어베이스 API를 이용할 때는 파이어베이스 제공 함수 이용해보았다.

 

-데이터 가져오기 함수

데이터 가져오기 함수는 파이어베이스 도큐먼테이션에서 찾아서 가져올 수 있다.(사실 구글링이 더 빠름) 이 함수를 쭉 리뷰해보면 맨처음 나오는 firebase_db는 아까 우리가 가져왔던 firebaseConfig.js 파일에 있는 키값 이고, 그다음 ref(reference) 어떤 데이터를 조회를 할 것이냐는 의미이다. 우리는 ('/tip') 파이어베이스에 넘겼던 tip 리스트 데이터이고, https://sparta-myhoneytip-hyeon-59b35-default-rtdb.firebaseio.com/tip 앞에 주소가 생략된 이유는 이미 앞에 firebase_db 키값(firebaseConfig.js)에 주소를 다 가지고 있기 때문이다. 그 이하 코드는 snapshot 이라는 코드를 함수 내부에서 쓸 수 있게 해준다는 의미이다.

그런데 굳이 이 코드 하나하나의 의미를 파악하는 것은 시간 낭비이기 때문에 그냥 파이어베이스 데이터를 조회하려는 함수로직은 위의 이미지와 같이 정형화 되어 있다고 파악하는 것이 현명할 것이다.

ㅇ 1. firebaseConfig.js 파일에서 export해주고

2. MainPage.js 파일에서 import 해주고

3. 앞서 언급했듯이 MainPage.js 아래 UseEffect 안에 firebase 데이터를 준비를 해야해서, 위에서 언급한 데이터 가져오기 함수를 UseEffect 안에 위치시켜 적용한 모습이다.

 

위의 이미지를 통해서 서버에서 데이터를 가지고 오는 과정을 살펴볼 수 있다. 로딩화면이 보여지고, API 를 이용해서 원격 서버에 있는 데이터를 호출해서 가져와서 데이터가 준비가 되면, 앱 안에서 데이터 상태값 변경이 되면서 해당 데이터의 화면이 그려지게 되는 것이다.

 

자!!! 다시 정리해서 파이어베이스가 적용된 MainPage.js 코드를 통해 설명하자면 파이어베이스로부터 즉, 서버로부터 데이터를 가져와 준비할 때까지 로딩 화면을 보여줬다가, 데이터가 준비가되면 실제 본 화면을 보여주는 자연스러운 서비스 환경을 사용자들에게 제공해줄 수 있는 것이다.

 

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

-특정 데이터 조회하기

현재 꿀팁 앱은  메인 화면에서 꿀팁을(Card) 누르면 상세 화면으로 이동한다. 그리고 앱 하단에 카드를 누를 때 마다, 누른 꿀팁 상세 데이터를 볼 수 있는 이유는 꿀팁 컨텐츠 전체를 상세 페이지로 넘겨주고 있기 때문에 상세 페이지에서 자세한 데이터를 볼 수 있다.

우리가 이제 해 볼 것은 전체 데이터를 상세 페이지로 넘겨주는 것이 아닌, 팁 idx 번호만 넘겨준 다음 DetailPage.js 에서 idx로 상세 꿀팁 정보를 서버로부터 조회해서 뿌려주려 한다. 

Why? 이렇게 하는 이유

디테일 화면의 데이터엔 보통

 

1) 자세한 내용에 대한 데이터

2) 댓글 정도의 데이터가 담겨 있는데, 이 데이터들도 실시간으로 변경될 수 있다.(따라서 그때그때 변경된 데이터가 항상 반영되는(반영해야되는) 파이어베이스 데이터베이스로부터 가져와야 한다.)

3) 큰 데이터들이 이동하는 것은 앱 퍼포먼스 저하 원인!

 

결론!! 정리해보면 큰 데이터들이 페이지를 이동할때마다 따라다니면, 너무 무거운 앱이 될 수 있으니!!  idx 번호만 넘겨서, 필요한 데이터는 서버로부터 그때그때 가져오도록 해야겠다.!

 

1. [실습] 코드에 적용

 

1) Card.js에서 DetailPage.js 전달 데이터로 idx 넘기기

card.js 파일에 카드 함수 부분에 전체 콘텐츠가 아닌, idx 번호만 넘겨서 필요한 데이터를 가져오게 바꾸자!

기존 Card.js	idx 적용 Card.js

2) DetailPage.js에서 넘겨받은 idx 팁 상세 데이터 조회

아래 좌측 이미지 중간에 파이어베이스 가져오기 함수에 +idx를 한 모습이다. 앱화면을 봤을 때는 기존과 동일한 화면이 계속해서 나오고 있다. 그러나 VScode 에디터 안에 터미널 로그를 보면, 서버로부터 데이터를 가져오고 있음을 파악할 수 있다.

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

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

나만의 꿀팁 앱에서 파이어베이스로 데이터를 보내 저장하는 상황은 언제일까?

바로 꿀팁 찜! 하기 버튼을 눌렀을 때이다. '특정' 사용자가 우리가 만든 앱을 이용하다가 꿀팁 찜! 버튼을 눌렀다면 파이어베이스에 어떤 식으로 저장을 해야 할까? 이를 유념해서 파이어베이스에 '어떤 구조'로 데이터를 보내 저장(쓰기) 하는지 살펴보자!

 

-필요한 데이터 구조

사용자가 어떤 꿀팁을 찜! 했는 지 저장을 하고, 실제 찜 페이지에서 어떤 꿀팁인지 나열하려고, 다음과 같은 데이터들을 저장하려한다.

 

꿀팁 번호: idx

꿀팁 이미지: image

꿀팁 제목: title

꿀팁 내용: desc

 

우리가 만든 앱은 많은 사람들이 사용할 것이다. 그러면 우리가 만든 데이터베이스에도 여러 사람들의 데이터가 쌓일테니, 사용자마다 고유한 정보들을 관리하려면, 사용자 고유 ID 값 정도의 데이터가 필요하다. Expo에서는 우리가 만든 앱을 사용할 사용자들의 고유 아이디를 생성해서 알려준다. 이를 통해 사용자들마다 고유한 ID 값으로 데이터를 관리할 수 있다. 이 코드를 이용하면 앱 어디서든지 동일한 사용자 유니크 아이디를 생성 및 사용할 수 있다. 사용자마다 고유한 ID를 생성하게 해주기 위해서 아래 expo 도구를 설치하자!

 

expo install expo-constants

 

1. [실습]파이어베이스 저장 구현하기!

1) 저장 시점

디테일 페이지의 꿀팁 찜하기 버튼을 눌렀을 때 저장해야한다. 버튼을 눌렀을 때의 onPress 부분에 간단히 팝업이 뜨게끔 popup()를 달아놨는데, 이부분에 파이어베이스 기능을 추가하면 될것이다.

 

2) 저장해야하는 데이터

그럼 우린 어떤 찜 데이터를 데이터베이스에 저장해야할까?

여러 방안이 있겠지만, 지금은 간단히 DetailPage에서 idx로 조회한 해당 찜의 전체 데이터를 저장해보기로 하자!

해당 찜 데이터는 현재 const [tip, setTip] = useState() tip 상태에 저장되어 관리 되고 있다! 이 tip을 저장하면 될 것이다.

우선 처음 파이어베이스 데이터베이스를 import 해오고, 그 다음 밑에 onPress에 외부 함수를 연결해주고, 이 함수를 선언한 부분을 살펴보면 위의 마지막 이미지이다. firebase_db라는 마스터키로 파이어베이스에 접속을 하여, ref에서 어떤 방에 데이터를 저장을 할 것이지 주소를 명시해준다. 이 주소가 기존과 많이 달라졌는데 우선 '/like'라는 리스트가 리얼타임 데이터베이스에 없었는데 저렇게 코드를 써줌으로서 like라는 방을 만들면서 데이터를 저장하는 것이다. 거기에 더해서 user_id 를 넣어서 어떤 사용자가 저장한 방인지까지 명시해준다. 그 다음에 set 함수의 첫 번째 인자로 보내준 tip이라는 데이터(사용자가 선택한 꿀팁)가 저장이 되는 것이다.

아래 Realtime Datebase 를 보면 이해가 더 빨리 쉽게 될 것이다.

 

 

 

4주차 review

숙제가 참.. 애매꾸리하다.. 복습기간에 다시해봐야 할듯/...