Step 1) 화씨 온도를 섭씨로 바꾸기

• API->Current Wather->API doc->좌측의 Other features->Units format을 클릭한다.

• &units=metric 을 추가한다. 그 후 시뮬레이터를 실행시키고 콘솔 로그를 확인해보면 아래와 같이 temp가 섭씨 온도(14도)로 바뀐것을 확인할 수 있다.

Step 2) Temperature Component 생성

• Weather.js 파일을 새로 만든다.
• props가 필요하므로 prop-types를 install 하기 위해 vscode terminal에

$ npm install prop-types

를 입력한다.

• Weather.js 파일에 아래와 같이 코드를 작성한다.

• App.js파일에 작성한 Weather.js 를 아래의 방법으로 import 한다.

import Weather from "./Weather";

• temperature 정보를 가져오기 위해

우리는 data.main.temp 가 필요하다.

• 위와 같이 App.js 코드를 수정한다.
• 수정 후 시뮬레이터를 실행하면

이렇게 온도 (temperature) 가 스크린에 출력된다.

• 그런데 이 과정에서 간단한 문제로 오류가 나서 애를 먹었다.

[오류 해결]

• Invariant Violation : Element type is invalid : expected a string (for built- in components) or a ~ (이하 생략) 이라는 오류가 발생했다.
• 문제는 자동으로 Weather가 import 되지 않고 수동으로 import ~ 라고 타이핑해서 링크가 되지 않아 발생한 것이었다.
• App.js 파일의 맨 아래 부분에 render() 안에서 ‘null’을 <Weather /> 로 바꿀 때, 하나씩 수동으로 타이핑하면 코드를 인식하지 못하는 것 같다. <Weather></Weather> 로 자동 생성 되도록 하면 자동으로 App.js 파일의 상단에 Weather가 import 됨을 확인할 수 있다. 그럼 오류가 해결된다.

Step 3) condition name (날씨 종류) 정보 가져오기

• API->Current weather data->Parameters of API resonse->List of condition codes 를 클릭한다. (링크 : https://openweathermap.org/current#list)

• weather condition codes 를 클릭한다. (링크 : https://openweathermap.org/weather-conditions)
• Thunderstrom, Drizzle, Rain, Snow, Atmosphere, Clear, Clouds 와 같은 날씨의 유형을 코드에 적용한다.

• 그러나 이 방법은 condition name을 얻는 최선의 방법이 아니다.
• 콘솔 로그를 보면 딱 하나의 Array 가 있는걸 확인할 수 있는데

객체 하나를 가진 Array가 하나 있다. 이 배열안의 객체 안의 main이 우리가 얻고자 하는 condition name 이다.

• 그럼 weather 배열로부터 main 부분을 가져와보자.

• 코드를 조금 더 보기 쉽게 살짝 수정하였다.
• line 28을 보면 weather 배열의 첫번째 요소(객체 Object)로부터 main 값을 가져왔음을 볼 수 있다.

Step 4) import vector-icon

• Icon을 다루기 위해 Weather.js 에 아래와 같이 코드를 작성한다.
• 참고 : https://docs.expo.io/versions/v33.0.0/guides/icons/#_next

import { Ionicons } from '@expo/vector-icons';

• 아이콘 디렉토리를 살펴보자 (https://expo.github.io/vector-icons/)
• condition name에 각각 맞는 아이콘을 찾는다.
• MaterialCommunityIcons Family 중에 골라보자.
• 위에서 작성한 코드에서 중괄호에 있는 Ionicons를 MaterialCommunityIcons 로 바꾼다.

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

• 이제 아이콘을 가져와보자.

예시

• 비오는 날씨를 예로 들면, 우리는 위의 화면에서 제일 하단에 위치한 ‘MaterialCommunityIcons Family’ 의 ‘weather-lightning-rainy’ 를 가져올것이다.

출처 : 노마드코더 - 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로 날씨앱 만들기

<Geolocation 알아보기>

• 참고 : https://facebook.github.io/react-native/docs/geolocation

• 위와 같이 제공하는 메소드들 중에 우린 ‘getCurrentPosition()’이 필요하다.

Step 1) expo-location 설치

• 참고 : https://docs.expo.io/versions/v35.0.0/sdk/location/

vscode 터미널을 새로 열어서

$expo install expo-location

을 입력한다. 노드 버젼으로인해 또 에러가 나서

$ nvm install node

위의 명령어를 먼저 실행한 후 location을 설치할 수 있었다.

Step 2) expo-location 사용을 위해 import

