4주차의 막이 내렸다. 하지만 이번 4주차부터는 강의가 주어지고 6주차까지 프로젝트를 개발하는 것이다.
덕분에 놀수 쉴수 있는 기간이 되었다.
따라서 복습할수 있는 시간을 가져보았다.
2주차 : 스마트 컨트랙트와 솔리디티
위크 복습
3-5
클래이튼 월렛을 만들어 어카운트 생성 및 테스트넷에서 faucet
Klaytn IDE에서 컨트랙트 배포
배포한 컨트랙트 접근하여 call 또는 값바꾸기
가스비 = 가스 * 가스price
Uint256, string, …
Mapping (uint256 => string) public TokenURIs;
Useage: [TokenURIs[uint256] = string;]
Private, public, …
Function name() public view returns (uint256) {
require(owner == msg.sender, ‘[NOT Owner]’);
Return 10;
}
Constructor () public {
Owner = msg.sender;
}3-6
NFT : 대체 불가능한 특정 암호 디지털 자산 ,, [소유자]와 [URI]
1. 발행(일련번호, 글자, 소유자)
2. 전송(누가, 누구에게, 무엇을)
3-7 자작 토큰 컨트랙트
// string symbol(단위)
// mapping (uint256 => address/string) public tokenOwner/tokenURIs
// mint(발행) (tokenId, URI, Owner)
// transferFrom(form, to, tokenId) from->to
…
Mapping 참조:
길이 : name[인자].length;
추가 : name[인자].push(인자);
참조 : name[인자][i];
3-8 컨트랙트 연동
두 컨트랙트를 연결할때:
1. 그 컨트랙트의 주소를 알아야함
2. 그 컨트랙트의 함수를 알아야함
Contract_name(Contract_address).ContractFunction(인자, 인자, …);
3-9 KIP-17
KIP-17토큰 기능들
3-10 마켓
Function buyNFT(uint, address) public payable returns (bool) {
address payable receiver = address(uint256(seller[tokenId]));
recerver.transfer(10 16); // 0.01klay
NFTcontract(address).safeTransferFrom(address, msg.sender, tokenId);
Return true;
}
Mapping(uint256=>address) public seller;
Function 판매자기록 (address, forom, tokenId, data) {
seller[tokenId] = from;
return bytes4(keccak256(“onKIP17Received(address,address,uint256,bytes)”));
}
NFTcontract safeTransferFrom에서
판매자 기록 컨트랙트 실행;
(Success, returndata) = to.call(
Abi.encodeWithSelector(
판매자기록, // 컨트랙트
msg.sender,
From,
TokenId,
_data // 인자 넣어주기
)
)즉, NFT컨트랙트에서 토큰을 마켓에 보내면 위 함수가 실행되어 자동으로 마켓에 셀러가 기록된다.
KIP-17 burnable같은 함수들 제거
3주차 : BAPP개발
4-1 BAPP(블록체인 앱) 로그인
개인키 사용이 쉽지않음 -> klip API를 이용하여 로그인을 간편하게
4-2 개발의 꽃, 환경 설정
node설치했다면 npx create-react-app klay-market
happy hacking이 뜬다면 성공!
아래 문구대로 cd klay-market 후 yarn start를 하면 새창(localhost:3000)에 react 프로잭트가 시작된다.
app.js가 수정됨에 따라 프로잭트도 수정된다.
VSCODE 터미널 창에
npm install axios 또는 yarn add axios
caver를 깔기위해 node -v 해서 버전이 12이상인지 확인 (nvm use 12)
npm install caver-js
qr코드 사용을 위해
npm install qrcode.react
이렇게 라이브러리 설치 완료.
Klaytn AIP에 로그인후 security 탭의 credential에 AccessKey 생성 및 저장. 보여주면 안된다!
4-3~ caver.js
klaytn docs, Bapp개발자, klaytn SDK, caver.js에 들어가면 여러가지 기능을 살펴볼 수 있다.
해볼것:
1. 스마트 컨트랙트 주소 가져오기
2. caver.js 이용해서 스마트 컨트랙트 연동하기
3. 가져온 스마트 컨트랙트 데이터 읽기(웹에 표현)
-
usestate
js에서 가장 많이 쓰이는 기능이라고 한다.
import React, {useState} from "react";
구문:const [balance, setBalance] = useState(인자);
호출: setBalance가 이름, 아마 balance값을 setBalance의 값으로 바꾸어주는 함수인것같다. -
컨트랙트 읽기
const option = {
headers: [
{
name: "Authorization",
value: "Basic " + Buffer.from(ACCESS_KEY_ID + ":" + SECRET_ACCESS_KEY).toString("base64")
},
{name: "x-chain-id", value: CHAIN_ID} //main net, test net
]
}
const caver = new Caver(new Caver.providers.HttpProvider("https://node-api.klaytnapi.com/v1/klaytn", option));
const 컨트랙트이름 = new caver.contract(ABI, Address);****READ****
const f_name = async () => { // async랑 await랑 친구인듯, 콜백일때 쓰는듯(?)
const name2 = await 컨트랙트이름.methods.함수이름().call();
console.log(name2);
}****WRITE***
const f_name = async (input) => {
const deployer = caver.wallet.keyring.createFromPrivateKey(개인키); // 키링 생성 // !!!!개인키를 적는것은 너무나 위험하다!!!! -> klaytn API를 이용해서 klip에 쉽게 연동하자~
caver.wallet.add(deployer); // 키링 추가
const receipt = await 컨트랙트이름.metohds.함수이름(input).send({
from: deployer.address,
gas: "뭐 아무숫자나"
})
console.log(receipt);
} //그리고 function App에 버튼을 추가하여 실행
<button title={올려놓으면 뜨는 문구} onClick={()=>{f_name(input)}}> 글귀 </button>
버튼을 이용하여 함수 실행하기
function onPressButton(인자) { ////// 1. 함수로 쓰기
console.log('hi-1');
}
const onPressButton = (인자, State함수) => { ////// 2. 변수를 함수처럼
console.log('hi-2');
};
function App() {
const [balance, State함수] = useState('0');
const onPressButton = (인자, State함수) => { ////// 3. 변수를 함수처럼 // ,로 함수도 넘겨줄수 있다!
console.log('hi-3');
//
State함수(인자);
};
return (
<div className="App">
<header className="Appheader">...
<button onclick={()=>{onPressButton(인자)}}> HI </button> // 버튼 활성화
<p>
{balance} // balance값 읽어오기~
</p>
...
)
}이렇게 큐알코드를 써보자
const getAddress = (setQrvalue, callback) => {
axios.post(
A2P_API_PREPARE_URL,{
bapp: {
name: 'KLAY_MARKET'
},
type: "auth"
}
).then((response) => {
const { request_key } = response.data;
const qrcode = `https://klipwallet.com/?target=/a2a?request_key=${request_key}`;
setQrvalue(qrcode); // 여기서 받은 주소를 큐알코드에 넣는다.
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(`[Address Result] ${JSON.stringify(res.data.result)}`); // {[Result] [object Obfect] 과 같이 나올때 JSON.stringify()로 풀어준다.
callback(res.data.result.klaytn_address);
clearInterval(timerId);
}
})
}, 1000)
})
};
.
.
.
const onClickGetAddress = () => {
getAddress(setQrvalue);
};
function App() {
const [qrvalue, setQrvalue] = useState("DEFAULT");
...
<QrCode value={"DEFAULT"} />
}