Weather API

Fetch API를 사용하여 앱 외부에 있는 날씨 데이터를 가져오기 위해서는 날씨 정보를 가지고 있는 API가 필요합니다.

• OpenWeather: https://openweathermap.org/api

OpenWeather에서 제공하는 날씨 API를 사용하기 위해서는 회원가입이 필요하고 회원 가입을 하면, 날씨 API를 사용할 수 잇는 키를 가입할 때 사용한 이메일로 발송됩니다.
이 키를 사용하여 날씨 정보를 가져올 수 있습니다.

위치 정보

이번 예제에서는 react-native-geolocation-service 라이브러리를 사용하여 위치 정보를 습득할 예정입니다.

• react-native-geolocation-service: https://github.com/Agontuk/react-native-geolocation-service

react-native-geolocation-service 라이브러리를 사용하기 위해서는 다음 명령어를 사용하여 라이브러리를 설치합니다.

npm install -save react-native-geolocation-service

iOS에서 react-native-geolocation-service를 사용하여 위치 정보를 습득하기 위해서는 코코아포드를 통해 필요한 라이브러리를 링크하기 위해 ./ios/Podfile을 열고 수정합니다.

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'

target 'WeatherApp' do
  ...
  pod 'react-native-geolocation', path: '../node_modules/@react-native-community/geolocation'

  target 'WeatherAppTests' do
    inherit! :search_paths
    # pods for testing
  end

  use_native_modules!

end
...

파일을 수정했다면 라이브러리를 명령어로 연동합니다.

# cd ios
pod install

iOS, 안드로이드에서 위치 정보를 사용하기 위해서는 사용자 권한(promission) 설정이 필요합니다. iOS에서 권한 설정을 하기 위해, ./ios/Weather/Info.plist 파일을 열고 NSLocationWhenInUseUsageDescripton을 찾아서 수정합니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	...
	<key>NSLocationWhenInUseUsageDescription</key>
	<string>날씨 정보를 가져오기 위해서는 위치 정보 권환이 필요합니다.
    ...
</dict>
</plist>

이것으로 react-native-geolocation-service 라이브러리를 사용하여 위치 정보를 가져올 준비가 끝났습니다.