React Native 개발 준비

RN Ebook 강좌

 https://thebook.io/006946/

AVD 실행

avd.vbs 파일 생성

Set WshShell = CreateObject("WScript.Shell")

WshShell.Run chr(34) & "c:\lunch_avd.bat" & Chr(34), 0

Set WshShell = Nothing

lunch_avd.bat 파일 생성

%ANDROID_HOME%\emulator\emulator.exe -avd Pixel_2_API_28

환경 설정 : %ANDROID_HOME%

C:\Users\<유저명>\AppData\Local\Android\Sdk

expo

 

react native 개발 시 가장 처음 접한 것이 expo이다.

expo 개발 과정은 

expo start를 하면 프로세스가 하나 뜨는데, 이를 이용해서, 안드로이드와 아이폰에서 결과 확인이 가능하다

문제는 네이티브 sdk가 필요한 경우 eject를 해야한다고 하는데, 그게 쉽지가 않은 듯 했다.

카카오톡 로그인 기능을 넣을려고 했더니 expo에서는 불가능 했다.

그래서 결국 react-native cli로 변경했다.

React-Native CLI

 

설치 방법은 인터넷에 많이 나와있으니 그대로 하면 되고,

몇일 삽질을 하다보니, 알게된 것은

프로젝트 생성 후 npm start를 하면, 로컬에 웹서버가 하나 뜨는데, 이것은 RN으로 개발한 JS번들을 자동으로 

로드해주는 역할을 하는 것 같다.

react-native run-android 를 수행하면, 

웹서버가 하나 뜨고, 현재 연결된 avd랑 연결되고, 앱이 실행된다.

앱이 실행되면서 웹서버로부터 js번들을 끌어와서 실행시키는 듯 하다.

native sdk는 npm install 을 이용해 설치하고,

react-native link 명령을 통해 연결시키는 듯 하다.

프로젝트 폴더에 보면, android와 ios가 있는데 android 폴더를 

안드로이드 스튜디오에서 import project로 열어서 실행 해 볼 수 있다.

이때 웹서버가 띄어져 있어야 한다. ( react-native start ) 

일단 카카오톡 sdk 연동해봤는데, 정상 동작하는 듯 하다.

Facebook login

 

페이스북 로그인 및 프로파일 가져오기 : 링크

Tips

- avd에서 graphql 시도 시 network request fail 에러 시

adb reverse tcp:8000 tcp:8000 

- 개발 메뉴 보이기 ( 실제 폰에서 )

adb shell input keyevent 82

- 네이티브 모듈 작성 : https://medium.com/@kyo504/npm을-이용한-react-native-네이티브-모듈-작성과-배포-672533dabea9

- 무한스크롤 : FlatList 이용

- 설명 :  https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6

- Code : https://github.com/spencercarli/react-native-flatlist-demo

Graph QL

 

• Pagination with apollo : https://codeburst.io/graphql-pagination-by-example-part-3-e010d9baa126

• Apollo Server & client file Upload example code : https://github.com/jaydenseric/apollo-upload-examples

     - 클라이언트는 웹 버전이지만, 일단 돌아가는 거 확인하고, 본인이 만든 서버랑 테스트할 때 편리함

• Persisted Queries 
• 설명( [ https://blog.apollographql.com/persisted-graphql-queries-with-apollo-client-119fd7e6bba5 ] )
• GraphQL Dynamic Persisted Queries :  
• 설명 :  https://medium.com/open-graphql/graphql-dynamic-persisted-queries-eb259700f1d3
• Code : https://github.com/corey-clark/graphql-dynamic-persisted-queries
• redis를 이용한 hash와 query의 관계를 저장하고, 저장된 hash가 있는 경우, hash 키 값으로 쿼리를 수행하는 방법에 대해 설명함 
• ※ Redis 소개 : http://bcho.tistory.com/654 
• Redis window 버전 : https://github.com/rgl/redis/downloads

• backend는 직접 구현했으며, front end 는 apollo-link-persisted-queries 라이브러리 사용
• apollo-link-persisted-queries : 쿼리 요청시 자동으로 해쉬값으로 인코딩해서 요청하고, 요청 실패시 원본 쿼리를 전달하는 역할을 수행함.
• GraphQL Persisted Queries using GET requests : https://medium.com/@coreyclark/graphql-persisted-queries-using-get-requests-8a6704aba9eb  = 확인필요

Permission 설정 관련

 

• Permission : https://facebook.github.io/react-native/docs/permissionsandroid

- Android/app/src/main/androidManifest.xml

아래와 같이 설정

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Library

•  지도
• google 지도 apple 지도 :  https://github.com/react-community/react-native-maps 
• daum 지도 :  https://github.com/asata/react-native-daummap
• Best React Native 라이브러리 리스트 : https://github.com/jondot/awesome-react-native

참고용 코드

  

• Instagram UI 따라하기 (Expo 버전) : https://github.com/jamland/instabyte

• rncamera 예제 코드 : https://github.com/react-native-community/rncamera-example/blob/master/App.js

• react-native-root-siblings : 전역적으로 상위에 Component 생성
• https://github.com/magicismight/react-native-root-siblings

• 인스타그램 클론 코드 : https://github.com/Sunghee2/Myongstagram-android