iamport-react-native

# Expo에서 아임포트 연동하기 `iamport-react-native`는 Expo 환경에서 사용하실 수 있습니다. 또한 eject를 하지 않아도 사용 가능합니다. 이 문서에서는 eject를 하지 않은 managed 프로젝트와 eject를 한 bare 프로젝트 양 쪽에서 Expo를 설정하는 방법을 설명하고 있습니다. ## Expo CLI 설치하기 ``` $ npm install -g expo-cli ``` ## 1. managed 프로젝트 managed 프로젝트는 Expo의 가장 기초적인 프로젝트 생성 방식으로 플랫폼별 네이티브 코드 없이 오직 자바스크립트 및 타입스크립트만으로 앱을 개발하는 방식입니다. Expo 자체 서버에서 빌드 및 배포를 모두 처리할 수 있습니다. `ios`및 `android` 폴더가 없기 때문에 필요한 설정들은 `app.json`에 적어주셔야 합니다. ### 1-1. Expo 서버 빌드를 위한 설정 managed로 개발하는 경우 빌드를 Expo 서버에서 원격으로 진행하게 되며 그에 따른 [필수 값들](https://docs.expo.dev/distribution/building-standalone-apps/#2-configure-appjson)을 채워야 합니다. - `name`, `icon`, `version`, 그리고 `slug`는 앱 공통 설정으로 필수입니다. - `ios`의 `bundleIdentifier` 및 `buildNumber`는 iOS 앱 배포 및 빌드를 위해 필수입니다. - `android`의 `package` 및 `versionCode`는 안드로이드 앱 배포 및 빌드를 위해 필수입니다. ```json // app.json { "expo": { "name": "Your App Name", "icon": "./path/to/your/app-icon.png", "version": "1.0.0", "slug": "your-app-slug", "ios": { "bundleIdentifier": "com.yourcompany.yourappname", "buildNumber": "1.0.0" }, "android": { "package": "com.yourcompany.yourappname", "versionCode": 1 } } } ``` ### 1-2. 외부 앱 실행을 위한 설정 Expo bare 프로젝트나 일반 리액트 네이티브 프로젝트의 경우 AndroidManifest.xml 및 Info.plist에 앱 scheme [관련 설정](./SETTING.md)을 작성하지만, managed 프로젝트의 경우 네이티브 코드가 없어 app.json에 대신 설정을 적어주셔야 합니다. 먼저 안드로이드를 위한 외부 앱 설정에 필요한 expo-build-properties를 설치합니다. ```sh npx expo install expo-build-properties ``` - `ios.infoPlist.LSApplicationQueriesSchemes`에는 외부 앱 리스트를 작성합니다. - `ios.infoPlist.NSAppTransportSecurity`의 두 항목을 `YES`로 설정합니다. - `android.intentFilters`에 개발하시는 앱의 scheme을 설정합니다. - `plugins`에 expo-build-properties를 이용해 안드로이드 외부 앱 리스트를 추가로 작성합니다. ```json // app.json { "expo": { ..., "ios": { ... "infoPlist": { "LSApplicationQueriesSchemes": [ "kftc-bankpay", "ispmobile", "itms-apps", "hdcardappcardansimclick", "smhyundaiansimclick", "shinhan-sr-ansimclick", "smshinhanansimclick", "kb-acp", "mpocket.online.ansimclick", "ansimclickscard", "ansimclickipcollect", "vguardstart", "samsungpay", "scardcertiapp", "lottesmartpay", "lotteappcard", "cloudpay", "nhappcardansimclick", "nonghyupcardansimclick", "citispay", "citicardappkr", "citimobileapp", "kakaotalk", "payco", "chaipayment", "kb-auth", "hyundaicardappcardid", "com.wooricard.wcard", "lmslpay", "lguthepay-xpay", "liivbank", "supertoss", "kakaobank" ], "NSAppTransportSecurity": { "NSAllowsArbitraryLoads": true, "NSAllowsArbitraryLoadsInWebContent": true } } }, ... "android": { ... "intentFilters": [ { "action": "VIEW", "category": [ "DEFAULT", "BROWSABLE" ], "data": { "scheme": "exampleformanagedexpo" } } ] }, ... "plugins": [ [ "expo-build-properties", { "android": { "manifestQueries": [ { "intent": { "action": "android.intent.action.VIEW", "category": "android.intent.category.BROWSABLE", "data": { "scheme": "https" } }, "package": [ "kvp.jjy.MispAndroid320", "com.kftc.bankpay.android", "com.kbstar.liivbank", "com.nh.cashcardapp", "kr.co.kfcc.mobilebank", "com.knb.psb", "com.kakao.talk", "com.mysmilepay.app", "finance.chai.app", "com.nhnent.payapp", "com.hyundaicard.appcard", "viva.republica.toss", "com.shcard.smartpay", "com.shinhan.smartcaremgr", "com.hanaskard.paycla", "kr.co.samsungcard.mpocket", "com.kbcard.cxh.appcard", "nh.smart.nhallonepay", "kr.co.citibank.citimobile", "com.lcacApp", "com.lotte.lpay", "com.ssg.serviceapp.android.egiftcertificate", "com.inicis.kpay", "com.kbankwith.smartbank", "com.lguplus.paynow", "com.wooricard.smartapp", "com.lottemembers.android", "com.kt.ktauth", "com.lguplus.smartotp", "com.sktelecom.tauth", "com.wooribank.smart.npib", "com.kakaobank.channel" ] } ] } } ] ] } } ``` ### 1-3. 예제 - [예제 코드 작성하기](./EXAMPLE.md) - [예제 프로젝트 실행하기](../exampleForManagedExpo/README.md) ## 2. bare 프로젝트 bare 프로젝트는 기존 managed 프로젝트에서 eject를 실행해 네이티브 코드를 사용하고자 하는 개발 방식입니다. Expo 자체 서버에서 bare 프로젝트의 빌드를 지원하고 있지 않기 때문에 앱 배포를 위해서는 로컬에서 직접 빌드하게 됩니다. ### 2-1. 설정 파일(app.json) 확인하기 원활한 ejecting을 위해 아래와 같이 설정되어 있는지 확인합니다. ``` // app.json { "expo": { "name": "Your App Name", "icon": "./path/to/your/app-icon.png", "version": "1.0.0", "slug": "your-app-slug", "sdkVersion": "XX.0.0", "ios": { "bundleIdentifier": "com.yourcompany.yourappname" }, "android": { "package": "com.yourcompany.yourappname" } } } ``` - IOS의 `bundleIdentifier`값과 Android의 `package`값에 알맞은 값을 넣어야 합니다. - `name`, `icon` 그리고 `version` 필드는 필수입력입니다. - 보다 자세한 내용은 엑스포 공식문서 [Configuration with app.json](https://docs.expo.dev/workflow/configuration)을 참고해주세요. ### 2-2. EJECT 하기 프로젝트 폴더에서 expo 명령어를 통해 eject 합니다. `android`와 `ios` 폴더가 생성되며 필요한 dependency들이 설치됩니다. ```shell $ expo eject ``` ### 2-3. [아임포트 설치 및 링킹하기](./INSTALL.md) ```shell $ yarn add iamport-react-native $ yarn add react-native-webview ``` ### 2-4. 설정하기 - [IOS 설정하기](./SETTING.md) - [실시간 계좌이체 설정하기](./TRANS.md) ###2-5. 예제 - [예제 코드 작성하기](./EXAMPLE.md) - [예제 프로젝트 실행하기](../exampleForExpo/README.md) ### 2-6 [콜백 함수 설정하기](./CALLBACK.md)