리액트 네이티브 2/E 3주차 강의자료

codejong · 10월 6, 2018, 4:05오전

.slide_bg_img { opacity: 1 !important; }

리액트 네이티트 2/E 3주차

코드종의 클래스

지난 주 내용 다시 보기

Just 10 min 지난 내용 질문

필수 컴포넌트 : Image, Text, List …
스타일 작성 방법

오늘 다룰 내용은?

6장 플랫폼 API
- 위치 정보(Geolocation), 카메라롤, AsyncStorage
7장 모듈과 네이티브 코드
- npm 모듈 설치 : 순수 JS 모듈과 네이티브 모듈
- 네이티브 코드 작성 및 사용 기본
- 네이티브 모듈의 코드 살펴보기
8장 플랫폼 특정 컴포넌트
- 플랫폼별로 다르게 하는 방법

6장 플랫폼 API

지리적 위치 정보

navigator.geolocation.getCurrentPosition( 
  (position) => {
    console.log(position); 
  },
  (error) => {alert(error.message)},
  {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
);

MDN Spec을 따름
참고 : Specification List

사용자에게 요청해야하는 권한?

카메라, 사진, 연락처 등 개인정보와 관련있는 데이터에 대한 접근 권한

앱 별로 권한이 따로 관리
OS 종류나 버전, 사용하려는 API(카메라, 사진롤, 위치…)에 따라 사용자에게 물어보지 않고 바로 사용할 수 있는 API들이 있고 사용자에게 시스템이 직접 물어보는 API도 있다.
점점 더 권한을 사용자에게 직접 물어보는 추세

[책] 권한 요청 관련 주요 내용

대화 상자가 화면에 보이는 동안에는 어떤 콜백도 호출되지 않는다. 사용자가 허용 여부를 선택하고 나면 그에 맞는 콜백이 호출될 것이다. 앱 별로 한번 선택한 사항은 유지되므로 다음번 요청에는 대화 상자가 나타나지 않는다. 사용자가 거절했을 경우에는 위치 정보를 가져오지 못할 뿐 아무 일도 일어나지 않게 할 수 있다. 하지만 대부분의 앱은 요청이 거절당하면 위치 정보를 허용해 달라고 별도로 만든 대화 상자를 사용자에게 다시 보여주곤 한다.

110쪽~111쪽 (6.1절)

권한 다루기 1/2

Step 1 : 앱 설정 파일 수정
- 안드로이드 (AndroidManifest.xml) : 앱 설정 파일에 어떤 권한을 사용자에게 요청할 수 있는지 명시
- ios (Info.plist): 어떤 권한을 사용자에게 물어 볼 때 보여줄 text 메시지

권한 다루기 2/2

Step 2 : 권한을 획득하기 위해 API 호출
- 안드로이드 최신버전에서는 별도의 권한을 요청하는 API 사용 PermissionsAndroid
- iOS는 사용자에게 별도로 물어보는 API도 있지만 모듈에 따라 첫 사용시 권한을 물어보는 경우 있음
- 사용자는 시스템이 보여주는 화면(AlertDialog)에서 최종 승인
  - 사용자는 언제든지 철회할 수 있다.
  - 한번 사용자가 선택하면 설정에서 바꾸거나 앱 삭제 전까지 해당 상태로 유지됨

권한 요청 관련 UX 1/3

무식버전
- 앱 시작과 동시에 필요한 모든 권한을 묻는다.
심플버전
- 권한이 필요한 액션을 누를 때 권한을 묻는다.

권한 요청 관련 UX 2/3

커스텀 Prompt를 이용한 방법

	사용자 허락	사용자 거절
Prompt	Permission Request 하기	아무것도 하지 않음
Permission Request	(권한 얻음)	(권한 거절됨, 다시 Permision Request를 보내지 못함)

참고자료 : OneSignal, icon8.com, localytics.com

권한 요청 관련 UX 3/3

친절 버전 1단계
1. 권한이 필요한 액션을 누르면
2. 이미 사용자에게 요청을 물은 적 있는가?
  - NO) 권한을 요청한 적 없다
    - 권한에 대한 안내화면을 보여준 후 권한을 묻는다.
  - YES) 요청했을 때 사용자가 승인했나?
    - 네) 이미 승인되어 있으면 액션진행(카메라 띄우기)
    - 아니오) 이미 거절되었다면 권한을 승인해줘야 어떤 기능을 이용할 수 있는지 안내하고 설정화면으로 보내기

설정 앱으로 보내는 모듈
https://github.com/KrazyLabs/react-native-app-settings

watch형태의 callback 지정 시 주의

case : setInterval이나 geolocation.watchPosition 같이 한번 설정하면 반복적으로 호출 될 수 있는 코드

잊지말고 해제해야 한다.

// 설정
componentDidMount() {
  this.watchID = navigator.geolocation.watchPosition((position) => {
    this.setState({position: position});
  });
}

// 해제
componentWillUnmount() {
  navigator.geolocation.clearWatch(this.watchID);
}

