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

강의자료

(코드종) #1
.slide_bg_img { opacity: 1 !important; }

로고

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

코드종의 클래스

bg


지난 주 내용 다시 보기

:clock10: Just 10 min 지난 내용 질문

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

:telescope: 오늘 다룰 내용은?

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

bg

6장 플랫폼 API


:round_pushpin: 지리적 위치 정보

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

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

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

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

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

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

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를 보내지 못함)

권한 요청 관련 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);
    }
    

:camera: 사진과 카메라롤

  • iOS의 경우 RCTCameraRoll 라이브러리 link 해야 한다. (참고 링크)

  • 시뮬레이터/에뮬레이터에 사진 넣는 방법

    • 사진을 그냥 드래그 해서 에뮬레이터/시뮬레이터로 드롭
    • iOS,안드로이드 모두 사진 앱에서 확인 가능 (안드로이드는 download로 구분됨)

카메라롤

  • promise 패턴으로 이용
  • 다양한 옵션 및 자세한 내용은 공식 문서 참조
  • iOS의 경우 공식문서 참조하여 ==반드시== Info.plist 수정!
CameraRoll.getPhoto({first: 1})
.then( data => {
  
}).catch( e => {
  
});

AsyncStorage

  • 브라우저의 쿠키나 localStorage처럼 종료후에도 값이 남아있는 데이터
  • 보안이 필요한 경우에는 keychain을 이용
  • 이 역시 promise 패턴
//set
AsyncStorage.setItem('myKey', 'myValue')
.then( () => {
  // do something
})
.catch( e => {});

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

bg

7장 모듈과 네이티브 코드


npm 모듈 설치 1/2

  • package.json에 추가하는 방법의 차이
npm install --save lodash
npm install --save-dev jest
–save –save-dev
dependancy devDependancy
실제 앱 구동에 필요한 것 개발과정에만 필요한 것
앱 빌드에 포함 로컬 개발 환경에만 설치

npm 모듈 설치 2/2


네이티브 모듈 설치하기

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

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

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

모듈 만들 때 참고


오브젝티브-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 등을 이용해서

모듈 수정해서 사용한 사례


bg

8장 플랫폼 특정 컴포넌트

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

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

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

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

:house: 과제

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


:pray: 오늘은 여기까지 입니다.

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


(혜림) #2

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