투자유의 개발 블로그

CRA로 세팅한 리액트 프로젝트에서 test를 위한 eslint 설정입니다. eslint vscode 확장 플러그인 설치 테스트를 위한 플러그인 설치 npm i -D eslint-plugin-testing-library eslint-plugin-jest-dom .eslintrc { "plugins": [ "testing-library", "jest-dom" ], "extends": [ "react-app", "react-app/jest", "plugin:testing-library/react", "plugin:jest-dom/recommended" ] } 에러가 발생한 코드에 커서를 올려보니, render함수의 리턴을 destructing해서 쿼리함수(getByText)를 가져오는 것을 피하고 scree..

오픈소스 기여(메타마스크, web3.js) 처음 심화클럽은 블록체인 관련 오픈소스(특히 메타마스크)에 기여하는 것이 목표였습니다. 그러다 블록체인 프로젝트를 진행하는 것으로 변경되었습니다. 멘토님께서 메타마스크에 기여할만한 아이디어로 jazzicon 대신 ens avatar url을 넣는 제안을 메타마스크 깃헙 이슈에서 찾아 알려주셨습니다. 그래서 해당 제안을 구현할 수 있을까 고민해보았는데 쉽지 않을 것 같았습니다. (괜히 1년 넘게 해당 제안에 대해 아무도 컨트리뷰션하지 않은 것이 아니었습니다...) 그래서 일단 그 제안을 구현하는 것은 포기하였습니다. 하지만 간단한 건에 대해서라도 오픈소스에 기여해고 싶다는 생각이 들어 메타마스크와 web3.js 깃헙 이슈에 올라온 글들을 보면서 처리할 수 있을 만..

아래 항목들을 포함하면 안전하지 않습니다. constructor initialize more than once reorder storage kill (self-destruct function) Unsafe Code 배포 ⇒ 에러 // SPDX-License-Identifier: MIT pragma solidity 0.8.13; contract UnsafeV1 { address public owner; uint public val = 123; uint public start = block.timestamp; constructor() { owner = msg.sender; } } 오픈제플린에서 인식할 수 있는 Unsafe code 는 배포 단계에서 에러가 발생해서 배포가 안됩니다. 상수(constant)와 ..

◼︎ 결과 배포 주소: https://tictactoe.tozau.io (ropsten) 시연 영상: https://www.youtube.com/watch?v=ghHfs0LH6Gw Github: https://github.com/Hyun2/tic-tac-toe ◼︎ 테스트 1. 환경변수 설정 env.example 파일에 infura와 etherscan의 api key, 배포에 사용할 지갑의 private key를 기입 후 파일명을 .env로 변경합니다. INFURA_API_KEY= ETHERSCAN_API_KEY= PRI_KEY= 2. hardhat node 실행 env $(cat .env) npx hardhat node 3. 테스트 코드 실행 env $(cat .env) npx hardhat test ..

프록시 패턴은 업그레이드 가능한 스마트 컨트랙트를 구현하는 방법입니다. logic contract 앞에 proxy contract 를 두고, proxy 컨트랙트의 스토리지 데이터를 사용함으로써 logic contract가 업데이트 되더라도 기존의 데이터를 유지한 채 업데이트된 논리적 기능을 호출할 수 있는 방식입니다. (logic 컨트랙트에서 데이터를 읽을 때도 프록시 컨트랙트의 스토리지로부터 가져오고, 데이터를 write할 때에도 프록시의 스토리지에 기록합니다.) 사용자는 proxy contract 를 호출하고 proxy contract 의 fallback 함수를 통해서 logic contract 를 delegatecall 합니다. logic contract 를 업데이트할 때에는 관리가자 ProxyAd..

지난 NFT 마켓 플레이스 프로젝트를 진행하며 백엔드 API 인증 부분에서 어려움이 있었습니다. NFT 거래, 투표 등은 컨트랙트를 호출해서 진행하기 때문에 백엔드 API 인증과는 큰 상관이 없었지만, 오픈씨처럼 지갑 사용자의 profile 설정 등은 백엔드 API를 통해서만 이루어지는데 자신의 지갑 주소에 해당하는 profile만 수정할 수 있도록 제한하는 인증 방법을 찾는데 시간을 꽤 들여야했고, 찾은 인증 방법도 시간이 부족해 프로젝트에 적용시키지 못했습니다. 당시에 찾았던 인증방법(signed message + jwt)과 최근 새롭게 찾은 방법(signed message + web3-token)을 비교해보고자 합니다. JWT 프로젝트를 진행하면서 찾았던 방식입니다. 일반적으로 ID(email)/p..

Chrome API extension과 현재 브라우저의 탭에서 방문 중인 웹 사이트 간 인터렉션을 위해 필요합니다. Content scripts 웹 페이지의 컨텍스트에서 실행되고 DOM 엘리먼트, 객체 및 메서드에 전체 엑세스 권한이 있는 js 파일입니다. Messaging passing API를 이용해서 react로 만든 extension과 컨텐츠 스크립트가 인터렉션할 수 있습니다. 메세징 API와 인터렉션하기 위해서 3가지 사항이 필요합니다. 1. Access to the Chrome API 2. Permissions 3. Content scripts Access to the Chrome API 타입스크립트에서는 @types/chrome 를 설치합니다. npm install @types/chrome ..

ethereum name을 생성해보았습니다. 가스비가 역대 최저치인데도 ethereum name을 register하고 email, avatar url 등을 적어넣는데 꽤 많은 가스비가 들었습니다. 컨트랙트가 복잡한가 봅니다. hardhat console에 접속해서 ethers.js로 제가 등록한 avatar url을 가져와 보았습니다. > await ethers.provider.getAvatar("tozau.eth")