[React] 간단한 날씨 웹앱 만들어보기 - React Native, Expo

배우는 방법 중 가장 좋은 방법은 일단 만들어보는 거라고 했다.

정말 인정 인정 또 인정하는 바! 

전공 수업을 들을 때도, 실습을 하지 않는다면 내용을 내 것으로 만들 수 없었다.

 

리액트 문법을 대충 훑었는데,,, 어랍쇼? 꽤나 이해할 만 했다.

이 정도면 괜찮은 강의 하나만 있으면 만들어볼 만 하겠다는 생각이 들었다.

그래서 React Native로 아주 간단한 웹앱을 만들어보고자 한다.

 

참고할 영상은 노마드 코더님의 React Native Weather 2019 !

 

연구와 과제와 작은 프로젝트까지 신경쓰려니 마음이 바쁘지만, 

(특히 프로젝트를 해본 적이 없는 나이기에 막막한 기분이 앞선다)

도전하지 않는 사람에게는 기회가 주어지지 않는다는 것을 떠올리며 시작해본다.

---

React Native를 사용해 개발하는 방법:

1) React Native CLI를 사용하기

안드로이드와 ios 둘 다 내가 개발할 줄 알아야 한다는 어려움. 

하지만 그만큼 세세한 기능까지 사용한 어플을 만들어 볼 수 있다.

그런 점에서 해당 방법은 C++같은 느낌. 세세하게 다룰 수 있지만 그만큼 다루기 어렵다.

2) Expo CLI를 사용하기

앱을 실제로 다운받아 실행해볼 수 있고, 윈도우에서도 ios 개발이 가능하며... 등등 장점 투성이라고 한다..!

하지만 안드로이드와 ios의 세세한 기능을 사용하기는 어렵다는 단점이 있다.

(나중에 사용하고 싶을 때는 expo를 삭제하고 react native로 사용할 수 있다고 한다.)

그런 점에서 해당 방법은 C++과 비교하면 python같은 느낌? 사용자에게 조금 더 친숙하고, 만들어져 있는 라이브러리를 가져다 쓰면 되는 것 같은. 하지만 그만큼 세세하게 제어하기는 어려운 느낌.

 

노마드 코더에서는 Expo를 사용하여 개발하기 때문에, Expo 설치하는 과정이 필요하다.

 

간단히 cmd에서 npm 사용해서 install 진행!

그 후 airout이라는 이름으로 init 진행하고, blank를 선택해서 빈 프로젝트를 생성했다.

이렇게 뜨면 성공!

cd airout 한 후에, code . 눌러서 vscode를 띄워주자.

 

깃도 업데이트 해주고...

git repository도 연결해주고, npm start를 눌러본다.

 

띠용????

신기한 광경... metro bundler와 tunnel을 띄워준다. 

폰에서 Expo 앱을 다운받아서 저 QR code를 스캔하면 프로젝트를 실행해 볼 수 있는 것. (안드로이드)

ios 폰의 경우 ios app에 로그인하고, expo login을 terminal에서 입력하면 된다고 한다 (실행 안해봐서 설명 불가 ㅎ)

 

그리고... 폰에서 안할거라면

저기 위에 보이는 bundler에서 에뮬레이터를 실행하면 된단다. 

세상... 너무 좋아졌다..................................이런 걸 몰랐다니!

 

또 Expo를 사용하면 좋은 점이, 에뮬레이터를 켜놓은 채로 코드를 변경하면 바로 즉시 해당 변경을 반영해 보여준다.

근데 그게 또 싫다면 수동으로 실행되도록 변경할 수도 있음.

(안드로이드 스튜디오 사용할 때, 에뮬레이터 너무 무거워서 낑낑대던 내 노트북이 생각났다. hp 프로북아 잘지내니?)

 

이렇게 Expo 설정을 끝내고 나면, 이제 사용할 준비가 된거다!

---

EXPO를 사용해서 만들 내 첫 (짱 가볍고 쉬운) 웹앱이 기대된다.

얏호!