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

우선 모바일앱 개발에 리액트 네이티브를 사용하는 장점 부터 보여 드립니다.(아래)

- 보통 모바일앱 개발자가 주로 작업하는 부분은 아래 붉은 색 박스 내부의 코드를 작업하게 됩니다.

- 크로스 플랫폼 개발 가능 : 한 번 제작한 소스를 가지고, 안드로이드 폰, 아이폰 모두 사용가능한 앱으로 배포 할 수 있다.

- 자바스크립트는 인터프리터 언어로 개발자 컴파일 없이 바로 사용가능하기 때문에 실시간 앱에 적합하다.

- 요즘 간편한 SPA(싱글 페이지 앱)제작에 사용되는 리액트와 구조가 비슷하기 때문에 웹 개발에도 유용하게 사용됩니다.

(실제 web 으로 테스트하는 메뉴와 빌드하는 명령도 있습니다.^^ -하단 ###리액트네이티브 앱 실행파일 만들기 부분에... )

- 리액트 네이티브 앱 개발은 위 그림 처럼 2가지 방식이 있고, 우리는 Expo CLI 방식을 사용한다.

 

  1). React Native CLI : 예, java와 같은 네이티브 소스가 처음 부터 앱 소스에 포함 되어 있다. 기능 확장이 용이하지만, 네이티브 언어를 다룰 수 있어야 한다.

  2). Expo CLI : 예, java와 같은 네이티브 소스가 처음 부터 앱 소스에 포함되지 않고, 외부 API만 가져다 사용할 수 있다. 기능 확장에 제한이 있으나, 리액트 기능만 으로 간단한 앱은 만들 수 있다.

*위 2가지 공통사항으로 내장된 Metro 서버는 작업PC에서 npm run start(yarn start) 로 앱을 실행 시 WebSocket을 열어 Nox에뮬레이터 또는 실제 장치에 연결한다.이  소켓 연결은 앱의 코드나 리소스에 변경이 발생할 때 Metro에게 알리고, 변경 사항을 즉시 반영하여 앱을 다시 빌드하고 새로 고침 없이 변경 사항을 화면으로 확인하는 것이 가능해 진다.

 

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

@@@ 이번 시간에 작업 한 결과는 아래와 같다.(아래)

adb.exe connect 127.0.0.1:62001 명령실행 시 아래 화면과 연결 되어있다.(아래)

@@@ 위 작업 결과가 나오기 까지의 순서는 아래와 같다.(아래)

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

### 녹스 애뮬레이터에서 리액트 네이티브 앱 배포 및 실행 
- 관련 교재 : 처음 배우는 리액트 네이티브 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를 사용합니다.
------------------------------------------------------------------------------------------------------
### 리액트는 노드js기반이기 때문에 nvm(노드버전매니저) 설치 후 노드js설치(아래)
- nvm-setup.exe 를 다운로드 받아서 설치 : https://github.com/coreybutler/nvm-windows/releases
- Cmd를 관리자권한으로 열고, nvm install 18.12.0 을 입력한다.
- 사용할 버전 확인 : nvm use 18.12.0
- 설치된 버전 확인 : nvm list

