작성자: Brian Doyle
이번 튜토리얼에서는 프로바이더에 대한 기본적인 소개와 JSON RPC 블록체인 프로바이더, RainbowKit, wagmi, viem 스택을 사용하여 프론트엔드를 블록체인에 연결하는 방법을 안내합니다.
목표:
이 튜토리얼을 마치면 알 수 있는 것
퍼블릭 프로바이더와 벤더 프로바이더, 지갑 프로바이더를 비교하고 구분할 수 있음
여러 사용 사례에 적합한 프로바이더를 선택할 수 있다.
wagmi에서 프로바이더를 설정하고 이를 사용하여 지갑을 연결할 수 있다.
프론트엔드에 노출될 API 키를 보호할 수 있다.
최신 프론트엔드 웹 개발에 친숙할 것. 이번 튜토리얼에서는 Next.js로 구축된 React 프론트엔드를 사용할 예정이며 전문가 수준은 아니어도 기본적인 내용을 잘 알고 있어야 함.
EVM과 스마트 계약 개발에 대한 기본적인 이해를 요구함. 이 튜토리얼은 기본적인 스마트 계약 작성에 대해 익숙하다고 가정하고 진행됨. 처음 시작하시는 분들은 Basecamp 가이드에서 학습할 것을 권장함
*정보글 가독성을 위해 본문에서는 존댓말을 사용합니다.
온체인 앱은 사용자가 스마트 컨트랙트와 상호 작용할 수 있도록 프론트엔드가 필요합니다. 프로바이더는 프론트엔드와 블록체인을 연결하여 데이터를 읽고 트랜잭션을 전송할 수 있게 해줍니다.
블록체인 개발에서 프로바이더는 API를 제공하여 블록체인에 접근할 수 있게 하는 회사나 서비스를 의미합니다. 이는 React Context API를 사용하여 앱에 래핑하는 프로바이더와는 다릅니다.
이 서비스는 개발자가 직접 블록체인 노드를 운영하지 않고도 스마트 계약과 상호 작용할 수 있게 해줍니다. 노드를 운영하는 것은 비용이 많이 들고 복잡한 어려움이 따릅니다. 대부분의 경우, 프로바이더로 시작하여 진행 상황에 따라 자체 노드 운영 또는 고급 아키텍처 솔루션으로 전환할지 그 운영방안을 고민할 것입니다.
많은 튜토리얼과 가이드, 특히 wagmi의 시작 가이드는 퍼블릭 프로바이더를 기본 설정으로 사용하여 초기 설정을 지원합니다. 퍼블릭 프로바이더는 개방적이고, 무허가이며, 무료이기 때문에 초보자들이 쉽게 접근할 수 있습니다. 하지만 이러한 경우 추가로 다른 프로바이더를 설정하지 않는다면, 사용량 제한(rate limiting)에이 발생할 수 있습니다. 퍼블릭 프로바이더의 사용량 제한은 매우 칼같이 지켜지기도 하고, 금새 사용량 제한이 걸릴 수 있습니다.
wagmi에서는 기본 설정에 공공 클라이언트가 자동으로 포함되어 있습니다. 이 클라이언트는 Viem의 체인 정보 디렉터리에 나열된 chain과 rpcUrls를 사용하여 [JSON RPC] 프로바이더를 설정하는 래퍼(wrapper)입니다. Base Sepolia에 대한 데이터를 확인해 보세.
대부분의 체인은 이 정보를 자체 문서에도 언급합니다. 예를 들어, Base와 Optimism의 네트워크 정보 페이지에서 이를 확인할 수 있습니다. 원하는 경우, 이 정보를 사용하여 wagmi에서 jsonRpcProvider를 수동으로 설정할 수 있습니다.
Coinbase Wallet과 MetaMask을 포함한 여러 지갑 EIP-1193에서 정의한 대로 브라우저에 Ethereum 프로바이더를 제공(inject)합니다. 제공된 프로바이더는 window.ethereum을 통해 접근할 수 있습니다. 또한 내부적으로는 JSON RPC 프로바이더와 동일합니다. 퍼블릭 프로바이더와 유사하게, 이들도 사용량 제한이 있습니다.
초기 라이브러리에 대한 오래된 튜토리얼들은 이 방법을 사용하여 시작하는 것을 권장했지만, 이 방법은 이제 인기가 줄어들었고, 초기 연결 실험을 위해서는 퍼블릭 프로바이더를 사용하는 것이 좋습니다.
점점 더 많은 벤더들이 서비스로서 블록체인 노드에 대한 접근을 제공합니다. QuickNode, Alchemy, Coinbase Developer Platform (CDP)의 랜딩 페이지를 방문하면 다양한 서비스, SDK 및 정보를 제공하는 것을 볼 수 있습니다.
다행히도 스마트 계약과 연결된 프론트엔드를 설정하는 것만 목적이라면 대부분의 정보를 습득하지 않아도 됩니다. 다시 말해, 계정을 등록하고, 엔드포인트나 필요한 키를 받아 앱을 프로바이더에 연결하기만 하면 됩니다.
하지만 이 프로바이더들이 서비스에 대해 어떻게 요금을 부과하는지 더 잘 이해하는 것은 필요합니다.
비용 정보 다음 표는 Alchemy, QuickNode, CDP의 주요 API 메소드 비용을 요약한 것입니다. 이 정보는 네트워크에 따라 다를 수 있으므로 최신 정보를 확인 할 것을 권장합니다.
이용량 예시 wagmi의 useContractRead 훅을 단일 뷰에 TanStack 쿼리와 함께 사용하여 4초마다 eth_blocknumber and eth_call을 각각 한 번 호출합니다.
*주의: 새로 시작하는 온체인 개발자들이 블록체인에 앱을 연결하는 데 무료 옵션이 있다고 생각하는 경우, 실제로는 그렇지 않다는 것을 주의해야 함. 블록체인 데이터는 1과 0으로 구성되어 있으며, 이를 컴퓨터로 계산하고 인터넷을 통해 서버에서 제공하는 과정이 필요함.
이 작업을 수행하는 데는 비용이 들기 때문에 결국에는 서비스를 사용하기 위해 비용을 지불해야 한다는 뜻.
즉, 무료로 블록체인 데이터를 제공받는 것은 거의 불가능하며, 어느 시점에서는 반드시 유료 서비스를 사용해야 한다는 것을 의미함.
원문 확인하기