> ## Documentation Index
> Fetch the complete documentation index at: https://daehan-base.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 앱 통합

> RPC API와 Ethers, Wagmi, Viem 등 인기 라이브러리를 사용하여 200ms 트랜잭션 확인을 위한 플래시블록을 앱에 통합하는 방법을 안내합니다.

사용 사례에 맞는 통합 방법을 선택하세요:

| 사용 사례              | 권장 방법                         | 문서                                                                           |
| ------------------ | ----------------------------- | ---------------------------------------------------------------------------- |
| **즉각적인 UX가 필요한 앱** | `pending` 태그가 있는 플래시블록 인식 RPC | [API 참조](/base-chain/api-reference/flashblocks-api/flashblocks-api-overview) |
| **인프라 제공업체**       | 플래시블록 인식 RPC 노드 호스팅           | [플래시블록 활성화](/base-chain/node-operators/run-a-base-node#enable-flashblocks)   |
| **표준 앱**           | 일반 RPC 계속 사용                  | [JSON-RPC API 참조](/base-chain/api-reference/rpc-overview)                    |

<Tip>
  앱은 WebSocket 스트림에 대한 강한 의존성을 피해야 합니다. RPC는 안정적인 동작을 제공하며 플래시블록이 다운되면 일반 블록으로 자동 폴백합니다.
</Tip>

## RPC 엔드포인트

HTTP 및 WebSocket 엔드포인트 URL은 [플래시블록 API 참조](/base-chain/api-reference/flashblocks-api/flashblocks-api-overview)를 참조하세요. 공개 엔드포인트는 속도가 제한됩니다. 프로덕션 사용의 경우 Alchemy, QuickNode 또는 dRPC와 같은 플래시블록 지원 노드 제공업체를 통해 연결하세요.

## 성능 특성

| 지표                | 값       |
| ----------------- | ------- |
| 플래시블록 빌드 시간 (P50) | \~10ms  |
| 사전 확인 지연          | \~200ms |
| 전체 블록 시간          | 2초      |
| 블록당 플래시블록 수       | 10      |
| 리오그 비율            | \< 0.1% |

## 가스 및 트랜잭션 크기

가스 예산은 플래시블록당이 아닌 **누적** 방식입니다. 각 플래시블록은 총 블록 가스의 추가 1/10을 해제합니다:

| 플래시블록 | 누적 사용 가능 가스               |
| ----- | ------------------------- |
| 1     | 블록 한도의 1/10 (\~18.75M 가스) |
| 2     | 블록 한도의 2/10 (\~37.5M 가스)  |
| 3     | 블록 한도의 3/10 (\~56.25M 가스) |
| ...   | ...                       |
| 10    | 전체 블록 한도 (\~187.5M 가스)    |

<Tip>
  **사용되지 않은 가스는 이월됩니다.** 플래시블록 1이 가스의 0.3/10만 사용하면 플래시블록 2는 최대 1.7/10 (누적 2/10 한도에서 이미 사용된 양을 뺀 값)을 사용할 수 있습니다.
</Tip>

**큰 트랜잭션에 대한 영향:**

* 블록 가스의 1/10 (\~18.75M)을 초과하는 트랜잭션은 첫 번째 플래시블록에 들어가지 못할 수 있으며, 충분한 누적 용량이 생길 때까지 기다려야 합니다.
* Base에는 플래시블록 용량과는 별개로 **트랜잭션당 최대 가스 한도**가 있습니다.
* 확인 속도가 중요한 경우, 가장 이른 플래시블록에 포함될 가능성을 높이려면 개별 트랜잭션을 \~18.75M 가스 미만으로 유지하세요.

## 신뢰성 및 폴백

Base는 **\< 0.1% 플래시블록 리오그 비율**을 목표로 합니다. 이는 사전 확인이 스트리밍되었지만 최종 블록에 포함되지 않은 경우를 의미합니다. 이는 드물지만 앱은 이에 대비해야 합니다.

<Warning>
  **폴백 로직을 구현하세요.** 사전 확인을 강한 신호로 취급하되 보장으로 취급하지는 마세요. 중요한 작업의 경우 최종 확정된 블록 데이터로 확인하세요. [base.org/stats](https://base.org/stats)에서 실시간 리오그 지표를 확인하세요.
</Warning>

플래시블록을 사용할 수 없게 되면 시퀀서는 정상적으로 계속 운영되며 확인은 표준 2초 블록으로 폴백됩니다. 두 경우 모두를 우아하게 처리하도록 앱을 구축하세요.

## 라이브러리 예시

다음 라이브러리에서 플래시블록을 사용하려면 플래시블록 인식 RPC 엔드포인트를 사용해야 합니다:

### [Wagmi](https://wagmi.sh)

Wagmi에서 플래시블록을 사용하려면 Wagmi Config에서 `basePreconf` 체인을 사용해야 합니다(`config.ts` 참조).

<CodeGroup>
  ```tsx Example.tsx theme={null}
  import { useSendTransaction, useWaitForTransactionReceipt } from "wagmi";

  function SendTransaction() {
    const { data: hash, sendTransaction } = useSendTransaction();
    const { data: receipt } = useWaitForTransactionReceipt({ hash });

    return (
      <div>
        <button 
          onClick={() => sendTransaction({ 
            to: "0x...", 
            value: parseEther('0.0001'),
          })}
        >
          트랜잭션 전송
        </button>
        {hash && <div>해시: {hash}</div>}
        {receipt && <div>블록 번호에 포함: {receipt.blockNumber}</div>}
      </div>
    )
  }
  ```

  ```tsx App.tsx theme={null}
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
  import { WagmiProvider, useAccount } from 'wagmi'
  import { config } from './config'
  import { Example } from './Example'

  const queryClient = new QueryClient()

  function App() {
    return (
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}> 
          <Example />
        </QueryClientProvider> 
      </WagmiProvider>
    )
  }
  ```

  ```tsx config.ts theme={null}
  import { createConfig, http } from "wagmi";
  import { baseSepoliaPreconf } from "wagmi/chains";
  import { baseAccount } from "wagmi/connectors";

  export const config = createConfig({
    chains: [baseSepoliaPreconf],
    connectors: [baseAccount()],
    transports: {
      [baseSepoliaPreconf.id]: http(),
    },
  });
  ```
</CodeGroup>

### [Viem](https://viem.sh)

```ts theme={null}
import { createWalletClient, http, parseEther, publicActions } from "viem";
import { privateKeyToAccount } from "viem/accounts";
import { baseSepoliaPreconf } from "viem/chains";

// 플래시블록 인식 체인으로 클라이언트 생성.
const account = privateKeyToAccount(`0x${process.env.PRIVATE_KEY}`);
const client = createWalletClient({
  account,
  chain: baseSepoliaPreconf,
  transport: http(),
})
  .extend(publicActions);

const submissionTime = new Date();
console.log(`트랜잭션 제출 시간: ${submissionTime.toISOString()}`);

// 트랜잭션 전송.
const hash = await client.sendTransaction({
  to: "0x...",
  value: parseEther('0.0001'),
});
console.log(`트랜잭션 해시: ${hash}`);

// 트랜잭션이 포함될 때까지 대기.
const receipt = await client.waitForTransactionReceipt({ hash });
const confirmTime = new Date();

console.log(`트랜잭션 포함 시간: ${confirmTime.toISOString()}`);
console.log(`소요 시간: ${confirmTime - submissionTime}ms`);
```

### [Ethers](https://github.com/ethers-io/ethers.js)

```jsx theme={null}
  const providerA = new ethers.JsonRpcProvider(
    "https://sepolia-preconf.base.org"
  );

  const wallet = new ethers.Wallet(process.env.PRIVATE_KEY, providerA);

  try {
    // 간단한 트랜잭션 생성 (임의 주소로 0.001 ETH 전송)
    const tx = {
      to: "<일부 주소>",
      value: ethers.parseEther("0.0000001"),
    };

    // 트랜잭션 제출
    const submissionTime = new Date();
    const transaction = await wallet.sendTransaction(tx);

    console.log(`트랜잭션 제출 시간: ${submissionTime.toISOString()}`);
    console.log(`트랜잭션 해시: ${transaction.hash}`);

    await transaction.wait(0); // 확인 횟수를 0으로 설정해야 합니다

    console.log("트랜잭션 확인됨");
    const confirmationTime = new Date();
    console.log(`트랜잭션 확인 시간: ${confirmationTime.toISOString()}`);
    console.log(`소요 시간: ${confirmationTime - submissionTime}ms`);
  }
```

표준 RPC 엔드포인트보다 확인 시간이 훨씬 낮은 것을 확인할 수 있습니다.

## 지원

플래시블록에 대한 피드백, 지원 또는 질문이 있으시면 [Base Discord](https://base.org/discord)의 `#developer-chat` 채널에서 편하게 문의하세요.