[react native] 날씨앱 만들기 정리

처음으로 리엑트 네이티브를 공부하기 시작한 것은... 사실은 한 번쯤 스토어에 내 어플을 올려보고 싶다는 생각을 해서 처음엔 스위프트&flutter 강의를 결제 했었다. 그런데 과연 프론트엔드 개발자로서 갑자기 다른 언어를 배워서 써먹겠다고 이 중요한 시기에 js 말고 다른 언어를 배우는 것이 맞을까? 그게 과연 효율적일까? 라는 생각이 자꾸만 들었다.

 

게다가 왠지 업무 개발을 할 때에도 괜히 그 언어로 썼던 습관 때문에 자꾸 헛손질을 하게 되는 것 같은 느낌이 들어서 이왕 배우는 거 react-native를 통해 자바스크립트 문법을 이용한 개발을 배워보고자 했다.

 

리엑트에는 많은 장점이 있는데 그 중 하나는 IOS와 안드로이드 개발이 동시에 가능하다는 것이고 또 하나는 커뮤니티가 굉장히 크고 잘 되어 있어서 다른 사람들이 만든 컴포넌트를 가져다 쓰기 아주 편리하다는 것이다. 물론 두번째는 나중 가면 단점이 되어 돌아올수도 있지만 처음 접근하기에 이만한 언어는 또 없는 것 같았다.

 

내가 만든 최종 결과물은 다음과 같다. 노마드 코더의 무료 강의를 보고 만들었는데 모양과 기능은 내가 조금 수정해서 노마드 코더 니코의 완성본과는 조금 다르다. 내 생각에는 꽤 괜찮게 만들어진 것 같다. 이 무료 강의를 전부 들은 다음에는 유료 강의로 넘어가서 react-native를 좀 더 심도 있게 공부해 보고자 한다.

 

 

 

리엑트 네이티브는 doc이 굉장히 잘 되어 있고 실제 기기를 통해 동작 확인이 바로바로 가능해서 어떤 기능을 어떻게 쓰면 좋을지 명확하게 알 수 있었다.

리엑트 네이티브 설치하기

리엑트 네이티브 설치는 나는 mac 환경에서 진행했다. window에서는 좀 다른 방법을 사용해야 할 수도 있겠다.

expo 다운로드

npm install --global expo-cli

watchman 설치

brew update
brew install watchman

여기까지만 하면 필요한 것은 전부 설치가 끝났고 이제 프로젝트 파일에 가서 expo를 통해 새 프로젝트를 생성해주면 된다.

expo init weather // 프로젝트 생성
cd weather //weather 폴더로 이동
npm start // 서버 실행

화면은 애뮬레이터와 실제 기기(expo go 앱)를 통한 확인이 있는데 나는 실제 기기에 expo 앱을 다운로드 받아서 테스트를 진행했다. 역시 애뮬레이터보다는 실제 핸드폰을 통해 정확한 동작을 확인하는 게 아직 초보자인 입장에서 더 나을 것 같았다.

가장 먼저 실행했을 때 나오는 App.js 파일은 다음과 같다. 리엑트 네이티브에서는 html에서의 div 단위가 아닌 <View> 단위로 개발이 진행된다.

• <View> : 일종의 컨테이너 단위. 기본적으로 flex-box 의 성질을 가진다.
• <Text> : 글자를 넣기 위해서는 반드시 이 안에 넣어야 한다.
• ScrollView : 스크롤이 가능한 컨테이너. 스크롤 동작 또한 내장된 기능을 통해 조절할 수 있다.
  • 기본적으로 scrollview는 제공되지 않음 따로 import해야함
  • scrollView를 사용할 시 기존 style은 먹히지 않음 -> ContentContainerStyle 로 변경해야 함
  • 스크린보다 큰 scroll을 하고싶다면 flex를 사용하지 말아야 함

다른 요소가 있는지는 모르겠지만 날씨 앱을 만들면서 사용한 것은 저 세개가 전부이다. 이것들 만으로도 꽤 괜찮은 앱이 만들어졌고 비슷한 레이아웃의 앱도 만들 수 있을 것 같다.

//App.js 파일

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

// 스타일은 다음과 같이 하단에 지정.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

서드 파티 패키지

API : 자바스크립트를 통해 만들어진, 운영체제와 소통 가능한 것을 말한다. 리엑트 네이티브에서 제공하는 컴포넌트와 커뮤니티에서 자체적으로 만든 컴포넌트 및 expo에서 제공하는 다양한 api들이 있으니 이를 적절히 사용하여 개발하면 된다.

• https://docs.expo.dev/versions/latest/
• https://reactnative.dev/docs
• https://reactnative.directory/

dimensions

• 화면의 길이를 가져올 수 있음

pagingenables

• 스크롤을 자유롭게 못하게 함

showsHorizontalScrollIndicator

• 아래에 생기는 스크롤 표시를 삭제해줌

indicator style

• ios만 됨... 이런 props가 여러개 있으니 doc 주의하여 사용

location

해당 기능을 사용하기 위해선 expo install expo-location을 사용해야 함

아래 코드는 위치 추적 허가를 받아왔는지 확인하는 코드...

• 의도치 않은 이슈 : useState 자동완성이 2개 있는데 react용 useState를 써야 에러가 안남. 코드 컬러링 반응도 다름.

import * as Location from 'expo-location';
export default function App() {

const [location, setLocation] = useState();
const [ok, setOk] = useState(true);
const ask = async() =>{
const permission = await Location.requestForegroundPermissionsAsync();
  console.log(permission)
}

useEffect(()=> {
  ask();
}, [])

• location 가져오기
• latitude, longitude : 위도와 경도
• accuracy는 정확도로 1~6 사이의 값을 가진다

const {coords:{latitude, longitude}} = await Location.getCurrentPositionAsync({accuracy:5});
// 위도와 경도를 통해 현재 위치명을 역으로 가지고 옴
const location = await Location.reverseGeocodeAsync({latitude, longitude}, {useGoogleMaps:false});

api에서 날씨 정보 가져오기

사용한 api : https://openweathermap.org/api/one-call-api

다음과 같은 형태로 정보를 가지고 옴

const response = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=33.44&lon=-94.04&exclude=hourly,daily&appid={API key}`)
const json = await response.json()

• 이슈

리스트 만들 때는 이렇게 해야함...

const [days, setDays] = useState([]);

reverseGeocodeAsync : 위도와 경도를 주소로 변환해줌.

GeocodeAsync: 주소를 위도, 경도 숫자로 변환해줌.

icon

expo를 설치하면 expo/vector-icon이 자동으로 설치된다.

https://docs.expo.dev/guides/icons/

icon doc : https://icons.expo.fyi/