NFT 블록체인 마켓 앱 만들기 🔥 Klaytn 개발환경 세팅

이번 프로젝트 BApp 개발을 위한 클레이튼 네트워크 개발환경은 아래와 같다.

 

Klaytn 네트워크

- Baobab 테스트넷

- Cypress 메인넷

 

스마트 컨트랙트 개발

- Klaytn IDE - Klaytn 스마트 컨트랙트를 위한 브라우저 기반 컴파일러 및 IDE

 

Klaytn SDK

- caver-js : A JavaScript library that implements the Klaytn JSON-RPC APIs.

 

Klaytn 툴킷

- Klaytnscope - 블록 및 트랜잭션 탐색기

- Klaytn Wallet - 브라우저 기반 계정 관리 도구

 

API

- KAS API : Klaytn을 API로 사용할 수 있는 서비스

- Klip API : 개인 디지털 지갑 서비스 API

 

 

---

 

Klaytn Wallet

• Klaytn Wallet은 브라우저를 통해 Klaytn 네트워크와 연결되어 Klaytn 계정 관리를 돕는 도구이다.
• Klaytn Wallet은 블록체인 어플리케이션 (BApp) 개발을 지원하기 위해 만들어졌으며, 일반 사용자를 위한 서비스를 목표로 출시 되지는 않았다. 따라서 개발과 테스트 목적으로만 사용해야한다.

 

 

새로운 Account 를 생성하는 가이드는 공식문서에 잘 나와있으니까 보고 따라 하면 된다. (가이드 링크)

안전한 곳에 생성된 address, 비밀번호, keystore file, private key와 klaytn wallet key를 보관하고 개발에 사용하면 된다.

 

Klaytn의 계정(account)은 개인의 잔액이나 스마트 컨트랙트에 관한 정보를 포함하는 데이터 구조이며, 두 가지 유형의 계정이 있다.

 

- 외부 소유 계정 (EOAs)

외부 소유 계정 (EOAs)에는 논스(nonce) 및 잔고와 같은 정보가 있지만, 코드 또는 스토리지가 없다. EOA는 개인키로 제어되며 관련 코드를 가지지 않는다.

 

- 스마트 컨트랙트 계정(SCAs)

EOA와 달리 스마트 컨트랙트 계정(SCAs)에는 관련 코드가 있으며 해당 코드로 제어된다. SCA는 스마트 컨트랙트 배포(deployment) 트랜잭션에 의해 생성됩니다. 일단 배포되면 SCA는 자체적으로 새 트랜잭션을 시작할 수 없으며, EOA 또는 다른 SCA나 다른 계정에 의해 작동되어야한다.

 

 

Klaytn IDE

Klaytn IDE는 솔리디티 언어로 Klaytn 스마트 컨트랙트를 개발하도록 도와주는 브라우저 기반의 컴파일러 및 IDE이다. 또한 Klaytn IDE는 스마트 컨트랙트의 테스트 및 배포를 지원한다.

 

 

사용 방법은 역시나 공식문서를 참고하면 될 것 같다. 다만 버전이 업그레이드된 건지 조금 변경돼서 가이드와 실제 화면 레이아웃이 다를 수 있는 데 따라 하는데 큰 문제없을 것 같다.

 

 

IDE로 개발 시 유의할 점은 3가지 정도가 있는데, COMPILER, EVM VERSION, ABI를 잘 체크해야 한다.

우선 스마트 컨트랙트 개발 시 pragma 키워드를 통해서 솔리디티 언어 버전을 명시해주고, 그에 맞는 COMPILER를 선택한다.

그리고 바오밥 네트워크에 배포할 거라면 EVM VERSION을 바오밥으로 선택해준다.

ctrl+s 또는 컴파일 버튼을 눌러서 컴파일을 진행할 수 있는데 Auto compile을 체크하면 자동으로 컴파일을 할 수도 있다.

마지막으로 컴파일을 하고 나면 ABI파일이 생기는데 이 ABI파일 사용해서 스마트 컨트랙트와 상호작용 할 수 있다.

