create-eth-app으로 탈중앙화 애플리케이션 (dapp) 프론트엔드 개발 시작하기

지난번에는 Solidity의 전반적인 그림 (opens in a new tab)을 살펴보았고, create-eth-app (opens in a new tab)에 대해서도 이미 언급했습니다. 이제 이 앱의 사용법, 통합된 기능, 그리고 이를 확장하는 방법에 대한 추가적인 아이디어를 알아보겠습니다. Sablier (opens in a new tab)의 창립자인 폴 라즈반 버그(Paul Razvan Berg)가 시작한 이 앱은 프론트엔드 개발을 빠르게 시작할 수 있도록 도와주며, 선택할 수 있는 몇 가지 선택적 통합 기능을 제공합니다.

설치

설치하려면 Yarn 0.25 이상(npm install yarn --global)이 필요합니다. 다음 명령어를 실행하기만 하면 됩니다.

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

내부적으로는 create-react-app (opens in a new tab)을 사용합니다. 앱을 보려면 http://localhost:3000/를 엽니다. 프로덕션 환경에 배포할 준비가 되면 yarn build로 축소된 번들을 생성하세요. 이를 호스팅하는 쉬운 방법 중 하나는 Netlify (opens in a new tab)를 사용하는 것입니다. GitHub 리포지토리를 생성하고, Netlify에 추가한 다음, 빌드 명령어를 설정하면 모든 준비가 끝납니다! 앱이 호스팅되어 누구나 사용할 수 있게 됩니다. 게다가 이 모든 과정이 무료입니다.

기능

React 및 create-react-app

먼저 앱의 핵심인 React와 create-react-app에 포함된 모든 추가 기능입니다. 이더리움을 통합하고 싶지 않다면 이것만 사용하는 것도 훌륭한 선택입니다. React (opens in a new tab) 자체는 대화형 UI를 매우 쉽게 구축할 수 있게 해줍니다. Vue (opens in a new tab)만큼 초보자에게 친숙하지는 않을 수 있지만, 여전히 가장 많이 사용되고 더 많은 기능을 갖추고 있으며, 무엇보다도 선택할 수 있는 수천 개의 추가 라이브러리가 있습니다. create-react-app은 React를 매우 쉽게 시작할 수 있도록 해주며 다음을 포함합니다.

• React, JSX, ES6, TypeScript, Flow 구문 지원.
• 객체 전개 연산자(object spread operator)와 같은 ES6 이상의 추가 언어 기능.
• 자동 접두사가 붙는 CSS로, -webkit-이나 다른 접두사가 필요하지 않음.
• 커버리지 보고를 기본적으로 지원하는 빠르고 대화형인 단위 테스트 러너.
• 일반적인 실수에 대해 경고하는 실시간 개발 서버.
• 해시 및 소스 맵을 포함하여 프로덕션용 JS, CSS 및 이미지를 번들링하는 빌드 스크립트.

특히 create-eth-app은 새로운 훅 효과(hooks effects) (opens in a new tab)를 활용합니다. 이는 강력하면서도 매우 작은 이른바 함수형 컴포넌트를 작성하는 방법입니다. create-eth-app에서 이것이 어떻게 사용되는지는 아래의 Apollo 섹션을 참조하세요.

Yarn Workspaces

Yarn Workspaces (opens in a new tab)를 사용하면 여러 패키지를 가질 수 있으면서도 루트 폴더에서 모두 관리하고 yarn install를 사용하여 한 번에 모든 종속성을 설치할 수 있습니다. 이는 스마트 컨트랙트 주소/ABI 관리(어떤 스마트 컨트랙트를 어디에 배포했고 어떻게 통신하는지에 대한 정보)나 그래프 통합과 같은 소규모 추가 패키지에 특히 유용하며, 두 가지 모두 create-eth-app의 일부입니다.

ethers.js

여전히 Web3 (opens in a new tab)가 가장 많이 사용되지만, 작년부터 ethers.js (opens in a new tab)가 대안으로 훨씬 더 많은 주목을 받고 있으며 create-eth-app에 통합되어 있습니다. 이를 그대로 사용하거나, Web3로 변경하거나, 베타 버전 종료가 임박한 ethers.js v5 (opens in a new tab)로 업그레이드하는 것을 고려할 수 있습니다.

The Graph

GraphQL (opens in a new tab)은 Restful API (opens in a new tab)와 비교하여 데이터를 처리하는 대안적인 방법입니다. 특히 탈중앙화된 블록체인 데이터의 경우 Restful API보다 몇 가지 장점이 있습니다. 그 이유에 관심이 있다면 GraphQL이 탈중앙화 웹을 구동할 것이다(GraphQL Will Power the Decentralized Web) (opens in a new tab)를 살펴보세요.

