저번 블로깅 복습
: 저번 블로깅에서 했지만, ios, android도 하나의 운영체제(OS)이다. 이 때, 모바일 디바이스에서 유저가 인터랙션을 발생시키면 OS가 이를 감지하여 이에 대한 처리를 해주도록 하는데(컴퓨터에서도 I/O가 발생하면 이에 대한 처리를 해주니까), 이 때, React Native에서는 이 과정이 운영체제가 특정 인터랙션을 JS에게 전달, 그리고 JS는 전달 받은 이벤트에 대한 처리를 한 뒤에 다시 운영체제에 전달 후 최종적으로 유저에게 보여지도록 한다. 이 때, 우리가 처리해야할 부분은 JS에서 인터랙션을 받아서 처리해주는 부분이다.
시작 전에 snack!
: snack은 fiddle, replit 처럼 테스팅을 해볼 수 있는 플랫폼인데 expo가 제공하며 ios 시뮬레이터가 없어도 아이폰에서 어떻게 내 앱이 보일지 볼 수 있다(안드로이드도 마찬가지). 브라우저에서 코딩 후 어떻게 보일지 계속해서 체크하면서 개발을 할 수 있도록 제공함.
구성 요소 살펴보기
: App.js 의 코드를 하나하나 살펴보면,
1) StatusBar from 'expo-status-bar' : 이는 expo에서 제공하는 third-party package인데 모바일에서 가장 기본적인 시계, 배터리, LTE 상태, 와이파이 상태 등을 보여주는 부분을 자동으로 생성한다. 이 때, 이 컴포넌트는 운영체제와 소통하기 위한 컴포넌트이다.
2) View 컴포넌트 : React Native는 브라우저에서 돌아가지 않기 때문에 html 태그를 쓰지 않는다. html은 브라우저에서 파싱되는 것이기에 OS에서는 View라는 컨테이너를 통해 앱을 표현한다.
3) Text 컴포넌트 : html에서 span 등의 태그는 쓸 수 없고, 앱에서 모든 Text는 반드시 Text 컴포넌트 안에 표현해줘야한다.
4) StyleSheet.create 부분 : 이걸 안쓰고 단지 자바스크립트 객체로 styles를 만든 다음에 스타일을 적용할 수 있으나(inline 스타일 적용도 가능함) StyleSheet.create를 쓰면 자동완성 기능 등을 제공함
5) 
: css 디버깅도 해준다.
6) 추가적으로 위의 View, Text 등의 컴포넌트를 'react-native'에서 import 해오고 있는데, 다른 다양한 컴포넌트도 가져올 수 있다. 이는 리액트 네이티브 공식 문서를 참조하면 알 수 있다.
: 원래 더 많은 컴포넌트 및 API를 제공했다는데 굉장히 복잡하고, 한계가 있어서 오히려 수를 줄였다고 한다. => 그러면 'asnycstorage' 등은 이제 어디서 쓸 수 있을까? => 링크 >>> but! 이렇게 커뮤니티에 의존하게 되면 특정 유저 혹은 단체가 만든 모듈을 쓸 때 에러가 발생하면 그들이 해결해줄 때까지 기다려야함. => expo도 또다른 단체이긴하지만 expo에서도 components와 APIs를 제공함!
7) Component는 렌더링 되는 부분에 쓰이며, API는 자바스크립트 코드로 Vibration.vibrate() 등 어떤 액션을 요청할 때 쓴다.
8)
: 실제로 내가 만든(Toy Project) 점진적 과부하 웹 사이트를 Webview API를 이용해 모바일 앱에서 웹뷰로 띄워볼 수 있었다. 매우 간단하게.. ㅎ (expo가 제공하는 컴포넌트를 써봤다)
링크
위의 링크를 누르면 내가 배포한 앱을 볼 수 있다. 하지만 expo-go가 깔려있어야만 가능하다. 이건 말그대로 expo가 제공하는 플랫폼(인프라)을 통해서 배포한 것이기 때문에 일반 프로덕션과는 다르다.
