[날씨 앱] 리액트 네이티브로 날씨 앱 만들기!!

하.. 일단 노마드코더 강의에서는 맥OS를 사용하는데 윈도우라서 너무 힘들었다ㅠㅠㅠ

어떻게 어떻게 nodejs랑 npm 업데이트하고 choco깔고 명령어 한 줄 치고 에러 수정하고.. 하다보니 결국 됐다!!

 

 

리액트 네이티브란 네이티브 웹앱을 만들기 위한 UI 라이브러리다. 리액트 네이티브를 이용해서 jsx, javaScript로 쓴 코드를 objective c나 java로 바꿔줄 수 있다. 인스타그램, 에어비앤비, 페이스북 등의 많은 글로벌 기업들이 리액트 네이티브를 사용해서 어플리케이션을 만들고 있다는 사실!! 웹사이트를 개발하는 것 처럼 쉽게 어플리케이션을 개발할 수 있기 때문에 많이 사용된다.

사실 나도 안드로이드 스튜디오 써봤는데 진짜 힘들었다. 에뮬레이터는 왤케 느리며.. 일단 코드 짜는건 그렇게 어렵진 않은데 너.무. 느리다.. 

 

시뮬레이터는 Expo.io를 이용해서 돌려본다. xcode나 안드로이드 스튜디오 없이 핸드폰만 연동시켜주면 코드를 수정할 때마다 바로 바로 빠르게 시뮬레이터를 사용할 수 있다. 컴퓨터에서 코드를 수정하면 자동으로 핸드폰에서 어플리케이션이 세이브되기 때문에 간편하다.

 

 

https://expo.io/

Expo

expo를 설치하는 방법은 다음과 같다. 우선 node js와 react native를 설치해주고 터미널 창에서

npm install expo-cli --global

expo init my-new-project
cd my-new-project
expo start

 

이렇게 쳐주기만 하면 된다! expo init my-new-project 이 단계에서 blank, tap이 있는데 나는 blank를 선택해 주었고, 만약 하단 네비가 필요하면 tap?을 선택하면 된다.

 

그러고 나서 vscode에서 내가 만든 프로젝트를 열어주고, expo start를 통해 터널이 열리면 qrcode가 뜰것이다. 아 맞다. 사용할 핸드폰에서 expo 어플리케이션도 설치해 줘야함ㅇㅇ. 그러고 나서 qrcode를 핸드폰에서 찍어주면 프로젝트가 핸드폰에서 자동으로 빌드된다!!

빌드된 화면.

 

만약, vscode에서 수정한다면?

 

 

 

이렇게 바로 수정됨. 개쩜..

 

여튼 앞으로 이걸 활용해서 날씨 앱을 만들어 보겠다ㅎㅎ 자세한 강의는 여기에서 들을 수 있따. 모두 리액트의 고수가 되는 그날까지.......

 

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C/dashboard

React Native로 날씨앱 만들기 - 인프런