> For the complete documentation index, see [llms.txt](https://document.wisetracker.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://document.wisetracker.co.kr/v2-developer/push/undefined/react-native/undefined.md).

# 준비 사항 안내

ReactNative 앱에서 Push 발송을 위한 SDK 설치 및 적용을 설명합니다.

{% hint style="info" %}
SDK 설정에 참고할 수 있는 참고코드를 제공합니다. 

아래의 링크를 클릭하여 SampleReactNative 코드를 다운받을 수 있습니다.

[<mark style="color:blue;">**참고코드 보러가기**</mark>](https://github.com/WisetrackerTechteam/SdkSampleSource.git)**↗️**
{% endhint %}

{% hint style="info" %}
Push SDK 설정을 테스트 한 앱의 정보는 다음과 같습니다.

* react-native: `0.71.1`
* android :&#x20;

  `targetSdkVersion = 31 or 33 ,`

&#x20;     `Test Device = Android 9.0 , Android 12.0 ,Android 13.0`

* iOS :

  `Xcode = 14.2 version ,`

&#x20;     `Deployment Target = 12.4 ,`

&#x20;     `Test Device = 16.3.1 (iPhone 13 mini)`
{% endhint %}

## 플러그인 적용

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

```
npm install --save git+https://github.com/WisetrackerTechteam/RW-react-package.git
```

프로젝트에 플러그인이 정상 다운로드되면 node\_*modules 폴더 아래 플러그인 파일이 추가된 것을 확인할 수 있습니다.*&#x20;

*`(폴더 경로 : [project name] > node_modules > DotReactNativeBridge 폴더 )`*

### (선택) Notification Permission 관리

알림에 대한 권한요청의 시점을 조정하는 부분은 선택사항이며, 이미 앱에 구현되었거나,  Notification Alert 창의 발생 시점에 대한 제어가 불필요하시다면 꼭 추가로 진행하실 필요는 없습니다.&#x20;

만약 추가를 원하신다면 아래에 링크 된 ReactNative Firebase Permission 참조를 추천드립니다.

> ```
> 안드로이드의 경우 
> * Target SDK API 32 이하의 앱, AOS 13에 설치 : 자동으로 알림권한 요청.
> * Target SDK API 32 이상의 앱, AOS 13에 설치 : 권한요청을 원하는 타이밍에 노출 가능.
> * Target SDK API 32 이상의 앱, AOS 12 이하에 설치 : 권한요청 없이 사용가능.
>
> iOS의 경우
> * 사용자의 권한을 요청하는 기본 권한 대화상자가 앱오픈 초기에 생성.
> ```

{% embed url="<https://rnfirebase.io/messaging/usage#ios---requesting-permissions>" %}

### 라이브러리 추가

push 설정에 필요한 firebase Cloud Messaging 라이브러리를 `package.json` 에 추가합니다.

{% tabs %}
{% tab title="package.json" %}

```xml
# Install & setup the app module
yarn add @react-native-firebase/app

# Install the messaging module
yarn add @react-native-firebase/messaging
```

{% endtab %}
{% endtabs %}

### 와이즈트래커 대시보드 계정 준비

다음과 같이 푸시메시지 수신을 위한 적용이 완료되면, 와이즈트래커 대시보드에서 테스트를 진행하실 수 있습니다.

적용 후 바로 테스트까지 진행하실 수 있도록, 고객사 담당자를 통해 대시보드에 로그인할 수 있는 계정을 전달받아 로그인 후 마케팅 메시지 메뉴가 확인이 되는지까지 체크 해 주세요.&#x20;

[<mark style="color:blue;">**와이즈트래커 대시보드 로그인 하기↗️**</mark>](https://analytics.wisetracker.co.kr/)

<figure><img src="https://423922975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_ZKcnBFmefw9Yfed6b-3102695190%2Fuploads%2Fx8kj6Gr6K9ErouIRluY0%2Fimage.png?alt=media&amp;token=787d4810-67d0-491a-8ea0-7f74f0425e25" alt=""><figcaption></figcaption></figure>

그럼 이제 OS 별로 푸시메세지 적용을 위한 단계를 시작해 볼까요? 🏃🏻‍♂️