• App.js 파일에 import 한다.
• expo는 우리가 원하는 기능만을 선택해서 import하여 쓸 수 있게 해 준다.

$ import * as Location from 'expo-location';

• 그 후 ‘getCurrentPositionAsync()’ 가 잘 작동하는지 체크하기 위해 아래와 같이 코드를 수정해본다.

그 후 저장을 하면 (cmd+s)

위와 같이 permission error가 뜬다.

Step 3) Permission Error 해결

• Permission이 resolve 되었을 때는 promise를, denied 되었을 땐 reject를 return 하므로 ‘try-catch’ 구문으로 예외 처리를 해 준다.
• 먼저 Alert를 import 한 후에 아래의 코드와 같이 작성한다.

$ import {Alert} from 'react-native';

그 후 저장하면 핸드폰의 expo 앱에서

위와 같은 창이 뜬다. 우리가 보통 어플리케이션을 다운로드한 후 처음 실행했을 때 permission을 구하는 자주보던 익숙한 창이다.

보통 ‘허용’을 클릭하지만 예외가 잘 처리됐나 확인하기 위해 ‘허용 안 함’을 클릭해 보았다.

그럼 위와 같은 창이 뜨게 되고, 예외가 잘 처리되었음을 확인할 수 있다.

ios app은 한 번 ‘허용 안 함’을 누르면 그 다음번에 앱을 실행해도 permission을 구하는 창이 다시는 뜨지 않으므로 폰의 ‘설정 -> expo ->위치 -> 사용하는 동안’ 에 수동으로 체크해줘야한다.

Step 4) console log에서 현재 위치 가져오기

콘솔 로그를 확인해보면,

첫번째는 response가 없어서 undefined로 찍혔고(필요 없으니 코드를 삭제한다.) 두번째는 Location이 찍혔음을 확인할 수 있다.

우리는 ‘latitude’와 ‘longitude’가 필요한데 원래 디폴트 값은 샌프란시스코라서(apple이기 때문)

위와 같으나, 본인은 현재 나의 위치를 따로 설정해서 latitude는 ‘35.1496’ longitude는 ‘126.9156’으로 뜬다.

본인 현재 위치의 위도 경도 값을 찾는 방법은 아래와 같다.

1. https://ip-api.com/에 접속한다.

2. 시뮬레이터에서 ‘Debug->Location->Custom Location’을 클릭한다.

3. 1번에서 확인한 위도와 경도로 수정해준다.

Step 5) Location 오브젝트 안의 coords 오브젝트 가져오기

• es6를 써서 coord 오브젝트의 latitude, longitude를 가져와본다.
• 위와 같이 코드를 수정한 결과는 아래와 같다.

latitude, longitude를 성공적으로 가져옴을 확인할 수 있다.

Step 6) Rename 하기

• 콘솔 로그를 확인하는 것은 더이상 필요하지 않아 코드를 삭제했다.

Step 7) API 로 전송할 State 가져오기

• 먼저 state를 가져오기 위해 코드를 위와 같이 수정한다. (line 8–10, 16, 26–27)
• line 16이 Location Indicator을 가져온다.

출처 : 노마드코더 - 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 />;
}

<결과 화면>

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

Step 1) Expo Client App 다운로드

Step 2) Node, Npm 버전 확인하기

node는 버전 10 이상, npm은 버전 6 이상이 필요하다.

버전 확인

Step 3) 필요한 프로그램 다운로드

맥 유저는 시뮬레이터를 가진 Xcode가 필요하고 윈도우나 리눅스 유저라면 시뮬레이터를 가진 안드로이드 스튜디오가 필요하다.

Step 4) Expo CLI 설치

$ npm install -g expo-cli

• 여기서 Expo란?

Create-react-app으로 React Native를 크로스 플랫폼으로 개발하기 위한 빌드 도구이며 Xcode 혹은 Android Studio 없이도 기기에서 쉽고 빠르게 코드를 테스트 해볼 수 있게 해준다.

Expo는 모든 Native file에 접근할 수 없으며 자동으로 관리해준다. 만약 Native file을 많이 사용한다면 expo 대신, React Native CLI 방식을 사용한다.

Step 5) Expo Project 시작

$ expo init [프로젝트명]

