Tutorials, for Developer Apr 12, 2023

클레이튼에서 TatumSDK 사용하기 (Part 1)

#Blockchain #Klaytn #SDK #Technology #Tutorial

Klaytn을 비롯한 Web3 블록체인의 등장으로 NFT, Defi 및 메타버스 플랫폼 등 기존의 Use Case나 독창적인 프로젝트들이 성공을 거두었습니다. 이와 같은 신기술은 새로운 패러다임을 가져와 개발자들이 탈중앙화된 웹과 앱을 만들수 있게 되었습니다. Web3 기술 통합에 따른 복잡성에 대한 우려 없이 혁신적인 Use Case를 빠르게 만들기 위해서는, 개발자들이 우수한 개발자 Tool을 쉽게 사용할 수 있어야 합니다. 따라서, Tatum과 같은 차별화된 개발자 프레임워크가 필요합니다.

Tatum은 Klaytn을 포함한 멀티 블록체인향 오픈소스 개발 플랫폼으로, 블록체인 인프라, 통합 API 및 SDK를 개발자에게 제공하여 블록체인 앱 구축을 간소화합니다. Tatum 빌트인 기능을 활용하여 사용자들은 노드 설정 또는 유지보수 등 개발 복잡성에 대한 걱정없이 Web3 기술을 프로젝트에 쉽게 통합할 수 있습니다. Tatum에 관한 보다 자세한 정보는 여기에서 확인할 수 있습니다.

보안 메커니즘으로 안전하게 개인키(private keys)를 관리하는데 중점을 둔 Tatum의 블록체인 연계 방법은 세 가지로, 다음과 같습니다.

a)개인키 (private keys) /니모닉 (Mnemonic) 시드를 직접 Tatum API로 전송하기: 운영 환경이 아닌 테스트 환경에서만 수행할 것을 권장합니다.

b) Tatum 라이브러리 사용하기: Javascript 또는 Java 라이브러리를 활용하여 지갑을 만들고 로컬 환경에서 트랜잭션에 서명합니다.

c) Tatum 키 관리 시스템 (KMS) 사용하기: 가장 안전한 개인키 관리 방법인 KMS 사용을 적극적으로 추천합니다. 자세한 정보는 여기를 참고하세요.

본 문서에서 Tatum Javascript Library (tatum-js) 설치 및 사용방법을 안내하고자 하며, 여러분과 함께 살펴볼 내용은 Klaytn 기반의 Tatum 탑재 기능 중 일부입니다.

지갑 생성
다른 지갑으로 KLAY 전송
지갑 잔고 확인
블록체인 정보 확인
Web3-js 연계

요구사항

Node.js 및 npm
API 키 생성을 위한 Tatum 가입

시작하기

Tatum 계정을 생성하면, 테스트넷과 메인넷 각각에 대한 총 2개의 API Key가 포함된 사용자 Tatum 대시보드를 볼 수 있습니다. 각각의 Tatum API Key는 Tatum이 지원하는 블록체인에서 사용 가능합니다. 이번 튜토리얼에서는 테스트넷 API Key를 사용할 예정이며, 운영 환경에서는 메인넷 API를 사용할 수 있습니다.

사용자 Tatum 대시보드 화면은 다음과 같습니다.

설정 환경

프로젝트의 신규 디렉토리를 생성합니다.

mkdir tatum-example

2. 신규 프로젝트 디렉토리를 입력합니다:

cd tatum-example

3. npm를 초기화하고, Tatum 패키지를 설치합니다.

npm init -y
npm install @tatumio/klaytn

4. 루트 폴더에 scripts 신규 폴더를 만들고, `index.js` 파일을 생성하여 해당 코드를 저장합니다.

mkdir scripts
cd scripts
touch index.js

Tatum Javascript Library로 Tatum 빌트인 기능을 사용할 수 있게 됩니다. 사용자는 SDK를 통해 Tatum API와 통신이 가능합니다. 뿐만 아니라, Tatum은 사용자들이 프로젝트에 적용하고 싶은 한 개 이상의 블록체인 패키지를 선택하여 편리하게 별도로 설치할 수 있는 옵션을 제공합니다. 예를 들어, Klaytn 블록체인의 하위 패키지가 포함된 @tatumio/klaytn 패키지를 npm에서 설치할 수 있습니다.

Tatum SDK 초기화하기