사진과 카메라롤

iOS의 경우 RCTCameraRoll 라이브러리 link 해야 한다. (참고 링크)
시뮬레이터/에뮬레이터에 사진 넣는 방법
- 사진을 그냥 드래그 해서 에뮬레이터/시뮬레이터로 드롭
- iOS,안드로이드 모두 사진 앱에서 확인 가능 (안드로이드는 download로 구분됨)

카메라롤

promise 패턴으로 이용
다양한 옵션 및 자세한 내용은 공식 문서 참조
iOS의 경우 공식문서 참조하여 ==반드시== Info.plist 수정!

CameraRoll.getPhoto({first: 1})
.then( data => {
  
}).catch( e => {
  
});

AsyncStorage

브라우저의 쿠키나 localStorage처럼 종료후에도 값이 남아있는 데이터
보안이 필요한 경우에는 keychain을 이용
- react-native-keychain
이 역시 promise 패턴

//set
AsyncStorage.setItem('myKey', 'myValue')
.then( () => {
  // do something
})
.catch( e => {});

//get
AsyncStorage.getItem('myKey')
.then((value) => {
  // do something
});

7장 모듈과 네이티브 코드

npm 모듈 설치 1/2

package.json에 추가하는 방법의 차이

npm install --save lodash
npm install --save-dev jest

–save	–save-dev
dependancy	devDependancy
실제 앱 구동에 필요한 것	개발과정에만 필요한 것
앱 빌드에 포함	로컬 개발 환경에만 설치

npm 모듈 설치 2/2

특정 버전/git url 등 다양한 방법 (공식 문서)
버전 표기 방법
- 시멘틱 버저닝
- 적용 버전 확인하기
pacakge-lock.json

네이티브 모듈 설치하기

네이티브 모듈 : 네이티브 코드를 사용하는 모듈
npm install 과 react-native link 두 가지 과정이 필요
==네이티브 모듈 link 전 반드시 commit하자.==
- 자동으로 변화는 부분 확인 가능
- 꼬일 경우를 대비 가능

네이티브 link로 자동 vs 수동?

자동의 유혹은 대단하지만 저는 수동으로
- 이유 1) 정확히 어떤 설정을 하는지 눈으로 파악
- 이유 2) link로 정상작동 안하는 모듈도 있다. 결국 수동으로…

모듈 만들 때 참고

치트 시트
react-native-create-library
npm link를 이용할 경우 android에서 빌드 실패

오브젝티브-C 네이티브 모듈

생성한 파일은 Xcode에 포함시켜야 빌드에 포함된다. (파일위치는 무관)
네에티브 코드를 JS에서 사용하기 위해 오브젝티브-C에서 해야할 일
- RCTBridgeModule 헤더 불러오기
- RCTBridgeModule 인터페이스를 따르도록 정의하기
- RCT_EXPORT_MODULE 매크로 실행하기
- RCT_EXPORT_METHOD 매크로를 이용하여 하나 이상의 함수를 익스포트하기

HelloWorld.h

#import <React/RCTBridgeModule.h>
@interface HelloWorld : NSObject <RCTBridgeModule> @end

HelloWorld.m

#import "HelloWorld.h"
#import <React/RCTLog.h> 

@implementation HelloWorld 

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(greeting:(NSString *)name) {
  RCTLogInfo(@"Saluton, %@", name); 
}
@end

RCT_EXPORT_MODULE는 네이티브 모듈을,
RCT_EXPORT_METHOD는 네이티브 모듈의 함수를 자바스크립트에서 접근 가능하도록 내보내는 매크로

react-native-video ios 버전 탐험하기

UI 컴포넌트는 뷰 메니저가 필요하다

RCTViewManager 서브클래스
RCT_EXPORT_MODULE() 매크로 사용
-(UIView *) view 함수 구현

자바 네이티브 모듈

My==Module.java==

My==Package.java==

My==ViewManager.java==

네이티브 모듈에서 기억할 점

단순 모듈과 UI 컴포넌트 모듈을 만드는 방법이 다르다.
설치시 react-native link
변경 후에는 네이티브까지 새로 빌드
- react-native run-XX 이나 xcode 등을 이용해서

모듈 수정해서 사용한 사례

8장 플랫폼 특정 컴포넌트

==공식 문서가 최고다!==

파일명으로 분리
코드로 분리

플랫폼 특정 컴포넌트의 핵심

iOS 앱은 iOS답게
안드로이드 앱은 안드로이드 답게

과제

안한다고 혼나지는 않아요.

네이티브를 사용하는 모듈 최소 1개 더 적용해보기
- react-native-device-info
- react-native-fast-image
- react-native-app-settings
- 초기 세팅 절차가 많은 모듈

오늘은 여기까지 입니다.

무엇이든 물어보세요.
감사합니다.

healim.me · 10월 6, 2018, 4:26오전

오늘도 꿀팁 전수 강의 감사합니다 계속 해볼게 생겨서 두근두근하네요 하하