REACT-NATIVE(EXPO) SNS 프로젝트 시작(3)

expo❗

expo의 매력은 다음과 같다.

​

1.  REACT-NATIVE의 개발 환경을 좀 더 쉽게 구성해준다.
2.  실제 핸드폰과 연동하여 시뮬레이션을 가능하게 해준다.
3.  좀 더 넓은 개발 기능을 지원한다.

​

이런 이유 때문에 expo를 사용하여 개발하고 있다.

좀 더 큰 기업에서는 REACT NATIVE를 이용하여 직접 react 파일에 접근하여 개발한다고 한다.

하지만 노마드 선생님의 이야기에 의하면 expo로도 충분히 개발이 가능한 모양이다.

​

expo를 이용한 개발 방식은 javascript를 이용한 앱 개발이다.

이는 웹을 앱처럼 구동시키는 방식이다.

편리한만큼 개발의 한계는 뚜렷하다는 단점이 있다.

---

개발 규칙❓

원래의 REACT와 비교하면 많은 것이 다르다.

우선 REACT NATIVE에서는 VIEW와 TEXT라는 요소를 html 태그 대신에 사용한다.

복잡한 div와 span이나 p의 구분이 거의 없다.

​

그리고 스타일을 입히는 방식에도 차이가 있다.

...
return (
    <View style={styles.container}>
      <View style={styles.halfContainer}>
        <MaterialCommunityIcons size={96} name="weather-lightning-rainy" />
        <Text style={styles.temp}>{temp}℃</Text>
      </View>
      <View style={styles.halfContainer} />
    </View>
  );
...
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  temp: {
    fontSize: 42,
  },
  halfContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

이런 식으로 REACT NATIVE에 포함된 StyleSheet을 이요하여 생성한 스타일 객체를 View나 Text 객체에 style props로 넘겨준다.

이런 식으로 한 컴포넌트 안에서 로직과 스타일 모두를 처리하는 편이다.

​

추가적으로 default로 설정되어 있는 CSS의 설정에도 차이가 있다.

우선 세로로 긴 모바일 화면을 고려하여 요소들은 전부 가로가 아닌 세로로 배열된다.

또한 View는 div 같은 영역이며 flex를 이용하여 화면의 어느 영역을 차지할 것인지 배당을 준다.

그리고 CSS의 오류는 편리하게도 바로 console로 드러난다. 때문에 CSS의 오타를 발견하기가 매우 쉽다.

​

마지막으로 원래는 없지만 REACT-NATIVE에만 존재하는 CSS 속성명들이 있다.

그런 점들을 잘 참고하여 스타일을 구성해야 할 것이다.

---

API🚩

expo의 편리한 점 중의 하나는 API의 제공이다.

expo 홈페이지의 DOCS 탭을 클릭하면 expo가 제공하는 수 많은 기능을 볼 수가 있다.

​

그 중에 이번 강의에서 관심 있는 건 location이다.

location은 원래 자바스크립트에선 Geolocation이었다.

expo의 문서에서는 location의 기능과 사용 방법이 자세하게 나와있다.

​

우선 Location을 import해서 받아와야 사용할 수 있다.

import * as Location from "expo-location";

여기서 원하는 건 사용자의 위치 정보를 얻는 것이다.

위치 정보는 위도와 경도인 latitude, longitude를 얻어온다.

이 두 변수를 얻어오는 함수가 location의 getCurrentPositionAsync()다.

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

하지만 이 함수를 이용하기 전에는 먼저 사용자의 동의를 구하는 함수가 실행되어야 한다.

동의 없이는 위치 정보를 수집할 수 없기 때문이다.

동의를 구하는 기능 역시 location의 함수로 구현되어 있다.

await Location.requestForegroundPermissionsAsync();

원래는 requestPermissionAsync()였지만 사용하면 다른 이름의 두 함수를 사용하라고 에러가 뜬다.

​

requestForegroundPermissionsAsync()

requestBackgroundPermissionsAsync()

​

이렇게 두개 인데 차이점은 이 앱이 foreground 상태일 때 허가를 맡는 것과 background 상태일 때 허가를 맡는 것의 차이다.

이러헥 앱의 background에 있을 때도 사용자에게 허가를 요청할 수 있는데 foreground의 허가가 요청되기 전까지는 background 상태일 때 허가를 요청할 수 없다고 한다.

​

아무튼 이렇게 사용자의 위치 정보를 얻을 수 있다.

강의는 이 위치 정보를 이용하여 날씨 정보를 얻으려고 한다.

