서명과 검증을 해봅시다.

프로그래밍/강좌 2022. 5. 18. 17:47

share this post

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

참고자료

서명방법 코드: https://forum.klaytn.foundation/t/kaikas-sign-list/2395
cdnjs 의 caver-js: https://forum.klaytn.foundation/t/cdnjs-caver-js-cdn/4873

카이카스와 caver-js 를 이용한 검증방법입니다.

유저에게 서명받는 코드 (카이카스 UI 가 뜹니다. 아래쪽에 그림있음)

        const caver = new Caver(window.klaytn);
        console.log("create caver");

        const sig = await caver.klay.sign(1, wallet_addr, "");
        console.log("sig", sig);

        const v = `0x` + sig.substring(2).substring(128, 130);
        const r = `0x` + sig.substring(2).substring(0, 64);
        const s = `0x` + sig.substring(2).substring(64, 128);
        const signature = [v, r, s];
        console.log("signature", signature);

서버에서 signature 받아서 검증하는 코드:

let sign_ret = await caver.validator.validateSignedMessage(
    //
    "",
    signature,
    wallet_addr
  );
  console.log("sign_ret", sign_ret);
  // sign_ret: true or false

카이카스 메시지 서명 UI

서명란에 메시지가 횡한데 글씨 넣을 방법 없는지 찾고 있습니다.

저작자표시

WRITTEN BY

: SIDNFT
게임개발자에서 WEBGL 웹개발자로 전환중

,

코딩자습서/020 vue / 변수 사용의 여러가지 버전 / $ref / .value

프로그래밍/강좌 2022. 5. 14. 19:27

share this post

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

영상주소: https://www.youtube.com/watch?v=hg5fYPwzyQs

yarn 을 사용하구요 yar install 을 해서 설치해야합니다.

vue 를 어느정도 쓰시는 분들이 볼것 같아서 영상엔 이 부분이 없습니다...

1. 초기방법

컴포지션이전 시대의 방식입니다.
this 가 자주 들어가서 귀찮아지고 버그도 생기기 마련입니다.

<script>
export default {
  data() {
    return {
      a: 0,
    };
  },
  mounted() {
    this.a = 1;
  },
  methods: {
    onClick() {
      this.a++;
    },
  },
};
</script>

2. 컴포지션 초기

setup() 함수를 작성하며 함수 마지막에 return 이 있는게 특징입니다.
this 는 없는 대신 value 가 있군요 (좋을게 없습니다.)

<script>
import { defineComponent } from "@vue/composition-api";
import { onMounted, ref } from "vue";
export default defineComponent({
  setup() {
    let a = ref();
    onMounted(() => {
      a.value = 1;
    });
    const onClick = () => {
      a.value++;
    };
    return {
      a,
      onClick,
    };
  },
});
</script>

3. <script setup> 으로 시작하며 return 이 없습니다.

return 이라도 없으니 좀 나아졌죠?

<script setup>
import { onMounted, ref } from "vue";
let a = ref(0);
onMounted(() => {
  a.value = 1;
});
const onClick = () => {
  a.value++;
};
</script>

4. $ref 를 사용하는 방식

최종 방법입니다. 훈륭합니다.
쓰기위해선 reactivityTransform: true 라는 옵션이 들어가야하는데 프로젝트 설정마다 조금씩 다른거 같군요

vue.config.js 를 쓰기도하고 vite.config.js 를 쓰기도 하네요. 각자 프로젝트에 맞게 찾으셔야할것 같습니다.
reactivityTransform <-- 요게 키워드입니다.

<script setup>
import { onMounted } from "vue";
let a = $ref(0);
onMounted(() => {
  a = 1;
});
const onClick = () => {
  a++;
};
</script>

또한 eslint 를 사용한다면 $ref 가 없다고 에러를 밷는경우가 있는데요.

'$ref' not defined

이런에러 입니다.

제 경우엔 .eslintrc.js 를 수정해야했습니다.

// .eslintrc.js
module.exports = {
  // (생략)
  globals: {
    $ref: "readonly",
    $computed: "readonly",
    $shallowRef: "readonly",
    $customRef: "readonly",
    $toRef: "readonly",
  },
};

global 변수 등록 해줬습니다.