리엑트 네이티브로 시작하는 앱 개발 1

2018.05.14

  - 목표 

     1) 환경설정

     2) Hello World 

※ 참고 URL(강좌) : https://academy.realm.io/kr/posts/react-native/

리엑트 네이티브 ? 

  : 페이스북이 공개한 IOS 와 안드로이드 앱 개발을 위한 라이브러리

  : 리액트의 접근 방법을 모바일로 확장하는 페이스북의 오픈소스 프로젝트

  : 자바스크립트로 작업 → 인터페이스는 네이티브 위젯으로 표시

리액티브(Reactive) vs 리액트(React) ??

  - 리액트 : 페이스북이 웹 개발을 쉽게 하기 위해 만든 기술

  - 리액티브 : 마이크로소프트가 창안한 개념으로 스트림과 비동기 처리등을 LINQ에 영향을 받은 방법 (스트리밍, 가벼운, 실시간)

     * LINQ(Language-Integrated Query) :  C# 언어에 직접 쿼리 기능을 통합하는 방식을 기반으로 하는 기술 집합 이름, 데이터에 대해 질문하는 언어 ??  (참고)

※ 참고 URL(Window 환경 설치) : http://steambread.tistory.com/17

※ 작업 경로 : D:\My\05_Study\ReactNativeApp

윈도우 환경에서 react-native(RN) 셋팅 방법

기본 셋팅 목록

• • JDK
  • NPM (Node.js)
  • Android SDK

               

따라해~

     1. react-native cli 설치 (React Native Commandline Interface)

      → react-native 프로젝트 자동 생성 및 IOS 시뮬레이터 구동 등 리엑트 네이티브 개발에 필요한 모든 명령 행 인터페이스이다.

          $ npm install -g react-native-cli  : npm 패키지에 전역으로 RN cli 가 설치 됨.

               -> ~~\AppData\Roaming\npm 경로에 설치된 것을 볼 수 있음.

     2. Android SDK 설치

          https://developer.android.com/studio/?hl=ko

          Android Studio에는 JDK(Java SE Development Kit) 버전 8이 필요합니다.

          터미널에 “javac -version”을 입력하여 보유하고 있는 버전을 확인할 수 있습니다.

          - java 환경변수 설정 방법 : http://wookoa.tistory.com/54

          - Android SDK 설치 & 환경변수 설정 방법 : http://mkil.tistory.com/373          

          - sdk List 

                - Google APIs

                - Intel x86 Atom System Image

                - Intel x86 Atom_64 System Image

                - Google APIs Intel x86 Atom_64 System Image

                - Android SDK Build-Tools 23.0.1

          - ANDROID_HOME(C:\Program Files\Java\jdk1.8.0_171\bin), platform-tools, tools  ~ (java/jdk 에 sdk 설치해서.... 환경변수를 이렇게 잡았음...)

     3. 프로젝트 생성  (cmd 창에서)

          $ react-native init 프로젝트명

     4. 디바이스 연결 후 명령어 실행 $ react-native run-android - BUILD SUCCESSFUL -> 성공

          

          혹은 안드로이드 스튜디오 실행 후 "AVD Manager" 디바이스 설치 → PC 에서 확인 가능

          

          - troble shooting :: 핸드폰 연결 시 드라이버 설치 (내껀 LG 꺼니까 LG 사이트 가서 [이동]), 핸드폰 개발자옵션 On, USB 디버깅 On

          

     5. 수정한 내용 바로바로 적용하기 위해서는

          핸드폰 흔들기 → 메뉴 "enable Live Reload"  하면 수정 내용 반영 됨

          => App.js 파일 수정하면서 새로고침 되는 내용 확인 해보면 됨.  

              (수정하고 저장하면 아래처럼 막 그래프가 뜨고 그러면 자동으로 새로고침됨)