개발 블로그

출처 : 노마드코더 - React Native로 날씨앱 만들기

<Getting the Weather>

Step 1) API KEY 가져오기

• https://openweathermap.org 에 접속한다.
• 상단의 sign in 을 클릭한다. (회원 가입을 하도록 한다.)

• API keys를 클릭한다.
• API keys 가 없으면 새로 생성한다.
• API key를 복사해서 App.js 파일에 붙여넣자. (line 7)

Step 2) API 호출하여 정보 얻기

• https://openweathermap.org/api에 접속하여 ‘Current Weather Data -> API doc’ 를 클릭한다.

• 우리가 사용할 것은 ‘By geographic coordinates’방식이며 위의 방법으로 api 를 호출해주면 된다.
• 먼저 API call을 참고하여 브라우저에서 시도해보면 결과는 아래와 같다.

• API Key를 포함해서 다시 시도해보자.
• API Key를 포함하여 테스트하는 방법은 API 탭을 클릭한 후 하단으로 스크린을 내리고 ‘How to start -> Example of using API key in API call’에 나와있다.

• &APPID = {APIKEY}를 브라우저 주소창에 추가하여 결과를 보면 아래와 같다.
• 날씨에 관한 전반적인 정보를 얻을 수 있다.

Step 3) App 내부에 URL fetch하기

• fetch를 위해 Axios를 설치한다.
• vscode terminal 에 아래의 명령을 실행한다.

$npm install axios

• 그 후 코드를 아래와 같이 수정한다.(line 6, 13–17, 27)

• 이때 주의할 점은, 변수를 문자열에 포함시키기 위해 URL을 백틱(`)으로 감싸야한다는 것이다(line 15). 참고로 백틱은 맥에서 option키를 누르고 숫자 1 옆에 있는 ₩ 를 누르면 된다.

출처 : 노마드코더 - React Native로 날씨앱 만들기

Step 1) expo application 실행

$ npm start

• vscode 터미널에 위와 같이 입력하면 자동으로 ‘export DEV tools’ 창이 크롬에 열린다.

• 안드로이드 폰 유저는 폰의 expo앱을 열어 QR code 를 스캔하면 폰에서 앱을 테스트할 수 있다.
• ios 유저는 폰의 expo앱에 로그인하고 vs code terminal에 아래와 같이 입력한다.

$ expo login

• 폰으로 실행시키면 위의 화면을 볼 수 있다.
• 이때 폰, 맥은 같은 wi-fi에 연결되어 있어야한다.

ERROR: Node.js version 6.10.1 is no longer supported.

expo-cli supports following Node.js versions:
* >=8.9.0 <9.0.0 (Maintenance LTS)
* >=10.13.0 <11.0.0 (Active LTS)
* >=12.0.0 (Current Release)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: `expo start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kimnan-young/.npm/_logs/2019-10-28T08_37_43_452Z-debug.log

• 만약 위와 같은 오류가 뜬다면

$ nvm install node

• 위와 같은 명령 실행 후 다시 $npm start를 하면 문제가 해결됨을 확인할 수 있다.

Step 2) Loading 화면 작성하기

• 새파일 버튼을 눌러 Loading.js 컴포넌트를 추가한다.
• 아래와 같이 코드를 작성한다. (Loading.js)

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function Loading(){
 return (
  <View style={styles.container}>
    <Text style={styles.text}>Getting the weather</Text>
  </View>
 );
}
const styles = StyleSheet.create({
 container: {
   flex: 1, 
   justifyContent: "flex-end",
   paddingHorizontal: 30,
   paddingVertical: 100,
   backgroundColor: "#FDF6AA"
},
text :{
 color: "#2c2d2c",
 fontSize: 30
 }
});

• App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Loading from "./Loading";
export default function App() {
  return <Loading />;
}

<결과 화면>

시작하기에 앞서,

모바일 어플리케이션을 개발하기 위해서 보통 Android app 개발자들은 ‘java’를 ios app 개발자들은 Swift 혹은 Objective-c를 이용한다. 그러나 동시에 Android와 iOS를 개발할 수 있는 방법이 있다고 한다.

React란?

- 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.

- 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지 보수된다.

- 리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다. 복잡한 리액트 애플리케이션들은 상태 관리, 라우팅, API와의 통신을 위한 추가 라이브러리의 사용이 일반적으로 요구된다.

 -2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 인스타그램에 적용되었다.

(출처 : 위키백과, https://ko.reactjs.org/tutorial/tutorial.html )

React-Native란?

React의 방식으로 동시에 ios와 android 모바일 어플리케이션 개발을 할 수 있는 페이스북의 오픈 소스 프레임워크이다.

React-Native의 장점

JavaScript만을 이용해서 보다 쉽게 앱을 개발할 수 있기 때문에 개발 초보자인 나에게는 이 점이 큰 장점으로 다가왔다.

또한 코드를 작성하면서 실시간으로 그 결과를 확인할 수 있는 Live Reload 기능과 변환된 코드 부분만 렌더링해주는 Hot Reload 기능을 지원하며 컴파일 과정을 거치지 않아 빠른 속도로 개발을 진행할 수 있다.

React-Native의 단점

간단한 퍼포먼스를 구현하기에는 적합하지만 비즈니스 로직히 복잡해지거나 뷰 스택이 쌓일수록 속도가 느려진다.

잦은 업데이트로 모듈이 변경되어 갑자기 에러가 뜨는 상황이 생기고 바뀐 문법을 새로 적용해야 하는 경우가 있다.