• expo 프로젝트를 시작한 후 blank를 선택하고 app name을 입력한다.
• 본인은 프로젝트명을 ‘fokin-weather2’로 했다.

$ cd fokin-weather2
$ npm start

• 디렉토리를 변경하고 npm을 시작하면 크롬창이 뜬다.

Step 6) github repository에 프로젝트 폴더 생성

step 5와 같은 프로젝트 이름을 ‘Repository name’에 타이핑하고 ‘Description’에 적당한 설명을 타이핑 한 후 ‘Initialize this repository with a README’의 체크박스에 체크를 하고 ‘Create repository’를 클릭한다.

Step 7) 원격 저장소 연결

$ git remote add origin <원격 저장소 URL>

vscode를 실행하여 ‘fokin-weather2’프로젝트 폴더를 열고 터미널에 위와 같이 입력한다.

원격 저장소 URL은 위에서 생성한 repository의 주소이다.

Step 8)로컬 저장소에 있는 내용을 원격 저장소에 넣기

$ git pull origin master

• vscode 터미널에 위와 같이 입력하여 github에 푸시한다.

(중간에 fatal: not a git repository (or any of the parent directories): .git 라는 오류가 뜨지만 $git init을 해주면 해결된다.)

• 그러면 README.md파일이 프로젝터 폴더 안에 로드된다.

시작하기에 앞서,

모바일 어플리케이션을 개발하기 위해서 보통 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의 단점

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

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

이번 포스팅은

[React Native로 날씨앱 만들기 (by 노마드코더) ]

이란 강좌를 수강하기에 앞서 처음에 expo를 인스톨하는것부터 에러가 나는 바람에 이를 해결하는 방법을 포스팅해보았다.

Step 1) Nodejs 설치하기

nodejs.org/ko/download/

사양에 맞게 다운로드를 한다.

• node를 설치하면 npm은 default 로 설치된다.

Step 2) version 확인하기

$ node -v
$ npm -v

• node는 12.13.0으로, npm은 6.12.0으로 설치되었음을 확인할 수 있다.

Step 3) expo cli 설치하기(에러 발생 단계)

$ npm install -g expo-cli

• 위와 같은 에러가 떴다.
• 액세스 하는것에 문제가 생긴 것 같아 구글링을 해보니 node를 root 권한으로 설치하고 실행했기 때문에 문제가 발생했음을 확인할 수 있었다. (참고 : https://stackoverflow.com/questions/16151018/npm-throws-error-without-sudo)

(Step 1 에서 다운을 받을 때 관리자암호를 입력하라는 창이 떴는데 그게 root 권한 permission을 요구한건가 싶다.)

Step 4) 기존에 설치된 node 삭제하기

$ sudo npm uninstall npm -g

• 기존에 설치된 node는 root 권한으로 설치된 것이므로 uninstall 해준다.

Step 5) NVM(Node Version Manager) 설치하기

• 참고 :https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1

nvm은 root 권한 없이 node를 설치할 수 있게 해준다고 한다.

1. 설치하기

$ sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

2. 확인하기

$ nvm ls

nvm ls를 터미널에 입력하면

-bash: nvm: command not found

위의 문장이 출력된다.

3. vi 에디터 열기

$ vi ~/.bash_profile

• 빈 에디터에 아래의 문장을 복사해서 붙여넣은 후 :wq 로 저장하고 에디터를 나온다.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

4. 재시작하기

$ source ~/.bash_profile

5. 다시 확인하기

$ nvm ls-
> system
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

Step 6) node 재설치하기

1. 최신 버전 설치

$ nvm install 6.10.1

(2019년 10월 23일 기준으로 6.12.0이 최신버전이지만 참고한 링크에서 버전 6.10.1을 설치해서 필자도 6.10.1 버전을 설치해보았다.)

2. 확인하기

$ nvm ls
-> v6.10.1
system
default -> 6.10.1 (-> v6.10.1)
node -> stable (-> v6.10.1) (default)
stable -> 6.10 (-> v6.10.1) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.16.2 (-> N/A)
lts/dubnium -> v10.16.3 (-> N/A)
lts/erbium -> v12.13.0 (-> N/A)

$ node -v
v6.10.1

Step 6) expo 설치

$ npm install -g expo-cli

• Step 3 단계와는 달리 접근 오류가 뜨지 않고 성공적으로 설치되었다.