리액트 네이티브 react native 위치 API 가져오기 / 콘솔보기 / 디버깅 활성화

 

1 완전 native: swift, objective-c로 ios 앱 만들고 java, 코틀린으로 안드로이드 앱 만드는 것

2 앱 기반 웹 뷰 만드는 것 (심플한 앱. 앱 안에서 작동하는 웹 개념. 하이브리드 앱 뷰)

3 리엑트 네이티브: 자바스크리트 엔진을 가지고 있어서 안드로이드, ios 둘다 가능. 자바스크립트 이용해서 두 영역 네이티브 엔진에게 다 보내는 것. 브릿지. View, Text… 항상 브릿지가 필요하다는게 단점. 성능이 느려질 수 있음. 3D 비디오게임, 3D증강현실앱 같은건 리액트로 만들지 않는게 좋다는 것. 

 

-

disconnected 되면 ctrl C 하고 다시 yarn start.

앱 새로고침 안되면 expo 껐다 켜기 

-

flex direction 기본값은 column. 위에서 아래로 착착착. 가로로 세우려면 row.

flex:1 = 모든 공간 사용 가능 

Wrap 에 flex: 1 안하면 그 안에든거 다 표시 안됨 

 

-

react native API 가져오려면 보통

https://reactnative.dev/docs/accessibilityinfo

여기서.

 

검색해서 가져오기 

 

위치 가져올 건데 

https://reactnative.dev/docs/geolocation

여기 있다. 그렇게 강력하지는 않지만 심플하게만 쓸거니까 괜찮다.

 

근데 expo 지리 API도 있다.

https://docs.expo.io/versions/latest/sdk/location/#locationinstallwebgeolocationpolyfill

이게 더 기능이 많다. 

 

기본 다운되지는 않으므로 다운받기 

 

 

-

콘솔보기

 

 

 

디버깅 활성화 방법

1. expo 앱이 켜져 있고 앱이 떠 있는 상태에서 핸드폰을 흔든다. 그러면 여러 가지 개발자 메뉴가 나온다.

2. 이 중 ‘Debug JS Remotely’를 선택한다.

3. 그러면 로컬 PC에 크롬으로 연결되고, 개발자 도구를 켜라는 안내가 나온다.

4. 이제 개발자 도구를 통해 디버깅을 수월하게 할 수 있다.

 

그리고 나오는 사이트에서 개발자 도구 켜면 콘솔 나온다 

 

getLocation = async() => {

    try {

      await Location.requestPermissionsAsync();

      const location = await Location.getCurrentPositionAsync();//Async는 await이 필요 

      console.log(location);  

    }catch(e){

      Alert.alert("Can't find you", "So sad"); 

    }

  }

이렇게 설정해서 permission 얻으면 location에 정보 들어옴

 

throw Error();

 

하면 아래 catch 에 뜬 알러트 뜸 

 

 

 const {coords: {latitude, longitude}} = await Location.getCurrentPositionAsync();

 

getCurrentPositionAsync로부터 coords.latitude, coords.longitude 가져올 수 있음 

-

날씨 API

https://openweathermap.org/api

가입해야 API key를 줌

https://home.openweathermap.org/api_keys

 

const API_KEY = '2c161d62fd64afb3b5ae2dc7d6340c1c';

 

API KEY 가져옴

 

현재 날씨 데이터 가져오는 API 문서로 가서

지리적 좌표(coords / latitude / longitude) 로 가져오는거 사용하기 

 

처음에 current 가져오는거 

api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

이렇게 하래서 했는데 오류나서 

 

https://openweathermap.org/appid#example

여기 들어가니까 &id=524901을 &appid 앞에 넣으래서 넣었더니 

http://api.openweathermap.org/data/2.5/weather?lat=37.30120106623706&lon=127.07166795437479&id=524901&appid=2c161d62fd64afb3b5ae2dc7d6340c1c

 

{ "coord": { "lon": 127.07, "lat": 37.3}, "weather": [{ "id": 801, "main": "Clouds", "description": "구름 몇 개", "아이콘 ":"02d "}],"base ":"stations ","main ": {"temp ": 290.09,"feels_like ": 287.86,"temp_min ": 289.15,"temp_max ": 291.15,"pressure ": 1028 , "humidity": 51}, "visibility": 10000, "wind": { "speed": 2.1, "deg": 260}, "clouds": { "all": 20}, "dt": 1605248242, "sys": { "type": 1, "id": 5498, "country": "KR", "sunrise": 1605218931, "sunset": 1605255800}, "timezone": 32400, "id": 6573030, "name": "남향 동", "대구":200}

 

이렇게 나옴 

 

-

Axios

 

그리고 fetch를 위해서 Axios 설치해야함 

데이터들을 fetch 해야해서. 

앱 안에서.

 

npm install axios 

 

import axios from ‘axios’;

 

근데 

  getWeather = async(latitude, longitude) => {

    const {data} = await axios.get(`아까 그 날씨 api 주소`)

  }

 

여기서 날씨 api 주소를 쌍따옴표(“)나 홑따옴표(‘) 말고 백틱(`)으로 감싸야 한다. 

변수를 문자열에 포함시킬 거라서. 

 

백틱 안에 주소 안에 latitude, longitude 주소는 주소 바로 쓰지 말고 ${latitude}, &{longitude}로 써서 넣는다. 

= template string. 자바스크립트 언어.  

-

https://openweathermap.org/weather-conditions

    condition: PropTypes.oneOf(["Thunderstorm","Drizzle","Rain","Snow","Atmosphere","Clear","Clouds"]).isRequired;

 

isRequired : 이 요소를 요청해! 없으면 안돼!