​

날씨 정보를 얻는 건 EXPO의 기능 밖의 일이다.

따라서 외부 API를 이용해야 한다.

우리가 이용한 건 저번에도 사용한 적 있는 openweathermap이다.

---

openweathermap🌍

openweathermap.org 사이트에 들어가면 로그인만 하면 누구든 날씨 정보를 얻을 수 있는 API KEY를 발급해준다.

나는 저번에 API KEY를 발급받았던 적이 있기 때문에 또 만들지 않았다.

​

먼저 외부 API 통신을 위해 HTTP 통신 라이브러리를 인스톨했다.

평범하게 권고되는 HTTP 통신 라이브러리는 AXIOS다.

​

AXIOS는 Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하기 때문에 인기가 있다.

​

⛔ 그러면 잠깐!

promise 기반의 HTTP 통신 라이브러리가 도대체 무슨 의미일까?

어렵게 생각할 것 없이 Promise는 비동기 작업의 순서들을 정해주는 것이다.

이게 무슨 말인가하면 비동기 작업이 끝난 뒤에 A와 B를 실행해라... 등의 순서를 지정해주는 개념이다.

​

이게 왜 필요한가하면 함수는 무조건 순서대로 흘러가지 않기 때문에 비동기 작업이 완료되기도 전에 더 먼저 끝나는 다른 작업을 처리하는 경우가 있다.

그런 경우 개발자의 의도와 완전 엇나간 결과를 초래하기 때문에 이런 비동기 작업들의 순서를 제어하는 기능이 필요하다.

​

Promise는 하나의 기능이 아니라 비동기 함수가 끝나면 반환되는 객체다.

Promise 객체는 3가지 상태 대기(작업 완료 전), 이행(작업 완료 후), 거부(작업 실패)를 가지기 때문에 이를 통해 비동기 작업의 상태를 알 수 있다.

​

참고로 대부분의 비동기 작업은 Promise 객체를 반환한다.

그리고 promose 객체에 .then()이나 .catch() 메소드를 사용해 이행 상태일 때 다음 작업을 처리할 수 있도록 하는데... 이런 번거로운 작업이 싫어서 나온게 async, await다.

​

async와 await는 함께 쌍으로 붙어다니는 세트 메뉴다.

async는 특정 함수를 비동기 함수로 만든다.

그리고 await는 비동기 작업이 결과를 낼 때까지 기다린다.

​

✅ 그러면 본론으로 돌아와서.

npm i axios 로 패키지를 설치하고 import하면 사용할 수 있다.

.axios.get(url)을 이용하여 HTTP GET 요청을 날리는 작업을 할 수가 있다.

const { data: { main: { temp }, weather, }, } = await axios.get( `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&APPID=${API_KEY}&units=metric` );

Promise 기반이라는 의미는 이 뒤에 .then과 .catch를 사용해 작업 순서를 지정할 수 있다는 것이다.

하지만 여기선 사용하지 않는다.

​

저 URL에 접근하면 우리가 반환받아올 데이터를 조회할 수 있다.

그 중에 우리가 필요한 부분을 뽑아온 게 저것이다.

​

temp와 weather 객체.

기온과 날씨다.

​

이렇게 허무할 정도로 간단하게 위치 정보와 날씨 정보를 얻어오는데 성공했다.

다음은 Style의 영역이다.

---

vector-icons

expo는 사용자들에게 유용한 아이콘 세트를 제공한다.

이 icon 세트에는 패밀리라는 그룹화가 되어있고 각 패밀리의 아이콘 세트들이 있는 것이다.

​

우리가 원하는 건 현재 날씨에 걸맞는 날씨 아이콘이다.

vector-icons가 어떤 패밀리들을 가지고 있는 각 패밀리들은 어떤 아이콘을 제공한는지는 expo 사이트에서 찾아볼 수 있다.

​

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

 

우리가 선택한 패밀리는 MaterialCommunityIcons이다.

import 방법은 위와 같다.

​

expo의 기본 제공 아이콘이니까 굳이 뭘 설치해줄 필요는 없다.

그냥 사용하면 된다.

 

<MaterialCommunityIcons size={96} name="weather-lightning-rainy" />

 

사용방법은 위와 같이 객체 형태로 사용하면 되고 패밀리의 어떤 아이콘을 불러올건지는 name을 통해서 지정해준다.

참고로 size를 통해 간단한 Style 설정도 할 수 있다.

​

​

​

오늘은 여기까지.

그럼 이만 🖐🖐