ABI는 Application Binary Interface인데 일종의 사용 설명서와 같은 것이다. 스마트 컨트랙트 코드를 컴퓨터가 이해 가능한 16진수로 변환해주고, 개발자들은 ABI 파일을 가지고 BApp 개발을 진행한다.

 

Klaytnscope

Klaytnscope는 Klaytn 네트워크의 블록 탐색기이다. Klaytnscope는 네트워크 상태를 모니터링하고 다양한 통계를 제공하여 Klaytn 네트워크에 대해 이해할 수 있게 도와준다. 또한 블록 및 트랜잭션 데이터와 Klaytn 네트워크의 스마트 컨트랙트 리스트도 탐색할 수 있다.

우리가 IDE로 개발하면서 배포한 컨트랙트 주소를 Klaytnscope에서 검색해보면 발생시켰던 트랜잭션을 모두 확인할 수 있다.

 

 

caver-js

caver-js는 개발자가 HTTP 또는 웹소켓 연결을 사용하여 Klaytn 노드와 상호작용할 수 있도록 하는 자바스크립트 API 라이브러리이다.

//caver-js 1.5.0 이상 버전
import Caver from 'caver-js';

//엔드포인트 노드 연결
const caver = new Caver('https://api.baobab.klaytn.net:8651');
//상호작용할 스마트컨트랙트 객체 생성
const contract = new caver.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS);

caver-js를 설치하고 클레이튼 엔드포인트 노드에 연결할 수 있다.

현재 위 코드에 작성되어있는 엔드포인트 노드는 클레이튼에서 제공해주는 테스트넷 전용 퍼블릭 노드이다.

예전에는 메인넷도 퍼블릭 노드를 제공했지만 현재는 제공하고 있지 않다고 한다. 따라서 메인넷인 사이프레스에 연결하려면 직접 엔드포인트 노드를 운영하거나 KAS API를 사용하거나 Kaikas 지갑과 같은 blockchain wallet을 연동하여 스마트 컨트랙트와 상호작용할 수 있다.

 

caver.contract 객체는 Klaytn 블록체인과 스마트 컨트랙트 간의 상호작용을 쉽게 만들어 준다. 새 컨트랙트 객체를 생성할 때 해당 스마트 컨트랙트를 위해 JSON 인터페이스를 제공해야 하는데, 이때 caver-js가 컨트랙트 객체와의 모든 호출을 RPC를 통해 하위 수준의 ABI 호출로 자동 변환시켜준다. 이를 통해 스마트 컨트랙트가 마치 자바스크립트 객체인 것처럼 스마트 컨트랙트와 상호작용할 수 있다. 

 

KAS (Klaytn API Service) API

import Caver from "caver-js";
import MARKET_ABI from "../abi/market.json";
import NFT_ABI from "../abi/nft.json";

import { NFT_CONTRACT_ADDRESS, MARKET_CONTRACT_ADDRESS, CHAIN_ID, ACCESS_KEY_ID, SECRET_ACCESS_KEY } from "../constants";

// KAS API 호출 시 필요한 헤더
const option = {
  headers: [
    {
      name: "Authorization",
      value: "Basic " + Buffer.from(ACCESS_KEY_ID + ":" + SECRET_ACCESS_KEY).toString("base64"),
    },
    { name: "x-chain-id", value: CHAIN_ID },
  ],
};
// KAS API 사용을 위한 객체 생성
const caver = new Caver(new Caver.providers.HttpProvider("https://node-api.klaytnapi.com/v1/klaytn", option));
// 참조 ABI와 스마트컨트랙트 주소를 통해 스마트컨트랙트 연동
const NFTcontract = new caver.contract(NFT_ABI, NFT_CONTRACT_ADDRESS);
const MarketContract = new caver.contract(MARKET_ABI, MARKET_CONTRACT_ADDRESS);

 

위에서 언급했듯이 엔드포인트 노드에 연결할 때 KAS API를 사용할 수도 있다.

