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’ 를 가져올것이다.

시작하기에 앞서,

모바일 어플리케이션을 개발하기 위해서 보통 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 단계와는 달리 접근 오류가 뜨지 않고 성공적으로 설치되었다.