모바일앱 개발을 리액트 네이티브 코드로_02

지난 강의 글에 이어서 오늘은 첫 번째 리액트 앱을 구현해 본다.

- 작업한 소스 깃 허브 위치 : https://github.com/miniplugin/MobileApp/tree/react-native-app01

### 녹스 애뮬레이터에서 리액트 네이티브 앱 배포 및 실행

- 관련 교재 : 처음 배우는 리액트 네이티브 https://fliphtml5.com/ko/hkuy/htis/basic

- 기술참조 : https://github.com/GrotesQ/Codelab-React-Native-2nd/blob/master/ReactNativeWithNoxPlayer.md

- 녹스애뮬레이터는 수업에 사용했던 7.0.1.8 버전을 사용한다. 녹스에 대한 설명( https://gloria94.tistory.com/21 )

- 녹스애뮬레이터 다운로드 위치 : https://support.bignox.com/ko/win-release/7018

- 깃에서 다운 앱 소스를 받아 사용하시는 분들은 C:\MobileApp 폴더와 C:\MobileApp\react-native-app폴더에서 각각 npm install 하고 실행합니다.

- 교육은 React Native Cli(자바 및 안드로이드 스튜디오 설치 및 버전 세팅 필수) 대신 간편한 Expo Cli를 사용합니다.

------------------------------------------------------------------------------------------------------

### react-native-app01 첫 번째 리액트 앱

- 프로젝트에 src 폴더를 만들고, src폴더에 App.js 파일을 만들어 앱 시작 위치를 새로 지정 합니다.

- 위 처럼 하는 목적은 앞으로 개발자가 작업하는 앱 소스를 한 홀더에서 관리하면 편리하기 때문 입니다.

- 기존 최상위의 App.js 파일 내용을 복사하여 그대로 src/App.js 로 붙여 넣습니다.

- src/App.js 와 /App.js 파일을 각각 수정해 첫 번째 리액트 앱을 출력해 봅니다.

- 작업 결과 미리보기(아래)

 

Ps. 앞으로 리액트 앱에서 사용할 컴포넌트(앱 화면+기능)을 제작해 보도록 할 예정 입니다.

참고로, 강의와는 상관 없지만, 신규강의소스를 깃허브에 어떻게 만드는지 확인 시켜 드립니다.(아래)

- 강의를 위해 VS Code 에서 git 새 분기로 react-native-app01 이름으로 분기(Branch)를 만들고, 신규 코드는 분기(Branch) 체크아웃으로 react-native-app01 를 선택한 후 신규코드를 작성하였습니다.(아래 왼쪽부터 오른쪽 순서로 작업)

위 작업 후 소스를 수정 한 후 VS Code 화면 왼쪽의 [커밋]버튼의 더보기 버튼을 누르면, [커밋 + 푸시] 버튼을 누를 수 있다. 물론 푸시권한이 있는 본인의 깃 아이디/암호는 알고 있어야 합니다.^^

- 위 소스 작업으로 다음 깃 소스가 만들어 집니다. https://github.com/miniplugin/MobileApp/tree/react-native-app01