2. [앱과 서버] 우리 앱에서의 서버
- api유형에는 두 가지가 있다.
1. 서버가 제공하는 도메인(url주소) 사용해 데이터를 요청
2. 서버가 만들어 놓은 함수 사용해 데이터를 요청
- 우리가 쓸 서버는 json데이터를 줄거다
- 서버에 데이터를 요청하는 규칙을 API (application programming interface)라고 한다.
- 서버에 항상 api 를 따라 데이터를 요청하면 된다.
- useEffect안에서 필요한 데이터를 요청해 준비하고
- useState로 데이터를 활용할 것이다
3. [앱과 서버] 날씨 서버 외부 API - 휴대폰 위치 가져오기
[날씨 api 사용해보기]
1. 현재 위치(좌표) 필요 -> expo location 활용
2. 현재 위치 날씨 데이터 요청
우리가 사용할 날씨 api 공식문서
https://openweathermap.org/current
Current weather data - OpenWeatherMap
Access current weather data for any location on Earth including over 200,000 cities! We collect and process weather data from different sources such as global and local weather models, satellites, radars and a vast network of weather stations. Data is avai
openweathermap.org
expo location 사용을 위한 공식문서 안내
https://docs.expo.dev/versions/latest/sdk/location/
Location - Expo Documentation
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
docs.expo.dev
설치하기
expo install expo-location[async await]
- javascript 는 무거운 기능들(네트워크나 파일 시스템에 접근하는 무거운 기능들 ex.서버에서 데이터 받아오기, 갤러리 사진 가져오기)을 할 때 그냥 시키면 순서를 지키지 않고 빨리 끝나는 대로 결과값을 던져줌.
- 실행 순서를 꼭 지키고 싶을 때 사용.
- 함수 선언 시 앞에 async 를 붙임
- 순서를 지켰으면 하는 부분마다 await을 붙여줌. 첫번째 await부분의 실행이 끝난 후에야 그 다음 await 뒤의 코드가 실행됨.
4. [앱과 서버] 날씨 서버 외부 api - api 적용
api 사용을 위한 키 값을 발급
도메인을 사용한다고 했으니 도메인을 입력하고 연결할 도구를 사용해야 함 : axios
자바 스크립트 도구임.
yarn add axios데이터에 대한 설명은 날씨 api의 공식문서 참고해야 함
https://openweathermap.org/current
복잡한 json데이터의 구조를 파악해 필요한 데이터를 뽑아내야 함
5. [서버리스] 서버를 사용만 하자! 서버리스(Serverless)란?
- 서버를 직접 구현할 필요없이 원하는 기능만 사용할 수 있도록 해주는 서비스
6. [파이어베이스] 파이어베이스(firebase) 소개
- 구글의 서버리스 서비스
- 로그인, db, storage등..
- 회원가입하고 프로젝트 생성. 구글 애널리틱스 새 계정 생성해도 되고.. 트래픽 등 분석 결과를 나중에 구글 애널리틱스에 해당 계정으로 들어가서 확인할 수 있음.
7. [파이어베이스] 파이어베이스를 앱에 연결하기
** Reactnative는 웹개발 언어로 개발중이므로 플랫폼 중 웹을 선택해야 함!!
앱 등록 후 나오는 firebaseConfig코드를 내 프로젝트에 넣어줘야 함
그 전에 내 프로젝트에 firebase를 설치해 줌
expo install firebase
firebaseConfig코드가 서비스 키 값 역할을 함
내 프로젝트의 components 폴더 안에 firebaseConfig라는 js파일을 새로 생성하고
그 안에 firebaseConfig코드가 포함된 코드를 넣음. 정확한 내용은 공식문서 참고
8. [파이어베이스] 파일 스토리지(storage)
Firebase 의 Storage 기능을 사용해 데이더를 저장하자.
Storage : 데이터를 url주소로 접근 할 수 있는 저장소.
Storage 생성을 하면 버킷(저장소)이 생성됨
새 폴더를 만들고 아무 이미지나 올려
9, 10, 11은 Realtime Database 관련 내용.
나는 주로 Firestore를 사용하왔어서 일단 안 듣고 넘어감.
ReactNative와 연결하는 방법은 나중에 들어두기
'ReactNative' 카테고리의 다른 글
| [React Native] 스파르타 앱개발 종합반 5주차 (0) | 2021.08.15 |
|---|---|
| [React Native] 스파르타 앱개발 종합반 3주차 (0) | 2021.08.15 |
| [React Native] 스파르타 앱개발 종합반 2주차 (0) | 2021.08.15 |
| [React Native] 스파르타 앱개발 종합반 1주차 (0) | 2021.08.15 |
