React Native Expo Eject 정리 (to ExpoKit)

토이프로젝트를 하다가, kakao-login, naver-login 연동을 하기위해 여러가지 실험과 삽질들을 하게되었다.

WebView로 해결하는 방법이 있었지만 나중에 또 이런 상황이 올 수 있을 것 같아 Native 모듈을 쓰기 위해 그냥 Expo에서 Eject 하기로 결정했다.

 

Google 로그인이나, Facebook 로그인 같은 경우에는 굳이 Eject 하지 않아도 진행이 가능한 것 같은데, 

아무래도 비교적 최신 기술이기 때문에 우리나라는 지원이 조금 늦는 듯 하다.

 

어쨌거나, 중간에 잘못될 수도 있기에 git 저장소에 커밋을 해두고 안전하게 진행했다.

 

- expo Eject 명령 실행

expo eject 실행 결과

IOS Identifier 값과 Android Package 값을 입력하는 절차가 있다.

해당 식별자 들은 AppStore와 PlayStore에 올라가는 값들이기에, 식별할 수 있는 값들로 정해주도록 하자.

 

별 무리없이 진행됐다면, ios와 android 디렉터리가 생성된 것을 볼 수 있을것이다.

ios, android 디렉토리가 생성된 것을 볼 수 있음.

 

- IOS 설정

IOS의 Native Dependancy를 관리해주기 위한 툴인 cocoapods를 설치해주도록 하자.

sudo gem install cocoapods

커맨드를 입력하고, password를 입력하면 cocoapods가 깔리고, 

native Dependancy를 설치해주기 위해 ios폴더로 이동해 커맨드를 날려주도록 하자.

 

cd ios
pod install

정상적으로 실행되었다면

pod install로 Native Dependancy를 설치한 후 디렉터리 구조

다음과같은 디렉터리 구조가 잡힐 것이고, 

확장자가 .xcworkspace 인 파일을 실행하게 되면 xcode가 실행될 것이다.

(expo로 실행하는 것이 아니기 때문에 xcode가 기존에 설치되있어야 한다.)

 

실행이 되면 

다음과 같은 xcode의 화면을 볼것이고, 필요한 것은 Identify 항목과 Signing 항목인데(배포시)

일단은 실행을 목적으로 하기에 Identify 값만 적당하게 입력해주도록 하자.

 

- IOS 실행

다시 돌아가서 프로젝트 root 디렉터리로 들어와 터미널을 열도록 하고, 

다음과같이 expo start 명령을 쳐주도록 하자.

실행 준비가 된 것을 볼 수 있다.

이후 Xcode에서 실행버튼을 클릭하게 되면

실행버튼 클릭

다음과같이 Expo에서 Eject되어 실행되는 모습을 볼수있다(^^)

실행되는 모습

이것으로 IOS는 일단 native 모듈을 쓸 수 있게 Eject가 되었고, 이제 안드로이드를 살펴보자

 

- Android 설정

Project Import

먼저 안드로이드 스튜디오를 실행해 Import project로 react-native 프로젝트의 android 디렉터리를 선택해주도록 하자.

그다음 import된 프로젝트에 추가적인 sdk들을 설치해주어야 한다.

SDK Tools 설치

LLDB, NDK, CMake, Google Play Licensing Libray를 선택하고, Apply를 누르면 다음과같이 설치를 할 수 있다.

SDK 설치 화면

 

설치가 끝났다면 Finish 버튼으로 빠져나와 Sync Project With Gradle Files 버튼을 눌러주도록 하자

 

Sync Project With Gradle Files 버튼 위치

- android 실행

가상머신이 없다면 적당한 안드로이드 가상머신을 만들고, 위 상태에서 실행 버튼을 누르면 다음과 같이 에뮬레이터에서

expo에서 Eject된 어플리케이션이 실행되는 모습을 볼 수 있다.

 

android 실행 영상

안드로이드와 Ios 동시에 실행시켜 본 것은 처음인데,

오히려 eject 하기 전보다 작업 효율이 올라갈 수 있다는 생각도 든다.

 

현재는 IOS만 개발해서 위에 보다시피 색상이나 글꼴이 완전히 호환되지는 않겠지만, 

지금처럼 에뮬레이터 두개를 동시에 켜놓고 하면 생산성이 확실히 올라갈 것 같다.

 

그리고 가장 중요한 Native 모듈의 제약이 없어지니

더욱 다양한 기능들을 만들고 연동할 수 있을거 같아 잘 시도한 것 같다.

 

마지막으로.. Eject 시 알 수 없는 에러들과 다양한 설정이 필요할 줄 알았는데

생각보다 말썽부리지 않고 성공하게 되어 다행이다.

 

 

 

ref - https://velog.io/@max9106/React-Native-Expo-eject-v8k2akbliq