Klaytn API Service (KAS)는 블록체인 플랫폼인 Klaytn을 API로 사용할 수 있는 서비스이다. KAS를 사용하면 노드를 설치, 운영하거나 계정 키를 관리할 필요가 없이 트랜잭션 전송과 관련된 모든 작업을 REST API 혹은 SDK로 실행할 수 있다.

이를 사용하기 위해서는 KAS 회원 가입을 진행하고 계정을 생성하면 된다.

계정 생성 시에 나오는 KAS API 인증 키(access key id, secret access key)를 안전한 곳에 잘 보관하고 API 호출 시 헤더에 넣어준다.

자세한 사용 방법은 API 레퍼런스에서 보면 좋을 것 같다.

 

Klip API

BApp 서비스를 유저가 쉽게 이용하게 하려면 개인키를 사용하는 과정을 단순히 하는게 좋다. 그것을 도와주는 것이 Klip API 이다.

Klip은 사용자의 디지털 자산을 쉽고 편리하게 관리해 주는 개인 디지털 지갑 서비스이다. Klip은 카카오톡에 연동되어 메신저만큼 쉬운 사용자 경험을 제공한다. Klip API는 외부 서비스에서 API를 통해 Klip에 있는 KLAY 및 대체 가능한 토큰(FT)을 전송하거나 Klip에서 NFT를 발행, 조회, 전송 또는 삭제하는 기능을 제공한다.

 

 

App2App API는 기본적으로 인증을 필요로 하지 않는다. 하지만 BApp 별로 요청을 구분하기 위해서 request key를 발급하여 API 요청 시 사용한다. App2App API를 사용하는 단계는 Prepare, Request, Result 3단계로 구분된다.

1. PREPARE : BApp에서 어떤 작업을 실행하고 싶은지 정의 후 Request Key 발급
2. REQUEST : Request Key를 사용해서 Deep Link를 통해 위 단계에서 정의한 작업을 실행
3. RESULT : 실행 결과 확인

import axios from "axios";

const A2P_API_PREPARE_URL = "https://a2a-api.klipwallet.com/v2/a2a/prepare";

//App2App API 사용하기 위한 url 가져오기
const getKlipAccessUrl = (method, request_key) => {
  //PC웹에서 요청하는 경우
  if (method === "QR") {
    return `https://klipwallet.com/?target=/a2a?request_key=${request_key}`;
  }
  //모바일웹에서 요청하는 경우
  return `kakaotalk://klipwallet/open?url=https://klipwallet.com/?target=/a2a?request_key=${request_key}`;
};

//QR code 또는 Deep Link 활용해서 Klip 주소값 가져오기
const getAddress = (setQrvalue, callback) => {
  axios
    .post(A2P_API_PREPARE_URL, {
      bapp: {
        name: APP_NAME,
      },
      type: "auth",
    })
    .then((response) => {
      const { request_key } = response.data;
      if (isMobile) {
        window.location.href = getKlipAccessUrl("deeplink", request_key);
      } else {
        setQrvalue(getKlipAccessUrl("QR", request_key));
      }
      
      let timerId = setInterval(() => {
        axios
          .get(
            `https://a2a-api.klipwallet.com/v2/a2a/result?request_key=${request_key}`
          )
          .then((res) => {
            if (res.data.result) {
              console.log(`[Result] ${JSON.stringify(res.data.result)}`);
              callback(res.data.result.klaytn_address);
              clearInterval(timerId);
              setQrvalue("DEFAULT");
            }
          });
      }, 1000);
    });
};

 

 

 

참고 자료

https://ko.docs.klaytn.com/dapp/developer-tools/klaytn-wallet

https://ko.docs.klaytn.com/smart-contract/ide-and-tools/klaytn-ide

https://docs.klaytnapi.com/

https://docs.klipwallet.com/

 

 

 NFT 블록체인 마켓 앱 만들기 with 그라운드X 시리즈 

1. 블록체인이란?

2. 클레이튼이란?

3. NFT란?

4. Smat Contract & Solidity

5. Klaytn 개발환경 세팅

6. BApp 설계

7. BApp 기능 구현