개발환경(Windows)

React Native 란? 

JavaScript 기반의 React를 사용해서 모바일 앱을 제작할 수 있는 오픈소스 프로젝트 (또는 어플리케이션 개발 프레임워크)

단순히 라이브러리라고 하기에는 개발 방법에 대한 구체적인 방법과 지원해주는 API들이 있으니 프레임워크라고 생각 할 수 있다 다만 React Native는 자체적으로 Native App 개발에 대한 컴파일러나 인터프리터가 해석해서 개발자가 작성한 코드가 프레임워크에 의해서 Callee(피호출자)로 동작하는게 아니라 실제 Native API를 Caller로서 동작하기에 API들을 호출하기 위한 집합 즉 라이브러리 성격이 강하다. 

위의 구분을 타이트하게 잡을 필요는 없을 것 같다 MFC도 Win32API를 감싼 라이브러리로 해석되지만 개발 프레임워크로도 불린다. 즉 개발규칙의 자유도가 저수준인지 고수준인지에 대한 구분정도에서 프레임워크와 라이브러리를 구분하면 될 것이다. 

관련 링크 : http://web-front-end.tistory.com/63 (그나마 구분이 가는 내용)

특징 (https://facebook.github.io/react-native/)

1. React Native는 모바일 웹앱, HTML5앱, 또는 Web View 기반의 하이브리드앱이 아니라 실제 Native 성격의 앱 개발이 가능하다 

2. JavaScript Code가 변했을 때 다시 빌드를 하지 않아도 재로딩만으로도 변경된 코드를 적용가능하다 

3. 필요한 경우 JavaScript Code에서 연결되는 Bridge를 통해 Object C, Swift, JAVA로 작성된 Native Module를 작성하거나 호출할 수 있습니다. 

필수설치 모듈 (Windows에서 Android App 개발) 

1. Chocholatey (https://chocolatey.org/)  -> 이걸안쓰면 Yarn 이라는 Package Manager도 있다 

  

 - Package Manager로 인터넷 연결이 되어 있으면 쉽게 Node.js, Python2 를 설치 가능 

   choco install -y nodejs.install python2 jdk8

   Node.js (오프라인 설치 : https://nodejs.org/en/download/)

   Python2 (오프라인 설치 : https://www.python.org/downloads/windows/)

2. NPM 설치 (Node.js command prompt) 

   npm install -g react-native-cli

3. JDK8 설치 

   Java Develop Kit (http://www.oracle.com/technetwork/java/javase/downloads/index.html)

   최신버전인 10버전으로 설치를 진행해봤으나 React Native 빌드시 Java 버전 오류 발생으로 8로 다운그래이드

   JAVA_HOME 환경변수로 등록

 

3. Android Studio 

   Android Studio (https://developer.android.com/studio/)

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

4. Android SDK Manager 

    Android 6.0 (Marshmallow)  

• Google APIs
• Android SDK Platform 23
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 System Image

   Android SDK Build-Tools (Marshmallow의 API 레벨이 23이다 안드로이드는 플랫폼(OS)과 API 레벨이 같이 올라간다)

• 23.0.1

   ANDROID_HOME 환경변수로 등록

5. 애뮬레이터 설치  

  Android Studio 에서 Android Virtual Device Manager -> Create Virtual Device 

  주의사항 : HAXM 이 설치 되어야 하며 그 기술을 사용하려면 Intel Virtualization Technology 기능이 켜져 있어야 함 

                해당 기능이 꺼저있으면 경고문구가 나오고 Mainboard의 BIOS 메뉴에서 켜줘야 함

6. 편집기 설치 

   Visual Studio Code 설치 (https://code.visualstudio.com/docs?start=true)

   확장기능 설치해서 툴 기능 강화 

   디버깅이 지원된다. (필수) 

(https://www.vobour.com/vscode-%EC%B6%94%EC%B2%9C-%EC%9D%B5%EC%8A%A4%ED%85%90%EC%85%98%EA%B3%BC-%EC%84%B8%ED%8C%85-vscode-recommended-e)

7. Expo 설치 (https://expo.io/tools#xde) 

   Expo는 필수설치는 아니지만 쉽게 빌드해서 스마트폰까지 배포가 가능하다 

   Expo를 사용하면 장점 

   - 지원해주는 Library 설치

   - 쉽게 빌드 

   - 쉽게 배포?? 아닐 수 도 있음 

(이것은 수정하고자 한다. 따로 네이티브 모듈을 붙여서 배포하려면 expo에서 detach를 해야 한다고 한다. 이런 제한된 기능 때문에 데모앱을 만들기에 좋고 실제 서비스 앱용으로는 적합하지 않을 수 있다. )  

   - Expo에서 개발자 옵션에서 핫 리로딩을 키려면 Ctrl + M 을 누른다

8. Git을 통한 소스버전 관리 설치 

   Git (https://git-scm.com/downloads)

   VS Code에서 GitHub 연동으로 버전관리 설정 

9. 단위 테스트를 위한 Jest 연동 

   JavaScript Unit Test (http://jestjs.io/)

10. Create Project (Example)

   프로젝트를 설치할 경로를 정하고 (ex: C:\dev 생성)

   

   react-native init AwesomeProject

11. Run react-native App 

   애뮬레이터가 켜저있는 상태에서 command 명령 실행

  

   cd AwesomeProject 

   react-native start         (이것은 npm start로 해도 동일하고 하지 않아도 아래 run-android를 하면 동일하게 시작된다.) 

   새로 cmd 창을 뛰어서 아래 명령어로 빌드 한다

   

   react-native run-android (공식 문서에는 이 명령어만 되어 있음 실행시 node.js 구동)

   

   Hello world 같은 화면이 구동되면서 기본 셋팅 완료

12. react-native 확인 -> 기본설치 되는 폴더의 설치되어 있는 node module에 가면 있다   

   C:\WeatherProject\node_modules\react-native