WERABLE

앞서 말씀드렸듯이 저는 healthKit(Wearable) 연동 부분을 맡아 진행하였습니다. 이 healthKit 연동 방법은 Apple Developer 공식 문서를 보면 Objective-C와 Swift 언어로만 설명 되어있지만 React Native로 프로젝트를 진행하였기 때문에 React Native node_module을 사용하였습니다.

HealthKit

WEARABLE

1. HealthKit

React Native

WEARABLE

2. Build Fail

'React/RCTBridgeModule.h'
file not found

해당 모듈을 사용하기 위해서는 추가적으로 Xcode에서 개발환경을 셋팅해야하는데요. 하지만 저는 Xcode의 개발환경에 대한 부분과 셋팅 도중 build를 실패함과 동시에 반복적으로 나타나는 이 오류를 이해할 수 없었습니다.

NATIVE CODE

왜 개발 환경을 셋팅해줘야하고 왜 BirdgeModule 오류와 함께 build를 실패하는지 해결 방법을 찾는 도중 Native Code라는 Keyword에 맞닥트리게 되었습니다.

NATIVE CODE

1. Native Code

Native Code?

CPU와 운영체제(OS)가 직접 실행할 수 있는 코드를 Native Code

Native Code란 CPU와 운영체제(OS)가 직접 실행할 수 있는 코드를 Native Code라고 합니다. 그리고 이 Native code로 Native Application을 만들 수 있는데요. Native Application은 우리가 흔히 알고 있는 Android SDK를 이용해 Java 언어로 만들어진 Android Application과 iOS SDK를 이용해 Objective-C로 만들어진 iOS Application을 말합니다.

NATIVE CODE

2. React Native

???

이 시점에서 저는 그렇다면 JavaScript의 라이브러리인 React.js를 기반으로 만든 React Native frameWork는 어떻게 Native Application을 만들 수 있는 것인지 의문이 들었습니다.

React Native

ReactJs

+

NATIVE CODE

3. Bridge

Bridge?

iOS/Android의 Native Code에 접근할 수 있는
일종의 다리 역할

React Native가 Native Application을 만들 수 있는 이유는 Bridge라는 개념을 사용했기때문입니다. Bridge는 iOS/Android의 Native Code에 접근할 수 있는 일종의 다리 역할을 수행하여 Native Application을 만들 수 있습니다.

NATIVE CODE

3. Bridge

Native        JS Bridge

Native Bridge        JS

조금 더 구체적으로 설명 드리자면 Bridge는 React Native 인프라스트럭처(애플리케이션을 가동시키기 위해 필요한 하드웨어나 OS, 미들웨어, 네트워크 등 시스템의 기반)의 일부분입니다.  브릿지는 전부 c++로 이루어져 있으며 브릿지 자체는 슬라이드에서 보여주는 것과 같이 두가지의 엔드 포인트를 가지고 있습니다. 그리고 엔드 포인트는 호출할 수 없으면 아무 의미가 없는데 이러한 엔드포인트를 Native Module이라 합니다. 다시 말해, 네이티브 모듈을 제외한 모든 것은 결국 자바 스크립트 어플리케이션에 보이지 않게 됨을 알게 되었습니다.그렇다고 한다면 HealthKit module은 Native module이고 compile하였을 때 Bridge가 해당 플랫폼의 Native UI요소에 접근하는 인터페이스를 제공하기 때문에 가능한 것이라면 어째서 이 모듈은 해당 플랫폼에 접근 할 수 없는 것인지 의문이 들었습니다.

COCOAPODS

이런 의문점을 가지고 찾아보던 중 맞닥트린 두번째 Keyword가 있었습니다. 바로 CocoaPods 입니다. 저는 처음 iOS 시뮬레이터를 사용하기 위해서 CocoaPods를 사용했는데요.

단순히 저희는 CocoaPods이 시뮬레이터를 실행하기 위한 조건인줄 만 알았는데 앞에 Bridge에대해 이해하고 나니 CocoaPods은 시뮬레이터 자체를 실행시키기 위한 조건이 아니라 iOS Application을 만들 때 라이브러리(오픈 소스)를 많이 사용하는데 수많은 Xcode 프로젝트 라이브러리들이 CocoaPods으로 관리되어지고 있으며 npm과 같은 역할을 하고 있음을 알게 되었습니다.

COCOAPODS

1. CocoaPods

pod install

pod install을 통해 라이브러리들을
해당 프로젝트에 설치하여 사용

COCOAPODS

2. pod install

npm install처럼 pod install을 통해 라이브러리들을 해당 프로젝트에 설치하여 사용할 수 있는데요.

이런 부분을 돌아보았을 때 즉, CocoaPods가 해당 라이브러리를 지원하지 않기 때문에 Native Module이지만 처음 보여드렸던 에러. Bridge Module 찾을 수 없다는 것이 왜 뜨는지 알게 되엇습니다.

COCOAPODS

3. Search Path

Build Success!

돌아온 것 처럼 보이지만 결국 React Native 인프라스트럭쳐와 Bridge를 이해해야만 왜 BidgeModule Error가 발생하는지 어떻게 해결할 수 있는지에 대한 방법에 도달 할 수 있는 것 같습니다. 그렇기 때문에 저도 단면적이지만 JavaScript와 Native 그리고 React Native 인프라스트럭쳐에대해 이해하고 HealthKit 연동을 할 수 있었습니다. 여기까지 기술 발표를 마치겠습니다. 감사합니다.