vue 에서 쓸때는 자동이라 상관이 없었는데

티스토리 블로그를 꾸밀때는 미리 컴파일된 css 가 필요하군요

이 영상을 보고 따라해볼 생각입니다.

영상: https://www.youtube.com/watch?v=JZPjhB-btBQ 

잘되야 할텐데

영상: https://www.youtube.com/watch?v=IeXZo-JXJjc 

c# 만큼이나 명확해서 좋다고 하던데 쓰는동안 제대로 못쓰고 있었군요

이 강좌를 보고 여러가지를 제한해 봤더니 꽤 안심이 되었습니다.

js 는 정말 아무거나 넣을 수 있어서 빠르게 코깅이 가능하긴한데

프로젝트가 커지다보면 이상한 값이 들어가면 왜 들어갔는지 찾기가 너무 힘들었는데 이부분은 좋았습니다.

keyof

let 변수 = keyof  인터페이스명 

인터페이스의 키값이 아닌건 사용할 수 없게됩니다.

키명으로 접근할때 엉뚱한 키로 접근하는걸 막을 수 있겠군요

Partial<>

let 변수 : Partial<인터베이스명> = { ~~ }

인터베이스의 모든값을 체울 필요가 없어집니다.

빠르게 변수 만들고 싶은데 필수요소가 없다고 에러나는걸 피할 수 있습니다.

(이러면 제한하는게 아니구나)

Required<>

이번엔 Partial 과 반대로 모든 변수명을 채워야 변수를 생성할 수 있습니다.

변수 추가되면 난리나도록 제한 하는 용도입니다.

(이걸 원했습니다.)

Readonly<>

변수 만들고난뒤 맴버변수를 고칠 수 없게됩니다.

let a : Readonly<User> = { name:"a"};

a.name = "b"; <-- 불가

Record<키, 변수>

키와 변수명을 자유롭게 쓸 수 없게 제한합니다.

정해진것 만 쓸 수있게 제한 합니다.

Pick<인터베이스명, 키값>

인터페이스 중에 원하는 키만  입력받아 객체를 만듭니다.

Partial 보다는 조건이 조금 더 있군요

Omit<인터페이스명, 키값>

Pick 랑은 반대입니다. 키값에 있는건 안쓰도록 제한합니다.

Nonnullable<타입>

undefined, null, void 가 들어갈 수 없게 만들어줍니다.

이런거 제한하면 함수리턴값 많이 고쳐야하던데 ...

시간은 다 돈이죠 적당히 제한해봅니다.

화이트리스트 구현 #1 : https://serverdown.tistory.com/537

영상링크: https://youtu.be/jEpKPYbctlg

mapping 과 배열을 이용한 자료구조를 설명하려고 예를 든것일뿐
이렇게 복잡하게 구현할 필요는 굳이 없을것 같습니다.

소스코드 입니다.

// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.7.0 <0.9.0;

contract Storage {

    uint public count = 0;

    mapping(address => uint) private map_addr;
    address[] list_addr;
    bool use_whitelist = true;

    constructor() {
        address a = 0x1e0A33d97f7793035704F5B0d896c631fb47BbE4;
        // map_addr[a] = 1;
        add_whitelist(a);
    }

    function is_whitelist(address addr) public view returns(uint) {
        return map_addr[addr];
    }

    function get_whitelist_by_no(uint no) public view returns(address) {
        return list_addr[no-1];
    }

    function get_whitelist_by_addr(address a) public view returns(uint) {
        return map_addr[a];
    }
    
    function is_whitelist_2() public view returns(uint) {
        return map_addr[msg.sender];
    }

    function add_whitelist(address a) public {
        require(map_addr[a] == 0);

        list_addr.push(a);
        uint no = list_addr.length;
        map_addr[a] = no;
    }
    
    function del_whitelist(address a) public {
        require(map_addr[a] != 0);

        uint no = map_addr[a];
        uint index = no - 1;
        uint last_no = list_addr.length;
        uint last_index = last_no - 1;
        address last_a = list_addr[last_index];
        list_addr[index] = last_a;
        list_addr.pop();

        delete map_addr[a];
        // map_addr[a] = 0;
        if(index == last_index) {
            return;
        }
        
        map_addr[last_a] = no;
    }

    function set_use_whitelist(bool b) public {
        use_whitelist = b;
    }
    
    function mint_a() public {
        if(use_whitelist) {
            require(is_whitelist_2() != 0);
        }

        count++;
        // _mint(no, link);
    }
}

화이트리스트를 추가 / 삭제할때마다 이벤트를 남기면 스마트컨트랙트를 굳지 조회할 필요없이
이벤트로그를 모아 보면 현재 화이트리스트에 무엇이 저장되어있는지 알 수 있습니다.
이벤트 구현은 이 부분을 참고해주세요 

이벤트 구현 참고자료: https://serverdown.tistory.com/498

영상링크: https://www.youtube.com/watch?v=cWM3704pUns

