[React Native] React Native with EXPO

yongkini ·2021년 11월 4일
0

ToyProject

목록 보기
5/24

: 리액트 네이티브를 연습해보기 위해서 날씨앱을 만들어보려하는데, xcode, java 등을 통해 컴파일 과정을 거치지 '않고' 간단하게 만들어보기 위해서 expo-go를 이용해서 만들어보고자 한다.

위의 그림으로 설명해보면 우리(개발자)는 javascript, html, css만 만들어놓고 그것을 expo를 통해 폰으로 전송하여 저 보라색 부분을 채워놓으면 expo-go라는 이미 배포돼있는 앱에 우리가 만든 코드가 적용되는 것이다. expo-go는 그러니까 빈(?) 앱이다. 배포는 돼있으나 안에 js,html,css 코드가 없는 템플릿 같은 앱이다. 보라색 부분을 제외한 나머지 infrastructure는 expo에서 제공을 해주는 것! so sweeeet

** 본래 앱을 배포하기 위해서는 우리들의 자바 코드와 위의 그림과 같은 모든 infra가 갖춰져 있어야함. 그에 따라 xCode, java가 필요한 것임. 그러나 expo는 이러한 셋업을 대신 해준다.
: 우리가 해줄 것은 이 부분을 고치는 일!! 나머지 인프라 셋업은 expo가 해주는 걸로!

react native가 하는일 ?

: 리액트 네이티브는 단지 메시지를 보낼 뿐이다. IOS, 안드로이드 운영체제에 예를 들어, '버튼'을 그려줘라고 메시지를 주면, ios, 안드로이드는(운영체제) 각각의 플랫폼에 맞는 버튼을 그린다. 이 때, 우리(개발자)가 신경써야할 부분은 이 부분이 아니다. 우리는 단지 어떤 메시지를 ios, android에 전달할지만 생각하면 된다. 그리는건 운영체제쪽에서 받아서 그릴뿐!. 그래서 리액트 네이티브는 우리(개발자)와 운영체제(ios, android) 사이의 번역가와 같은 역할을 한다.
: 위와 같은 방식으로 운영체제에서 버튼 클릭 이벤트를 감지하고, 그쪽에서 그 데이터를 자바스크립트로(브릿지를 거쳐) 보내면 자바스크립트 쪽에서 이에 대한 처리를 해서 다시 브릿지를 거쳐 운영체제에 어떤 이벤트 대응을 할지 보내주면, 운영체제 쪽에서 실제로 그에 따른 대응을 하게 된다.

: 실제로 내 핸드폰에 expo-go 라는 앱을 깔고, expo init 명령어로 mac book에서 플젝을 만들고, npm start를 하고, 아이디를 통해 내가 만든 플젝을 expo-go에서 열면 JS 코드가 ios 버전으로 번들링된 후 컴파일이 돼서 내 앱에서 내가 짠 코드가 보이게 된다.
: 이렇게 짜놓은 코드가 모바일 앱(expo-go)에서
: 이렇게 보이게 된다. 굉장히 쉬운 방법으로 JS 코드를 앱에서 보게 해주는 방법인 것 같다. 이건 실제 배포된건 아니고 브라우저에서 localhost로 테스팅할 때처럼 단지 보여주는 단계이다.

profile
완벽함 보다는 최선의 결과를 위해 끊임없이 노력하는 개발자

0개의 댓글