[study] 240102

reactNative 

장점 : 

-하나의 코드로 관리, 러닝커브 높은 React사용

-코드푸시로 빠른 업데이트 -> 비용절감

-FastRefresh

-오픈소스 플랫폼

 

단점 : 

-일부기능 Native접근 필요

-오픈소스, 라이브러리 의존도

-성능

-잦은 업데이트

---

안드로이드 application에서 전체 앱 상태를 관리하는 class

 

Event를 전달하기 위한 함수를 제공

-onCreate:어플리케이션 실행될때 최초 호출

-onTerminate:어플리케이션 종료될 때 호출

 

Manifest : android 앱의 메타정보를 요약해서 선언해둔것

---

Permissions

자주 사용하는 권한 #1

사진관련

ios - NSPhotoLibraryUsageDescription

Android - READ_EXTERNAL_STORAGE

 

카메라관련 #2

ios-NSCameraIsageDescription

Android-WRITE_EXTERNAL_STORAGE

 

위치관련 #3

ios 

- NSLocationAlwaysAndWhenInUseUsageDescription

-Android

-ACCESS_FINE_LOCATION

-ACCESS_COARSE_LOCATION

-ANDROID_BACKGROUND_LOCATION

 

#4

AppTrackingTransparency

IDFFA를 읽어오는 권한

IOS 앱 심사시 필수로 보고있는 정보

---

Scheme

외부에서 우리 앱을 호출하거나, 우리 앱이 외부 앱을 호출하는 수단

 

정의하는법

(Android)

intent-filter를 통해서 정의

 

(ios)

info.plist > URL Types에 저장

---

reactNative가 동작하는 원리

 

Thread 란?

-실행되는 프로세스 내에서 실제로 작업을 실행하는 주체

-명령어를 실행하여 처리하는 주체

(like 음식점에서 음식을 만드는 행위와 비슷)

 

(1)MainThread or UI Thread

-Native 영역에 레이아웃을 그려주는 역할

 

(2)JavaScript Thread

-작성한 Javascript가 실행 되는 곳

 

(3)Native Module Thread

-Native Module 다룰 때 사용

-특정 리소스 등을 요청하고자 할때 사용

 

(4)Shadow Thread

-virtual DOM으로부터 새로운 Layout으로 변환하도록 계산해주는 역할

---

Native-Module

-Native API를 사용하기 위한 것

주료 현재 위치, wifi 상태 등 native 영역에서만 알고 있는 정보에 접근하는 것 또는 image processing 처럼 연산이 native의 높은 performance가 필요할 때 사용

 

#Native Module

-로직/연산에 대한 NativeModule

-어떤 Native Library의 함수를 호출할 때 사용

 

#Native UI Component

-View에 대한 Native Module

-주로 카메라 등 연산이 많은 View에 대해서 작성

---

# New Architecture

Bridge가 가진 제한점 

(1)비동기 처리

비동기 처리란 ?

어떤 작업이 끝날때까지 다음 프로세스를 기다리지 않고 다른 작업을 바로 실행하는 것

작업이 끝났는지 보장이 되지 않아, 끝났을 때 별도 처리가 필요

 

(Promise/ async-await ...)

(2)싱글 스레드(It was single threaded)

javascript가 싱글스레드에서 동작하기 때문에 bridge도 싱글 스레드로 동작함

 

(3)변환시 드는 과도한 비용 (It imposed extra overheads)

bridge로 이동 하게 될때 JSON Object 변환하는 비용이 큼

 

*기존에 있던 Bridge를 버리고, JSI가 해당 역할을 대신 하도록 수정

JSI : Javascript Interface, C++ 객체에 대한 참조를 할수 있게 해주는 역할

 

-Old Architecture : Bridge를 통해 NativeModule 과 Javascript 로직간 통신

-New Architecture : Bridge 자리에 JSI(Fabric/ TurboNativeModule)로 대체

 >>장점

(1)동기 실행이 가능해짐 : C++모듈로 직접 접근을 할 수 있다보니 비동기 통신이 아니어도 됨

(2)동시성 : Javascript 에서 다른 스레드에 있는 함수를 호출할 수 있음

(3)Overhead가 줄어듦 : JSON Object로 변환하지 않고 C++ 언어로 통신하게 되었기 때문

(4)IOS, Android 간 내부 네이티브 모듈 코드 공유 가능 : C++ 추가됨으로 인해 플랫폼이 다르더라도 한개의 코드로 관리 가능

(5)타입의 안정성 : 자동으로 생성 되는 코드 레이어에 의해 자동으로 타입을 생성하도록 되어있음

---

1)Fabric : New Architecture의 새로운 rendering system

이전 Architecture에서는 UI Manager가 담당하던 부분

-As-is render system

 

2)Turbo NativeModule : 기존 Architecture에서 NativeModule로 사용되던 것

Bridge가 사라지게 되면서 추가됨

-장점 :

(1)Platform 전반적으로 Typecheck가 잘됨

(2)플랫폼 별 코드 공유가 쉬움 (C++로 작성된 코드 공유)

(3)Native Module Lazy Loading이 적용됨

    -Lazy Loading : 최초에 모든 리소스를 로드하는 것이 아닌, 필요할 . 때로드하는 방식 (최초 로드시 부하를 줄이기 위함)

(4)JSI 사용으로 인하여 Native와 Javascript 코드간 통신이 효율적

JSON Object로 변환 없이 C++ 코드만으로 통신 가능

 

3)CodeGen

 3rd-party library에서 제공되는 코드를 인터페이스에 맞게 작성하면 JSI 관련 코드를 만들어 주는것

프로젝트를 빌드 할 때 자동으로 실행(빌드 시간에 영향)

 

NewArchitecture : 아직까지 실험적인 부분들이 많음.

---

Hermes 

-Facebook에서 만든 javascript Engine

-Bytecode 형태로 미리 컴파일하여 저장해둔뒤 사용

앱 최초 로딩시 jsbundle 파일을 읽어와 동작 가능한 javascript로 compile 하게 됨

-앱 빌드 시간에 parse 와 compile 등 필요한 작업을 빌드할 때 하도록 함

Bytecode 형태로 미리 컴파일 해두면 실행만 시키면 되기 때문