일반적으로는 스마트 컨트랙트에서 직접 데이터를 가져옵니다. 최근 거래 시간을 읽고 싶으신가요? 이더리움 노드에서 탈중앙화 애플리케이션 (dapp)으로 데이터를 가져오는 MyContract.methods.latestTradeTime().call()를 호출하기만 하면 됩니다. 하지만 수백 개의 서로 다른 데이터 포인트가 필요하다면 어떨까요? 그러면 노드에서 수백 번의 데이터를 가져와야 하고, 매번 RTT (opens in a new tab)가 필요하여 탈중앙화 애플리케이션 (dapp)이 느려지고 비효율적이게 됩니다. 한 가지 해결책은 한 번에 여러 데이터를 반환하는 컨트랙트 내부의 페처(fetcher) 호출 함수일 수 있습니다. 하지만 이것이 항상 이상적인 것은 아닙니다.

그리고 과거 데이터에도 관심이 있을 수 있습니다. 마지막 거래 시간뿐만 아니라 본인이 직접 했던 모든 거래의 시간을 알고 싶을 것입니다. create-eth-app 서브그래프 패키지를 사용하고, 문서 (opens in a new tab)를 읽고, 자신의 컨트랙트에 맞게 조정하세요. 인기 있는 스마트 컨트랙트를 찾고 있다면 이미 서브그래프가 있을 수도 있습니다. 서브그래프 탐색기 (opens in a new tab)를 확인해 보세요.

서브그래프가 있으면 탈중앙화 애플리케이션 (dapp)에서 간단한 쿼리 하나만 작성하여 필요한 과거 데이터를 포함한 모든 중요한 블록체인 데이터를 단 한 번의 가져오기로 검색할 수 있습니다.

Apollo

Apollo Boost (opens in a new tab) 통합 덕분에 React 탈중앙화 애플리케이션 (dapp)에 그래프를 쉽게 통합할 수 있습니다. 특히 React 훅과 Apollo (opens in a new tab)를 사용할 때, 데이터를 가져오는 것은 컴포넌트에 단일 GraphQL 쿼리를 작성하는 것만큼 간단합니다.

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

템플릿

게다가 여러 가지 템플릿 중에서 선택할 수 있습니다. 현재까지는 에이브, Compound, 유니스왑 또는 Sablier 통합을 사용할 수 있습니다. 이들은 모두 미리 만들어진 서브그래프 통합과 함께 중요한 서비스 스마트 컨트랙트 주소를 추가합니다. yarn create eth-app my-eth-app --with-template aave와 같이 생성 명령어에 템플릿을 추가하기만 하면 됩니다.

에이브

에이브 (opens in a new tab)는 탈중앙화된 대출 시장입니다. 예금자는 수동적 수입을 얻기 위해 시장에 유동성을 제공하고, 차입자는 담보를 사용하여 대출을 받을 수 있습니다. 에이브의 독특한 기능 중 하나는 단일 트랜잭션 내에 대출금을 상환하기만 하면 담보 없이 돈을 빌릴 수 있는 플래시 론 (opens in a new tab)입니다. 이는 예를 들어 차익 거래 시 추가 현금을 확보하는 데 유용할 수 있습니다.

이자를 얻을 수 있는 거래 토큰을 aTokens라고 합니다.

create-eth-app과 에이브를 통합하기로 선택하면 서브그래프 통합 (opens in a new tab)을 얻게 됩니다. 에이브는 The Graph를 사용하며, 롭스텐 (opens in a new tab) 및 메인넷 (opens in a new tab)에서 원시(raw) (opens in a new tab) 또는 포맷된(formatted) (opens in a new tab) 형태로 바로 사용할 수 있는 여러 서브그래프를 이미 제공합니다.

Compound

Compound (opens in a new tab)는 에이브와 유사합니다. 이 통합에는 이미 새로운 Compound v2 서브그래프 (opens in a new tab)가 포함되어 있습니다. 여기서 이자를 얻는 토큰은 놀랍게도 cTokens라고 불립니다.

유니스왑

유니스왑 (opens in a new tab)은 탈중앙화 거래소(DEX)입니다. 유동성 제공자는 거래의 양측에 필요한 토큰이나 이더를 제공하여 수수료를 얻을 수 있습니다. 널리 사용되고 있으므로 매우 다양한 토큰에 대해 가장 높은 유동성을 자랑합니다. 이를 탈중앙화 애플리케이션 (dapp)에 쉽게 통합하여, 예를 들어 사용자가 ETH를 DAI로 스왑할 수 있도록 할 수 있습니다.

안타깝게도 이 글을 쓰는 시점에서 통합은 유니스왑 v1에 대해서만 지원되며 방금 출시된 v2 (opens in a new tab)는 지원하지 않습니다.

Sablier

Sablier (opens in a new tab)는 사용자가 스트리밍 방식으로 자금을 결제할 수 있게 해줍니다. 단일 급여일 대신, 초기 설정 후 추가적인 관리 없이 지속적으로 돈을 받게 됩니다. 이 통합에는 자체 서브그래프 (opens in a new tab)가 포함되어 있습니다.

다음 단계

create-eth-app에 대한 질문이 있다면 Sablier 커뮤니티 서버 (opens in a new tab)로 이동하여 create-eth-app의 작성자들과 연락할 수 있습니다. 첫 번째 다음 단계로 Material UI (opens in a new tab)와 같은 UI 프레임워크를 통합하고, 실제로 필요한 데이터에 대한 GraphQL 쿼리를 작성하며, 배포를 설정해 볼 수 있습니다.