Home > V2 > Docs > Sdk > React-native > Reactnative-install-guide

ReactNative 플러그인 연동가이드

1. 리액트 플러그인 설치 (AOS/IOS 공통 설정)

1.1 플러그인 다운로드

터미널에서 아래의 명령어를 통해 리액트 플러그인을 프로젝트에 다운로드 합니다.

Copy
SHELL
1$ npm install --save git+https://github.com/WisetrackerTechteam/RW-react-package.git

1.2 플러그인 설치 확인

프로젝트에 플러그인이 정상 다운로드되면 node_modules 폴더 아래 다음과 같이 플러그인 파일이 추가된 것을 확인할 수 있습니다.

2. Android 설정

2.1 AuthorizationKey 등록

프로젝트의 app/res/values/strings.xml 파일에 아래 코드를 추가합니다.

Copy
XML
1<string-array name="dotAuthorizationKey">
2 <item name="useMode">1</item>
3 <item name="serviceNumber">xxxxx</item>
4 <item name="expireDate">14</item>
5 <item name="isDebug">false</item>
6 <item name="isInstallRetention">true</item>
7 <item name="isFingerPrint">true</item>
8 <item name="accessToken"></item>
9</string-array>

추가한 코드 중 serviceNumber의 value를 올바른 값으로 변경해야 합니다. 와이즈트래커에 로그인하여 화면 상단의 Service 부분을 선택하면 앱 이름과 함께 올바른 Service Number 가 나타납니다. Service No. 옆의 숫자를 복사하여 serviceNumber의 value로 입력해주세요.

authKey

2.2 Http 통신 허용 설정

프로젝트의 Target API 28 이상일 경우 Http 통신 허용 추가

Copy
XML
1<!-- AndroidManifest.xml -->
2<application
3 android:icon="@mipmap/ic_launcher"
4 android:label="@string/app_name"
5 android:networkSecurityConfig="@xml/network_security_config"
6 android:theme="@style/AppTheme">
Copy
XML
1<!-- app/res/xml/network_security_config.xml -->
2<?xml version="1.0" encoding="utf-8"?>
3<network-security-config>
4 <domain-config cleartextTrafficPermitted="true">
5 <domain includeSubdomains="true">trk.analytics.wisetracker.co.kr</domain>
6 </domain-config>
7</network-security-config>

2.3 초기화

Application을 상속받는 클래스가 아닌 Activity를 상속받는 기본 화면의 onCreate() 함수에 적용해 주세요

Copy
JAVA
1public class MainActivity extends AppCompatActivity {
2 @Override
3 protected void onCreate(Bundle savedInstanceState) {
4 // SDK 호출
5 DOT.initialization(this);
6 }
7}

2.4 유입 경로 분석

2.4.1 딥링크 분석

딥링크를 통해 앱이 실행되는 경로 분석이 필요한 경우 적용해 주세요.

딥링크 설정

AndroidManifest.xml 파일에서 앱의 환경에 맞춰 딥링크로 오픈되는 Activityandroid:host, android:scheme 값을 변경해 주세요.

Copy
XML
1<!-- 예시는 wisetracker://wisetracker.co.kr 링크로 진입시 딥링크 분석이 가능 -->
2<activity android:name="kr.co.wisetracker.DeepLinkActivity"
3 android:launchMode="singleTop" >
4 <intent-filter>
5 <action android:name="android.intent.action.VIEW" />
6 <category android:name="android.intent.category.DEFAULT" />
7 <category android:name="android.intent.category.BROWSABLE" />
8 <!-- 딥링크로 진입될 스키마와 호스트 정보 입력 -->
9 <data android:host="wisetracker.co.kr"
10 android:scheme="wisetracker" />
11 </intent-filter>
12</activity>

3. iOS 설정

3.1 Framework & Bridge 파일 세팅

3.1.1 node_modules - DotReactNativeBridge - ios 경로에 4개의 Framework파일과 2개의 소스파일을 Xcode 프로젝트 최상단 폴더에 Drag & Drop 방식으로 가져다 놓습니다.

3.1.2 위 작업 중 반드시 Copy items if needed 옵션을 체크합니다.

3.1.3 작업 완료 후 Xcode 프로젝트 폴더에 아래와 같이 설치 되었음을 확인할 수 있습니다.

3.1.4 Targets - General - Frameworks, Libraries, and Embedded Content 메뉴로 이동하여 Embed 옵션을 Embed Without Signing로 세팅합니다.

3.2 info.plist 값 세팅

info.plist 파일을 Open As Source Code 방식으로 오픈한 후, 아래 코드를 추가합니다.

Copy
XML
1<key>dotAuthorizationKey</key>
2<dict>
3 <key>serviceNumber</key>
4 <string>xxxxx</string>
5 <key>expireDate</key>
6 <string>14</string>
7 <key>isDebug</key>
8 <string>true</string>
9 <key>isInstallRetention</key>
10 <string>true</string>
11 <key>isFingerPrint</key>
12 <string>true</string>
13 <key>accessToken</key>
14 <string></string>
15 <key>useMode</key>
16 <string>2</string>
17</dict>

추가한 코드 중 serviceNumber의 value를 올바른 값으로 변경해야 합니다. 와이즈트래커에 로그인하여 화면 상단의 Service 부분을 선택하면 앱 이름과 함께 올바른 Service Number 가 나타납니다. Service No. 옆의 숫자를 복사하여 serviceNumber의 value로 입력해주세요.

authKey

http통신을 허용하기 위해 NSAppTransportSecurity 를 아래와 같이 추가합니다

Copy
XML
1<key>NSAppTransportSecurity</key>
2<dict>
3 <key>NSAllowsArbitraryLoads</key>
4 <true/>
5</dict>

3.3 초기화

AppDelegate의 didFinishLaunchingWithOptions 함수에 SDK를 Initialization하기 위한 코드를 다음과 같이 적용합니다.

Copy
OBJECTIVEC
1- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
2{
3 [DOT initialization:launchOptions application:application];
4 return YES;
5}
Table of Contents

© 2020 Wisetracker 주식회사 와이즈트래커
대표이사: 김선준 | 서울시 강남구 테헤란로 415, 스파크플러스 2층 | 02-6925-6636 | contact@wisetracker.co.kr | 사업자등록번호: 261-81-22632 | 통신판매업신고: 2015-서울강남-02766