[RN] study 2week ②Weather App

[Weather App 만들기]

React Native로 만든 위치 기반 날씨 App. ( 가운데 - 위치정보 동의  안한 경우 )

-

snack.expo.dev 에서도 시뮬레이터 볼 수 있음~

-

 

div 사용 불가~ => View

StyleSheet.create

expo-status-bar

-

——————2.4 Layout with Flexbox——————

 

npm start

=> press i 

==> Opening on iOS 

 

-기본적으로 모든 View는 Flex Container임. display=flex 필요 없어. 그리고 RN에서 Flex Direction의 기본값은 column임. (웹에서는 row)

-flex 부모를 만들고 자식을 내가 원하는 비율로 조정할 수 있음.

 

——————2.5 Style——————

expo 패키지로 위치 정보 가져오기.

  const [city, setCity] = useState("Loading...")
  const [location, setLocation] = useState();
  const [ok, setOk] = useState(true);
  const ask = async() => {
    const {granted} = await Location.requestForegroundPermissionsAsync();
    if(!granted){
      setOk(false)
    }
    const {coords: {latitude, longitude}} = await Location.getCurrentPositionAsync({accuracy: 5})
    const location = await Location.reverseGeocodeAsync({latitude, longitude}, {useGoogleMaps: false})
    setCity(location[0].city)
  }
  useEffect(()=> {
    ask();
  })

requestForegroundPermissionsAsync

=>Asks the user to grant permissions for location while the app is in the foreground.

getCurrentPositionAsync

=>Requests for one-time delivery of the user's current location. Depending on given accuracy option it may take some time to resolve, especially when you're inside a building.

reverseGeocodeAsync

=>Reverse geocode a location to postal address. Pick<LocationGeocodedLocation, 'latitude' | 'longitude'>

 

——————2.6 Styles part Two——————

<StatusBar style='light' />
 
<ScrollView 
        horizontal 
        pagingEnabled 
        showsHorizontalScrollIndicator={false}
        // indicatorStyle='white'
        contentContainerStyle={styles.weather}>

ScrollView

horizontal

contentContainerStyle

 

핸드폰 규격 Dimensions

const { width: SCREEN_WIDTH } = Dimensions.get("window");

 

pagingEnabled //좀 더 sticky하게 페이지 넘어감

showsHorizontalScrollIndicator={false} //스크롤바 없애기

indicatorStyle='white' //only iOS 

 

error——> sdk 47버전으로 업데이트

npm i expo@latest

——————2.7 Location——————

 

expo install expo-location

 

날씨 API 

https://openweathermap.org/api

Weather API - OpenWeatherMap

=> 강의에서는 One Call API 2.5를 이용하지만, 현재 3.0은 무료가 아니라서(아니, 엄밀히 1,000 API calls per day for free이긴 한데) 아무튼 Call 5 day / 3 hour forecast data 이용했다. 다른 절차 필요없이 무료로 이용할 수 있는 API라서.

 

 [React Native에서 외부 API 값 숨기기]

(강의 외) => api key 노출을 막기 위해 .env 파일을 이용했다. 

npm install react-native-dotenv https://github.com/goatandsheep/react-native-dotenv

.env 파일 만들어서 key값(APP_WEATHERAPI="실제키값") 넣어주고,

✅ 체크사항 => .env 파일 생성 위치, 설치 후 서버 재부팅(설명생략)

.gitignore에 .env 추가하고, 

babel.config.js 파일에 플러그인 설정해주고,

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ["module:react-native-dotenv", {
        "envName": "APP_ENV",
        "moduleName": "@env",
        "path": ".env",
        "blacklist": null,
        "whitelist": null,
        "safe": false,
        "allowUndefined": true,
      }]
    ]
  };
};

 

App.js에서 @env로 불러온다,

import {APP_WEATHERAPI} from "@env"

console.log(APP_WEATHERAPI)

——————2.10 Icons——————

import { Ionicons } from "@expo/vector-icons"

 

참고 https://icons.expo.fyi/

@expo/vector-icons directory