Tatum에 탑재된 기능을 프로젝트에서 사용하려면 사용자의 API Key로 SDK를 초기화해야 합니다. API Key가 없다면, 이 곳에서 키를 생성하세요.

코드 에디터에서 `index.js` 파일을 열고, 아래 문구를 입력하여 SDK를 초기화합니다.

import  TatumKlaytnSDK  from '@tatumio/klaytn'
const klaytnSDK = TatumKlaytnSDK( apiKey: ‘’ )

클레이튼에서 Tatum SDK 사용하기

이번 섹션에서는 지갑 생성, 블록체인 데이터 쿼리, 블록체인에 트랜잭션 전송 등 Tatum SDK 기능 일부를 살펴보도록 하겠습니다.

기능에 대한 보다 자세한 정보는 이 곳에서 확인하세요.

1. 지갑 만들기

Tatum SDK를 사용하면, 몇 줄의 코드로 클레이튼에서 지갑, 개인 키 및 입금 주소를 만들 수 있습니다. 이로써 사용자들은 트랜잭션을 시작할 수 있을 뿐만 아니라 토큰을 전송 및 수취할 수 있습니다. 실제 예시를 살펴봅시다.

비고

개인키 사용

테스트 및 데모용으로 블록체인 지갑과 개인키를 아래 코드로 만들었습니다.

하지만 실제 운영 환경에서는 사용자의 개인키과 니모닉이 항상 보안 경계 내에 있어야 합니다. 따라서, 커맨드 라인에서 Tatum CLI를 사용하거나 또는 복합 키 관리 시스템, Tatum KMS을 통해 올바르고 안전하게 지갑을 구성하고 개인키로 관리할 것을 권장합니다.

A). 블록체인 지갑 만들기

아래의 코드 스니핏(snippet)을 `index.js` 파일에 붙여넣어 Klaytn 지갑을 생성하면, 니모닉(mnemonic)과 확장 공개키(extended public key)(xpub) 두 가지 필드가 Response에 포함됩니다.

async function generateWallet() {
const { mnemonic, xpub } = await klaytnSDK.wallet.generateWallet()

    console.log(`Created a wallet with: " ${mnemonic} " and public key:  " ${xpub} ".`)

}

generateWallet()

새로 생성된 지갑을 확인하려면, 아래 명령어를 실행하세요.

node  scripts/index.js

B.) 지갑에서 주소 만들기

주소 만들기는 이전에 만든 xpub를 전달하는 것만큼 간단합니다.

아래 코드를 `index.js`파일에 붙여넣기 하면, 인덱스 번호 1의 주소가 Response에 포함됩니다.

async function generateAddressFromXpub(xpub) {
const klaytnAddress  = await klaytnSDK.wallet.generateAddressFromXPub(xpub, 1)

console.log(`Created a wallet address: " $klaytnAddress " from the given xpub`)

Const xpub = “”

generateAddressFromXpub(xpub)

아래 명령어를 실행하여 새로 생성된 지갑 주소를 확인하세요.

node scripts/ index.js

C.) 지갑에서 개인키 만들기

개인키를 생성하려면, xpub 대신 니모닉만 입력하면 됩니다. 아래 코드를 `index.js` 파일에 붙여넣기 하면, 인덱스 번호 1에 생성된 개인키가 Response에 포함됩니다.

async function generatePrivatekeyFromMnemonics(mnemonics) 
    const klaytnPrivatekey  = await klaytnSDK.wallet.generatePrivateKeyFromMnemonic(mnemonics, 1)
    console.log(`Created a private key: " $klaytnPrivatekey " from the given mnemonic`)


Const mnemonics = “”

generatePrivatekeyFromMnemonics(mnemonics)

아래 명령어를 실행하여 새로 생성된 지갑 주소를 확인하세요.

node scripts/index.js

지갑 생성을 위한 전체 코드

import  TatumKlaytnSDK  from '@tatumio/klaytn'

