노마드 코더 RN 왕초보 개발기 RN 배우기! 과정기 3일 차

SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용 (github.com)

2.7강

• expo-location 설치하기

npm i expo-location

• 임포트하기

import * as Location from "expo-location";

• Location.requestForegroundPermissionsAsync() 사용해보기

const premission = await Location.requestForegroundPermissionsAsync();
console.log(premission);

// 출력 {"android": {"accuracy": "fine", "scope": "fine"}, "canAskAgain": true, "expires": "never", "granted": true, "status": "granted"}

 

• android-accuracy: fine은 고정밀 위치 데이터를 사용함을 의미
• android-scope: fine은 위치 접근 범위가 고정밀임을 의미
• canAskAgain: true은 사용자가 위치 권한을 거부했더라도 다시 요청할 수 있음를 의미
• expires: never는 권한이 만료되지 않음을 의미
• granted: true는 위치 권한이 부여되었음을 의미
• status: granted는 권한이 승인되었음을 의미

• Location.getCurrentPositionAsync() 사용해보기

const locations = await Location.getCurrentPositionAsync({ city: 5 });
console.log(locations);

// 출력 {"coords": {"accuracy": 100, "altitude": 27, "altitudeAccuracy": 85.87849426269531, "heading": 0, "latitude": 37.4826964, "longitude": 126.6341595, "speed": 0}, "mocked": false, "timestamp": 1717650969032}

• coords : 위치 정보와 관련된 좌표 값을 포함하는 객체
  • accuracy: 위치 정확도를 미터 단위로 나타냄.
    1. 이 경우 위치 정확도는 100미터
  • altitude: 고도 값을 미터 단위로 나타냄
  • altitudeAccuracy: 고도 정확도를 미터 단위로 나타냄
  • heading: 사용자의 방향(북쪽을 기준으로 시계방향 각도)을 나타냅니다. 0은 북쪽을 의미
  • latitude : 위도 값을 나타냄
• mocked: false는 이 위치 정보가 실제 위치 데이터를 기반으로 하고 있음을 의미.
  • 만약 true였다면, 위치 정보가 시뮬레이션된 값임을 의미
• timestamp: 위치 정보가 수집된 시간의 타임스탬프
  • 이 값은 Unix 타임스탬프로 밀리초 단위로 표현 됨.
• Location.reverseGeocodeAsync() 사용해보기

const locations = await Location.reverseGeocodeAsync(
      { latitude, longitude },
      { useGoogleMaps: false }
    );
console.log(locations)

// 출력 [{"city": null, "country": "대한민국", "district": "동구", "formattedAddress": "대한민국 인천광역시
동구 송현동 66-774", "isoCountryCode": "KR", "name": "66-774", "postalCode": null, "region": "인천광역시",
"street": "송현동", "streetNumber": "66-774", "subregion": null, "timezone": null}]

• city: 도시 이름
• country: 국가 이름
• district: 구/군 이름
• formattedAddress: 전체 주소를 포맷된 문자열
• isoCountryCode: ISO 국가 코드
• name: 위치의 이름
• postalCode: 우편번호
• region: 지역(광역시/도)
• street: 거리 이름
• streetNumber: 거리 번호
• subregion: 하위 지역 정보
• timezone: 시간대

문제 발생!! city 값이 null임!

• street으로 수정해서 해결

setStreet(locations[0].street);

2.8강

• open Weather API 이용하기
  • https://home.openweathermap.org/
• 회원가입 하기 / 로그인하기
• api key 받아오기
  • https://home.openweathermap.org/api_keys
• 3-hour Forecast 5 days 사용하기 (One Call API 3.0는 구독해야 함.)
  • https://openweathermap.org/forecast5
• 사용법

const res = await fetch(
      `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`
    );

const data = await res.json();

• ActivityIndicator 사용하기
  • RN에서 제공해주는 로딩바임.

daily가 없음.

• list로 해결
  • [0] 번째를 출력

{
  "clouds": {
    "all": 29
  },
  "dt": 1717664400,
  "dt_txt": "2024-06-06 09:00:00",
  "main": {
    "feels_like": 300.31,
    "grnd_level": 1014,
    "humidity": 47,
    "pressure": 1014,
    "sea_level": 1014,
    "temp": 300.06,
    "temp_kf": 6.29,
    "temp_max": 300.06,
    "temp_min": 293.77
  },
  "pop": 0,
  "sys": {
    "pod": "d"
  },
  "visibility": 10000,
  "weather": [
    {
      "description": "scattered clouds",
      "icon": "03d",
      "id": 802,
      "main": "Clouds"
    }
  ],
  "wind": {
    "deg": 260,
    "gust": 5.65,
    "speed": 4.28
  }
}

• day.temp.day가 아니라 day.main.temp로 해결!

2.10강

• Fontisto 사용하기
  • 많은 아이콘을 밑에서 홈페이지에서 찾아서 사용할 수 있다. (엄청 많다.)
    1. https://icons.expo.fyi
• 임포트 하기

import { Fontisto } from "@expo/vector-icons";

• 사용하기

<Fontisto
    style={{ marginLeft: 20, marginRight: 20, marginTop: 20 }}
    name={icons[day.weather[0].main]}
    size={70}
    color="white"
/>