- 개발 IDE 프로그램 : VS Code(MS사 오픈소스 프로그램)
------------------------------------------------------------------------------------------------------
### 리액트네이티브 실행환경 설치(아래)
- 리액트네이티브 실행폴더 생성 후 폴더로 이동 : cd C:\MobileApp
- 리액트네이티브 실행환경 설치 : npm install expo-cli
- Expo사이트와 개발자(ide)를 이어주는 환경설치 : npm install eas-cli //설치오류가 나면 뒤에 ` --force` 를 붙여줍니다.
------------------------------------------------------------------------------------------------------
#### 윈도우 [고급시스템설정]-[환경변수]-[시스템변수]에 전역변수 추가
- 추가 전 안드로이드 스튜디오 븍극여우 버전에서 설치된 Sdk 폴더 중 tools 와 platform-tools 폴더 2개만 MobileApp폴더에 붙여 넣는다.
- 위 폴더를 사용하는 이유는 앱 빌드 시 필요하기 때문이고, 오픈소스 이지만 구하기 번거로우니 강의용 git 소스의 폴더를 그대로 사용합니다.
- 시스템변수 추가에서 변수이름 : ANDROID_HOME , 변수값 : C:\MobileApp\Sdk
- [Path] 에서 expo와 eas명령에 대한 전역경로 추가 : C:\MobileApp\node_modules\.bin
- [Path] 에서 안드로이드 SDK 경로 설정(아래)
- %ANDROID_HOME%\tools ( emulator.exe 로 애뮬레이터를 실행하기 위해서 )
- %ANDROID_HOME%\tools\bin ( sdkmanager.bat 로 외부 라이브러리를 다운로드 받기 위해서 )
- %ANDROID_HOME%\platform-tools ( adb.exe 안드로이드 디버그 브릿지로 애뮬레이터와 연동실행하기 위해서 )
- expo -v (설치확인 버전 0.7.3, expo-cli --version : 7.1.2)
- eas -v (Expo Application Service 설치확인 eas-cli/7.1.2)
------------------------------------------------------------------------------------------------------
#### 리액트 네이티브 앱 프로젝트 추가 : 용어설명 eas: Expo Application Service(아래)
- //Expo 사이트에서 react-native-app 프로젝트 추가 후(사이트주소 https://expo.dev/) App을 Expo사이트에 배포할 때 필요 교육용 에서는 안하고 건너띔.
- npx create-expo-app react-native-app // native환경의 폴더 생성! (app 뒤로는 프로젝트명)
- 위 초기앱 생성 후 package.json에 자동으로 입력된 값:  expo SDK 버전 50.0.5, react 버전 18.2.0, react-native 버전 0.73.2 및
- cd react-native-app //아래부터는 생성된 폴더 안으로 들어가서 입력!
- //eas init --id Expo사이트에서 프로젝트 추가시 생성된ID // 교육에서는.git폴더를 압축한 후 제거했으나 학생들은 그대로둔다. App을 Expo사이트의 프로젝트와 연동 시킬 때 필요 현재 사용안하고 이 명령과 아래 app.json 코딩은 건너띔.
- 결과확인 : √ Project successfully linked (ID: Expo사이트에서 프로젝트 추가 시 생성된 ID) (modified app.json)
- 위 app.json 이 Expo사이트와 연동 시 추가된 코드는 app.json 파일 하단 부분에 있다.

```,
    "extra": {
      "eas": {
        "projectId": "Expo사이트에생성한프로젝트ID"
      }
    },
    "owner": "kimilguk"
```
- npx expo install react-native-web react-dom // web 방식으로 결과보기에 필요
------------------------------------------------------------------------------------------------------
#### 실습에서 작업한 리액트네이티브 앱 실행 순서(아래) 
- 녹스와 ide 연결 : adb.exe connect 127.0.0.1:62001 (별도 cmd창을 관리자권한으로 실행한 후 이 명령을 실행하면 수월하게 진행 됩니다.)
- 간혹 앱이 응답이 없이 무한반복 되면 : adb.exe kill-server 로 초기화 시킨 후 다시 위 명령으로 connection 한다.
- 연결 확인 : adb.exe devices
- npm run start //react-native-cli와 같은 방식인 Metro(메트로) 서버실행 됨. 이후 a 키보드로 안드로이드 앱으로 배포(아래)
- 터미널에서 실행 후 w 키보드를 누르면 수정된 화면이 웹에 바로 보여진다.(참고로, 앱 화면 상단에 reload 버튼이 있음)
- 단 a 키로 안드로이드 앱으로 실행하면, 최초 Expo Go라는 앱을 녹스에 다운받는 모습이 터미널에 표시되고, 이후 앱이 실행 된다.
------------------------------------------------------------------------------------------------------
#### 리액트네이티브 앱 실행파일 만들기-교육용 에서는 녹스애뮬레이터에서만 실행하기 때문에 필요에 건너띔(아래) 

- //기기별 빌드방식 expo 공식 영문 기술참조: https://docs.expo.dev/guides/adopting-prebuild/
- //expo login (apk 실행파일로 빌드시 Expo사이트에 콘솔로 로그인 후 진행)

- //이후 앱(App) 실행파일 만들기 작업 내용에 대한 한글 참조(Step6 부터) : https://aspdotnet.tistory.com/2985

- //이후 웹(Web) 실행파일 만들기 작업 내용에 대한 영문 기술 참조 : https://docs.expo.dev/workflow/web/

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

 

Ps. 이후 리액트 네이티브 앱에 사용되는 다양한 기술을 추가할 예정입니다.