const klaytnSDK = TatumKlaytnSDK( apiKey: '’ )


async function generateWallet() 
    const  mnemonic, xpub  = await klaytnSDK.wallet.generateWallet()
    console.log(`Created a wallet with: " $mnemonic " and public key:  " $xpub ".`)


async function generateAddressFromXpub(xpub) 
    const klaytnAddress  = await klaytnSDK.wallet.generateAddressFromXPub(xpub, 1)
    console.log(`Created a wallet address: " $klaytnAddress " from the given xpub`)


async function generatePrivatekeyFromMnemonics(mnemonics) 
    const klaytnPrivatekey  = await klaytnSDK.wallet.generatePrivateKeyFromMnemonic(mnemonics, 1)
    console.log(`Created a private key: " $klaytnPrivatekey " from the given mnemonic`)



const xpub= "";
const mnemonic = "";


generateWallet()
generateAddressFromXpub(xpub);
generatePrivatekeyFromMnemonics(mnemonic);

2. 지갑 주소의 잔고 확인하기

블록체인 쿼리로 해당 주소의 잔고를 확인할 수 있습니다.

주소의 잔고를 확인하려면, 해당 주소에 잔액이 있어야 합니다. 여기에서 해당 주소로 테스트넷 코인을 전송해 보세요.

아래 코드 스니핏(snippet)을 붙여넣기 하여 해당 주소의 잔고를 확인합니다. 이번 튜토리얼에서는 앞서 새로 만든 주소의 잔고를 확인해 보겠습니다.

async function checkBalance (address) 
    const  addressBalance  = await klaytnSDK.blockchain.getBlockchainAccountBalance(address)
    console.log(`This address " $address " has a balance of " $addressBalance.balance " `)


const address = "";

checkBalance(address)

아래 명령어를 실행하여 해당 주소의 잔고를 확인하세요.

node scripts/index.js

위 이미지는 해당 주소의 코인 입금 전후의 잔고를 보여줍니다.

3. 블록체인 데이터 쿼리

Tatum으로 블록체인에 관한 정보를 쉽게 확인할 수 있으며, 사용자는 다음 작업을 수행할 수 있습니다.

GetGasInfo
GetTransaction
GetBlock
GetCurrentBlock
GetTransactionCount

먼저, scripts 폴더에 `read.js` 신규 파일을 만들고, 앞서 수행했던 것처럼 Tatum SDK를 초기화 합니다.

이어서, 아래 코드를 `read.js` 파일에 붙여넣기 한 후, 하기의 명령어를 실행하여 각 함수의 결과값을 확인합니다.

node scripts/read.js

GetGasInfo

async function getGasInfo () 
    // Get gasLimit and gasPrice for a transaction
    const gasInfo = await klaytnSDK.blockchain.estimateGas(
        from: '0xfb99f8ae9b70a0c8cd96ae665bbaf85a7e01a2ef',
        to: '0x687422eEA2cB73B5d3e242bA5456b782919AFc85',
        amount: '100000',
      )
      console.log('Gas estimate: ', gasInfo)



getGasInfo()

결과값

GetTransaction

async function getTxInfo () {
// Get transaction details by hash

  const transaction = await klaytnSDK.blockchain.getTransaction(

    '0x9a4c09556204735c2818eaeed9fd0a530dba4f1ad6f771c7451a217ce373268d',

  )

  console.log('Transaction: ', transaction)

}

getTxInfo()

결과값

GetBlock

async function getBlock () 
  // Get block by hash
  const block = await klaytnSDK.blockchain.getBlock(
    '0x9089a6d4d24ddebfec27f9db7527bd6bf2ba0628efa1ea67084d91aeaf43d7b5',
  )
  console.log('Block: ', block)


getBlock()

결과값

GetCurrentBlock

async function getCurrentBlock () 
  // Get curent block
  const currentBlock = await klaytnSDK.blockchain.getCurrentBlock()
  console.log('Current block: ', currentBlock)


getCurrentBlock()

결과값

GetTransactionCount

async function getTransactionsCount () 
      // Get transaction count of an address
    const transactionsCount = await klaytnSDK.blockchain.getTransactionsCount(
        '0x99abc3bbd2f001ce629bc4de078ba8f5e80f4af9',
      )
      console.log('Transactions count: ', transactionsCount)


getTransactionsCount()

결과값

전체 코드

import  TatumKlaytnSDK  from '@tatumio/klaytn'

const klaytnSDK = TatumKlaytnSDK( apiKey: ‘’ )

async function getGasInfo () 
    // Get gasLimit and gasPrice for a transaction
    const gasInfo = await klaytnSDK.blockchain.estimateGas(
        from: '0xfb99f8ae9b70a0c8cd96ae665bbaf85a7e01a2ef',
        to: '0x687422eEA2cB73B5d3e242bA5456b782919AFc85',
        amount: '100000',
      )
      console.log('Gas estimate: ', gasInfo)

async function getTxInfo () 
    // Get transaction details by hash
  const transaction = await klaytnSDK.blockchain.getTransaction(
    '0x9a4c09556204735c2818eaeed9fd0a530dba4f1ad6f771c7451a217ce373268d',
  )
  console.log('Transaction: ', transaction)


async function getBlock () 
  // Get block by hash
  const block = await klaytnSDK.blockchain.getBlock(
    '0x9089a6d4d24ddebfec27f9db7527bd6bf2ba0628efa1ea67084d91aeaf43d7b5',
  )
  console.log('Block: ', block)

async function getCurrentBlock () 
  // Get current block
  const currentBlock = await klaytnSDK.blockchain.getCurrentBlock()
  console.log('Current block: ', currentBlock)

async function getTransactionsCount () 
      // Get transaction count of an address
    const transactionsCount = await klaytnSDK.blockchain.getTransactionsCount(
        '0x99abc3bbd2f001ce629bc4de078ba8f5e80f4af9',
      )
      console.log('Transactions count: ', transactionsCount)



getGasInfo()
getTxInfo()
getBlock()
getCurrentBlock()
getTransactionsCount()

4. 네이티브 트랜잭션 전송하기

타 계좌로 KLAY 전송 등 네이티브 트랜잭션에 서명하려면, 수수료가 차감될 블록체인 주소의 개인키로 서명해야 합니다. 이번 튜토리얼에서는 테스트 용으로 앞서 생성한 개인키를 사용해 보겠습니다.

실제 운영 환경에서는 Tatum 키 관리 시스템 (KMS)에서 제공한 서명 ID로 트랜잭션에 서명하는 것을 적극 권장합니다.

트랜잭션 전송하기를 다음 단계로 진행해 봅시다.

첫째, scripts 폴더에 `sendTx.js` 신규 파일을 만들고, 앞서 수행한 것 처럼 Tatum SDK를 초기화 합니다.

둘째, 아래 코드를 `sendTx.js`파일에 붙여넣기 합니다. 여기서 사용한 Sender의 개인키는 generatePrivatekeyFromMnemonics (니모닉) 함수를 사용하여 앞서 생성한 키입니다.

import  TatumKlaytnSDK  from '@tatumio/klaytn'

const klaytnSDK = TatumKlaytnSDK( apiKey: ‘’ )

async function sendNativeTx () 
  const senderPrivateKey = ''

  const receiverAddress = ''

  // send native transaction using private key
  const txId = await klaytnSDK.transaction.send.transferSignedTransaction(
    to: receiverAddress,
    amount: '0.0001',
    fromPrivateKey: senderPrivateKey,
  )

  console.log(`Transaction using private key was sent txID =`, txId)

  // Note: you can also send native transaction using signatureId
  // signatureId from Tatum KMS - https://docs.tatum.io/private-key-management/tatum-key-management-system-kms



sendNativeTx()

셋째, 아래 명령어를 실행하여 트랜잭션 ID를 확인합니다.

Klaytn Block Explorer (Klaytnscope) 검색 창에 트랜잭션 ID를 붙여넣기하여 해당 트랜잭션을 확인하세요.

5. Tatum으로 Web3-js 사용하기

Tatum으로 사용자는 프로젝트에서 web3-js를 자유롭게 사용할 수 있습니다. 방법은 다음 단계와 같습니다

우선, scripts 폴더에 `web3.js` 신규 파일을 만들고, 앞서 수행했던 것처럼 Tatum SDK를 초기화합니다.

`web3.js`파일은 다음과 같습니다.

import  TatumKlaytnSDK  from '@tatumio/klaytn'

const klaytnSDK = TatumKlaytnSDK( apiKey: '’ )

const web3response = await klaytnSDK.httpDriver(
  jsonrpc: '2.0',
  method: 'web3_clientVersion',
  params: [],
  id: 2,
)

const web3 = klaytnSDK.web3Client()

A.) getBlockNumberWithWeb3

async function getBlockNumberWithWeb3 () 
	// gets the current block number
    const blockNumber = await web3.eth.getBlockNumber()
    console.log(blockNumber);   


getBlockNumberWithWeb3()

아래 명령어를 실행하여 각 함수의 결과값을 확인합니다.

node scripts/web3.js

결과값

B.) getAddressBalanceWithWeb3

