> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adrop.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 시작하기

> React 프로젝트에 Adrop Web SDK를 연동하는 방법을 안내합니다.

## 개요

Adrop Web SDK를 React 프로젝트에 연동하여 배너 광고와 네이티브 광고를 표시할 수 있습니다.

### 지원 광고 포맷

* 배너 광고
* 네이티브 광고 (커스텀 UI 지원)

### 요구 사항

* React 16.8 이상
* Node.js 14 이상

***

## 설치

NPM 또는 Yarn을 사용하여 SDK를 설치합니다.

<CodeGroup>
  ```bash npm theme={null}
  npm install @adrop/ads-web-sdk
  ```

  ```bash yarn theme={null}
  yarn add @adrop/ads-web-sdk
  ```
</CodeGroup>

***

## 초기화

앱의 진입점(`main.tsx` 또는 `index.tsx`)에서 SDK를 초기화합니다. SDK는 싱글톤 패턴으로 동작하므로 한 번만 초기화하면 됩니다.

```tsx title="main.tsx" theme={null}
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Adrop } from '@adrop/ads-web-sdk';
import App from './App';

// 앱 렌더링 전에 SDK 초기화
Adrop.observe({
  appId: 'YOUR_APP_ID',
  debug: import.meta.env.DEV  // 개발 환경에서만 true
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

### 초기화 옵션 (AdropConfig)

<ParamField body="appId" type="string" required>
  애드컨트롤 콘솔에서 발급받은 앱 ID
</ParamField>

<ParamField body="uid" type="string">
  사용자 식별자 (타겟팅에 활용)
</ParamField>

<ParamField body="appKey" type="string">
  API 인증 키 (사용자 속성 업데이트 시 필요)
</ParamField>

<ParamField body="debug" type="boolean" default={false}>
  디버그 로깅 활성화
</ParamField>

<ParamField body="backfillMode" type="'responsive' | 'fixed'" default="responsive">
  매체사 전체 백필 광고 렌더링 모드. 슬롯별 옵션이 우선합니다. 자세한 내용은 [백필 렌더링 모드](/ko/sdk/web/backfill) 가이드를 참고하세요. (SDK 1.2.3+)
</ParamField>

<Warning>
  프로덕션 환경에서는 `debug: false`로 설정하세요.
</Warning>

### 인스턴스 접근

초기화 후 어디서든 `Adrop.instance()`로 SDK에 접근할 수 있습니다.

```tsx theme={null}
import { Adrop } from '@adrop/ads-web-sdk';

function MyComponent() {
  const handleClick = () => {
    const adrop = Adrop.instance();
    // SDK 사용
  };

  return <button onClick={handleClick}>광고 로드</button>;
}
```

### 설정 동적 변경

로그인 후 사용자 ID를 설정하는 등 런타임에 설정을 변경할 수 있습니다.

```tsx theme={null}
Adrop.instance().setConfig({
  uid: 'USER_ID',
  appKey: 'YOUR_APP_KEY'
});
```

<Note>
  타겟팅 광고가 정상 동작하려면 광고 지면 진입 전에 `uid`를 설정하세요.
</Note>

***

## WebView 설정 (백필 광고용)

WebView 환경에서 백필 광고를 표시하려면 네이티브 앱에서 추가 설정이 필요합니다.

<CardGroup cols={2}>
  <Card title="Android 설정" icon="android" href="/ko/sdk/android/webview">
    Android WebView 설정 방법
  </Card>

  <Card title="iOS 설정" icon="apple" href="/ko/sdk/ios/webview">
    iOS WebView 설정 방법
  </Card>
</CardGroup>

***

## 목차

<CardGroup cols={2}>
  <Card title="배너 광고" href="/ko/sdk/web/banner">
    배너 광고 구현하기
  </Card>

  <Card title="네이티브 광고" href="/ko/sdk/web/native">
    네이티브 광고 구현하기
  </Card>

  <Card title="타겟팅 설정" href="/ko/sdk/web/targeting">
    오디언스/문맥 타겟팅
  </Card>

  <Card title="레퍼런스" href="/ko/sdk/web/reference">
    클래스, 인터페이스, 상수
  </Card>

  <Card title="예제" href="/ko/sdk/web/examples">
    React, CDN 예제 코드
  </Card>
</CardGroup>