방문해주셔서 감사합니다.


영상주소: 영상링크
소스코드: 깃헙링크 여기로 가셔서 klaytn-06 폴더 입니다.

수정 사항: 2022-06-11

test.js 에서 nft 가 발행한적이 없는 상태에서 코드를 돌리면
오류가 나는 문제가 있었습니다.

if 를 추가로 넣어서 오류가 안나도록 수정하였습니다.

(기존코드)
ret = await contract.methods.tokenURI(1).call();
console.log("tokenUri", ret);

(수정후)
if(total > 0) // 발행된적이 있으면 확인해본다.
{
  ret = await contract.methods.tokenURI(1).call();
  console.log("tokenUri", ret);
}

영상주소: https://youtu.be/pIVfPlqt5wI
소스코드: https://github.com/GoToTheMetaverse/klay-tutorial-v2
의 klaytn-etc-opensea-ownable 폴더입니다.

KIP17OwnableFlattened.sol 파일이 필요한데요 이곳에 있습니다.
https://github.com/GoToTheMetaverse/klay-tutorial-v2/blob/main/klaytn-06/contracts/KIP17OwnableFlattened.sol

코인리서치 채널을 참고하였습니다.

영상: https://www.youtube.com/watch?v=QHiPn...

코인리서치 소스코드: https://github.com/coinResearch2021/n...

블록체인에 흥미를 가질 수 있게 가위바위보 게임을 만드는 강좌를 만들었습니다.  (만들만들)

블록체인에 흥미를 가지게 하는게 목적이긴한데 재미 있냐고 하면 그건잘 모르겠군요

https://www.youtube.com/watch?v=pF5-foXc_kw&t=1s 

첫번째는 truffle 로 스마트컨트렉트를 올려봅시다.

https://www.youtube.com/watch?v=vrWV66J9B0g&t=2s 

두번째는 vue 와 tailwind 로 웹페이지를 만들는 강좌 입니다.

세번째로는 UI 를 강화 시키는 강좌 입니다.

https://www.youtube.com/watch?v=wXUi4CsAf8E&t=110s 

이후로 실시간 로그를 넣어서 좀더 업그레이드 시켜볼까 생각중입니다.

영상만드는 중에 조코딩님이 먼저 올리셔서 허망하게 날림으로 만들어졌습니다.

뭔가 좀더 업그레이드 해서 쓸모있게 만들어보려구요

웹호스팅으로 replit 을 사용하였고

웹프로그래밍은 vue 를 이용했습니다.

클레이튼은 truffle 개발하였습니다.

https://www.youtube.com/watch?v=RqZ4pUPF3Rc&t=166s 

첫번째 강좌는 truffle 로 스마트컨트렉트를 올리는 강좌입니다.

https://www.youtube.com/watch?v=GF5YL0ycW7c&t=402s 

두번째 강좌는 웹페이를 만들어서 올라간 스메트컨트렉트와 연동하는 작업입니다.

vue 와 tailwind 를 이용했습니다.

이후에는 유니티로 좀더 간지나게 사이트를 만들려고 준비중입니다.

영상을 만들었지만 조코딩님영상이 더 자세하게 설명되어있어

기운이 빠졌지만 완료해보겠습니다.

첫번째영상: 스마트컨트렉트 작업

https://www.youtube.com/watch?v=RqZ4pUPF3Rc&t=166s 

두번째영상 : 웹페이지 만들기

https://www.youtube.com/watch?v=GF5YL0ycW7c&t=402s 

제가 원한 방법은

커멘드에서

npm install caver-js

이렇게 설치하고 코드에서는

import Caver from 'caver-js';

이런식으로 사용하는걸 생각했었는데요
이방식은 제가 예전에쓰던 vue3 preview 에서는 쉽게 동작하더군요 하지만

vue3 / nuxt / svelt 에서는 안되네요
webpack 이 동작해야되는거 같은데 이상하게 안되네요
caver-js 내부에 fs 를 사용하려고 하는데 브라우져 환경이라 이러면 안되는데...

그래도 되는 방식을 찾긴했습니다.

html 코드의 body 밑에

<script 
   type="module"
   src="https://cdnjs.cloudflare.com/ajax/libs/caver-js/1.6.8/caver.min.js"
></script>

넣쿠요 코드에는

const Caver = window.Caver;

이런식으로 사용하면 동작했습니다.
caver-js 버전이 바뀌면 1.6.8 부분을 고쳐야겠지요?
클레이튼에서 공식적으로 운영하는 주소가 아닌문제가 걸리네요

window.ethereum.request({
          method: "wallet_addEthereumChain",
          params: [
            {
              chainId: "0x2019", // 8217
              chainName: "Klaytn Mainnet 8217",
              nativeCurrency: {
                name: "Klaytn",
                symbol: "KLAY",
                decimals: 18,
              },
              rpcUrls: ["https://public-node-api.klaytnapi.com/v1/cypress"],
              blockExplorerUrls: ["https://scope.klaytn.com"],
            },
          ],
        });

이런식으로 요청합니다 해당코드는
클레이튼 메인넷 추가하는 코드입니다.

window.ethereum 앞에 await 같은건 붙이지 마세요
제대로 동작안합니다.
리턴이 promise 이긴한데 이상하게 안되네요

0x02019 는 십진수로 8217 입니다.
클레이튼이 2019 년에 나왔나봅니다. ㅎㅎ

KIP17 클레이튼 NFT 만들기/ NFT 만들기 튜토리얼 / 오픈씨 컬렉션 만들기

1달 정도를 오픈씨에 About 을 어떻게 수정하는지 찾다가
이상한 방법들을 찾았지만 정석은 이 영상인거 같습니다.

Ownable 이라고 컨트렉트 소유주를 표시하는 것을 상속 받게되면
오픈씨에서 컨트렉트 소유주에게 편집기능을 제공해줍니다.

이미 발행한 다음알아서
아마 모두 소각하고 다시 발행해줘야할것 같습니다.