mapping 을 사용했습니다.

단순한 형태로 작성한거구요

솔리디티 코드:

// SPDX-License-Identifier: GPL-3.0
// 0x281725fc1AD9AEDeFb8ADb1f4572E97CA918ED00

pragma solidity >=0.7.0 <0.9.0;

contract Storage {

    mapping(address => uint) private map_addr;
    bool use_whitelist = true;
    uint count = 0;
    
    constructor() {
        address a = 0x1e0A33d97f7793035704F5B0d896c631fb47BbE4;
        add_whitelist(a);
    }

    function is_whitelist(address addr) public view returns(uint) {
        return map_addr[addr];
    }

    function is_whitelist_2() public view returns(uint) {
        return map_addr[msg.sender];
    }

    function add_whitelist(address a) public {
        require(map_addr[a] == 0);

        map_addr[a] = 1;
    }
    
    function del_whitelist(address a) public {
        require(map_addr[a] != 0);

        // map_data[a] = 0;
        delete map_addr[a];
    }

    function set_use_whitelist(bool b) public {
        use_whitelist = b;
    }
    
    function mint_a() public {
        if(use_whitelist) {
            require(is_whitelist_2() != 0);
        }

        count++;
        // _mint(no, link);
    }
}

영상주소: (준비중)
소스주소: https://github.com/GoToTheMetaverse/klay-tutorial-v2/tree/main 의 klaytn-etc-create-wallet 폴더 입니다.

코드:

const Caver = require("caver-js");
const caver = new Caver("");

const acc = caver.klay.accounts.create("aaaa@gmail.com");
console.log("addr", acc.address);
console.log("pkey", acc.privateKey);

caver 가 필요하니 

npm install caver-js 

추가로 비밀키로 지갑 주소를 뽑는 방법도 있습니다.

다음의 모듈이 필요합니다.
ethereum-private-key-to-address

설치해야하니 명령어를 입력해주세요.
npm install ethereum-private-key-to-address

const privateKeyToAddress = require("ethereum-private-key-to-address");
// pkey 는 비밀키입니다. 0x로 시작하는 문자열
const addr = privateKeyToAddress(pkey); 
console.log("addr", addr);

Math.random() 으로 64 글자를 조합하는 방법은 암호학적 안전하지 않다고 합니다.

링크1: https://yceffort.kr/2021/09/javascript-random-number 에서 "암호학" 으로 검색해보시면 내용을 찾으실 수 있습니다.
링크2: https://cwe.mitre.org/data/definitions/338.html

간단하게 만들수 있어서 예제에는 넣긴했어요

영상주소: https://www.youtube.com/watch?v=1Y73hFhND9w 
소스주소: https://github.com/GoToTheMetaverse/klay-tutorial-v2/tree/main 의 klaytn-01 폴더 입니다.

node v14 와 node v16 설명이 있습니다.

truffle 을 이용하는 방식은 클레이튼 업그레이드 시 버전이 바뀌는 경우가 있어서 
초보자분들이 사용하기 너무 어려울것 같습니다.

웹개발과 연동해서 개발하려면 truffle 이 편한점이 있긴합니다.
이미 완성된 솔리디티라면 오히려 Klaytn IDE 에서 진행하는게 좋다고 판단되는군요.

// 2022-06-11 기준 수동 설치시

npm install caver-js@1.8.0
npm install truffle-hdwallet-provider-klaytn
npm install -D truffle@5.5.6

소스코드: GoToTheMetaverse/vue-tutorial: vue 강좌 (github.com) 의 vue-1 폴더입니다.

영상: https://www.youtube.com/watch?v=52iKji9UK5U&t=619s 

MOTION ONE 튜터리얼 페이지: https://motion.dev/guides/quick-start

npm 버전은 16을 사용했습니다.

vue-cli 와 yarn 이 필요합니다.

node 설치 -> yarn 설치 -> vue 설치 -> 코드의 모듈 설치 순으로 진행합니다.
매우 귀찮은 걸차 길뿐 방법은 어렵지 않으니 차근차근 해보시면 
나중에 좋습니다.

yarn 설치:
npm install --global yarn

vue 설치:
yarn global add @vue/cli

코드 받아셔 vue-1 폴더 안에서 모듈을 설치합니다.
yarn install 

모듈설치할때 motion one 도 따라 설치됩니다.

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

테스트넷 이름은 바오밥 네트워크 입니다. Baobab network

충전페이지: https://baobab.wallet.klaytn.com/faucet

여기로 가셔서 지갑 주소 넣고 받기 버튼 누르면 끝입니다.

그러면 이전에는 어쨌냐가 중요한데요.
로그인 하라고 지갑 비밀키를 넣어야 했습니다.
보안이 취약한 방법이었죠.

클레이튼은 루나 사태와는 별도로 폭망중인데요. (수수료인상)
그래도 조금씩 개선되고 있는걸로봐선 살아있긴한가봅니다.