React Native 날씨앱 (21.01.11 ~ 21.01.14)

0.0 ~ >

- Expo vs React CLI(Command Line Interface)

react native의 작업방식이다. cli 는 더 순수한 react native라고 할 수 있다. 많은 기능을 사용할 수 있는데, 그만큼 다루기가 까다롭니다. Expo는 조금은 더 모듈화? 가 되어있는 react인데, 비교적 사용하기 편한만큼 기능이 제한적이다. 니코쌤은 Expo면 충분히 작업할 수 있다고 했으니까 믿어보자.

(디테일을 보자면 react native file에 대한 직접적인 접근권한의 차이이다.)

​

qr코드를 통해서 연결하는데 여러 조건이 필요했다.

일단 와이파이를 동일 와이파이로 설정해야한다.

그래도 안되길래 이것저것 찾아봤더니 Tunnel 로 설정하면 된다고 하더라..

덕분에 잘 되긴했는데 왜 터널에서만 되는지 의문이다.

​

이런런 기능들이 있다. 앱을 실행시킨 후 한번 흔들면 설정창이 나온다. (모바일 기준) 여기서 디버깅 모드를 설정할 수 있는데, 되도록이면 꺼놓도록 하자. 앱을 느리게 만듬.

​

앱을 만드는 방법은 세가지가 있다.

첫번째로는 네이티브 앱을 만드는 것 (코틀린, 자바, 스위프트 등)

두번째로는 앱 기반 웹 뷰를 만드는 것. 정말 간단한 앱이라면 코도바, 폰 갭 같은걸 이용해서 만들 수 있다. 앱 안에서 동작하는 웹브라우저라고 생각하면 된다. 그래서 native에 예산이 별로 없는 경우에 사용한다. 원래 가지고있던 좋은 웹사이트를 그대로 앱 안에 넣는다고 봐도 된다. 하지만 네이티브는 아니다!

​

세번째가 바로 리액트 네이티브 방식이다. JS로 작성된 코드를 안드로이드와 IOS로 넘겨준다. 중간에 연결을 이어주는 브릿지 같은 애들이 필요하다. 그게 바로 리액트 네이티브의 역할이다! 좋은 방식이기는 하지만 3D게임같이 전달되는 데이터가 많은 경우는 딜레이가 발생할 수 있다. 인스타그램처럼 컨텐츠를 송수신하는 정도의 앱일 경우에 유용하다. 뭐 난 이정도면 충분하다고 생각해.

​

1.0 > layouts with flexbox in RN

web 에서는 flexDirection의 기본값이 row인 반면, 모바일에서는 column이다. 아무래도 세로로 보는 경항이 있다보니(?) 이렇게 되어있는 것 같다.

app에서의 flex 는 조금 다르다. flex : 숫자, 이렇게 설정하는데, 이 숫자들은 비율을 의미한다. 부모 태그가 가지고 있는 넓이 내에서 특정 비율의 값으로 표현된다. 예를들면 자식 컴포넌트가 총 2개, 2개의 컴포넌트의 flex값이 각각 1, 2 라면, 첫번째 컴포넌트는 1/3을, 두번째 컴포넌트는 2/3씩 차지하게 된다.

​

1.1 > loading screen

걍 열심히 짬 ㅋㅋㅋ

​

1.2 > Getting the Location

location을 사용하는 방법은 두가지다. react가 가지고 있는 API를 활용하거나 expo를 활용하거나. 근데 expo가 더 좋다고 니코쌤은 말하고 있는 것 같은데?

expo API를 사용하기 위해서는 다운받아야한다. expo install API

​

1.3 > react 코드를 짰는데, 전에 들은 강의가 좀 있어서인지 수월하게 진행됐다.

RN은 정말 똑똑해서 Native 기능들을 잘 활용해준다.

Alert.alert("title", "contents"); -> 알람기능을 사용해 봤다. 아 물론 import { Alert } from "react-native";

​

1.4 > openweathermap에서 API를 호출하는데, 자꾸 네트워크 에러가 났다.

[Unhandled promise rejection: Error: Network Error]

네트워크 에러니까 네트워크랑 관련된 부분에서 문제가 있을텐데, 자꾸 엄한테 쳐다보느라 시간만 버렸다. 바보같이...

문제의 원인은 API키에 http://를 삽입하지 않아서 발생했다.. 이거 댓글에서 본건데 검색으로 찾을 수 있었을까..?

​

2.0 > 어우 잘 하다가 로직 한번 꼬여서 실수했네.

특정 상황에서 특정 변수를 언급하는 방법을 알아야한다. function 내에서 변수를 불러오는 방법. export 혹은 return을 할 때, JXS?이던가 거기로 보내면서 변수를 호출하는 방법을 헷갈리지 말자. this.state.something!...

헷갈리면 자꾸 디버깅 하면서 진행하기!

​

2.1 > 열심히 짰다!.. ㅋㅋㅋㅋ

​

2.2 > expo는 아이콘도 제공하는구나. 유용할듯!

​

2.3 > 배경을 만들려면 css가 아니라 Gradient를 써야한다고??

linearGradient라는 이름의 라이브러리를 다운받아서 사용하면 된다. (in expo!)

또, react-native의 라이브러리 중에 StatusBar를 사용하면 스마트폰의 상단바 까지 조절할 수 있다.

​

2.4 > es6를 따로 공부할 필요를 느꼈다

태그에 style을 넣을 때 그냥 style = { styles.something } 이런식으로 넣었는데, 두개 이상을 넣으려면 방식이 약간 다르다.

style = {{ ...styles.something, ...styles.anything}} 왜 이러는지는 좀 알아봐야할듯

​

2.5 > 뭐 마무리를 잘 했다. 별 탈 없이 앱 빌드 방법을 배운 것 같아서 재밌었다.

​

[출처] React Native 날씨앱 (21.01.11 ~ 21.01.14)|작성자 winney