async function getBalanceWithWeb3 () 
	// Returns the KLAY balance of address in web
    const myAddress = '' //TODO: replace this address with your own public address
    const receipt = await web3.eth.getBalance(myAddress); 
    console.log(receipt);


getBalanceWithWeb3()

결과값

C.) sendTransactionWithWeb3

async function sendTransactionWithWeb3 () 
	// sends transaction to the Klaytn blockchain
    const privateKey = "";
    const senderAddress = "";
    const receiverAddress = "";

    const tx = await web3.eth.accounts.signTransaction(
        from: senderAddress,
        to: receiverAddress,
        value: 90000000000,
        gasPrice: 250000000000,
        gas: 21000,
    , privateKey)

    const receipt = await web3.eth.sendSignedTransaction(tx.rawTransaction)  
    console.log(receipt);


sendTransactionWithWeb3()

결과값

전체 코드

import  TatumKlaytnSDK  from '@tatumio/klaytn'

const klaytnSDK = TatumKlaytnSDK( apiKey: '’ )

const web3response = await klaytnSDK.httpDriver(
  jsonrpc: '2.0',
  method: 'web3_clientVersion',
  params: [],
  id: 2,
)

const web3 = klaytnSDK.web3Client()

async function getBlockNumberWithWeb3 () 
    const blockNumber = await web3.eth.getBlockNumber()
    console.log(blockNumber);   



async function getBalanceWithWeb3 () 
    const myAddress = '' //TODO: replace this address with your own public address
    const receipt = await web3.eth.getBalance(myAddress); 
    console.log(receipt);


async function sendTransactionWithWeb3 () 
     const privateKey = "";
    const senderAddress = "";
    const receiverAddress = "";

    const tx = await web3.eth.accounts.signTransaction(
        from: senderAddress,
        to: receiverAddress,
        value: 90000000000,
        gasPrice: 250000000000,
        gas: 21000,
    , privateKey)

    const receipt = await web3.eth.sendSignedTransaction(tx.rawTransaction)  
    console.log(receipt);



getBlockNumberWithWeb3();
getBalanceWithWeb3();
sendTransactionWithWeb3();

마치며

개발자가 쉽고 빠르게 Web3를 프로젝트에 통합하려면, Tatum과 같은 툴이 필요합니다. 이번 튜토리얼에서 tatum-js SDK 설치 방법, 기능 소개 및 멀티 블록체인을 위한 오픈소스 개발자 플랫폼인 Tatum을 살펴봤습니다. 또한, 트랜잭션 전송, Klaytn 블록체인에서 데이터 확보, 지갑 주소의 잔고 확인 및 Tatum SDK Web3-js 사용법도 살펴보았습니다. 튜토리얼을 통해 사용자들은 SDK를 사용하여 사전에 구축한 ERC20 / ERC721/ ERC1155 스마트 컨트랙트를 배포하고, 해당 주소와 ABI를 통해 기존 컨트랙트와 통신을 할 수 있습니다.

보다 자세한 정보는 Klaytn Docs와 Tatum을 참고하시기 바라며, 질문이 있으시면 Klaytn Forum에 남겨주세요.

다음 편에서는 Tatum SDK를 활용한 스마트 컨트랙트 배포 및 통신 방법에 대해 다룰 예정이니, 많은 기대 부탁드립니다!

클레이튼에서 TatumSDK 사용하기 (Part 1)

요구사항

시작하기

설정 환경

Tatum SDK 초기화하기

클레이튼에서 Tatum SDK 사용하기

1. 지갑 만들기

A). 블록체인 지갑 만들기

B.) 지갑에서 주소 만들기

C.) 지갑에서 개인키 만들기

2. 지갑 주소의 잔고 확인하기

3. 블록체인 데이터 쿼리

GetGasInfo

결과값

GetTransaction

결과값

GetBlock

결과값

GetCurrentBlock

결과값

GetTransactionCount

결과값

전체 코드

4. 네이티브 트랜잭션 전송하기

5. Tatum으로 Web3-js 사용하기

A.) getBlockNumberWithWeb3

B.) getAddressBalanceWithWeb3

C.) sendTransactionWithWeb3

결과값

전체 코드

마치며

관련 아티클

심리스한 토큰 스왑 (2): Thirdweb과 Next.js를 사용하여 MiniKLAY 스왑 컨트랙트를 위한 미니멀리즘 UI 구축하기

심리스한 토큰 스왑 (1): 스마트 컨트랙트에 KLAYswap V2 통합하기

Klaytnscope에서 Hardhat을 이용하여 컨트랙트 확인하기