Torch for new way

처음 프로그래밍을 배우기 시작할 때 윈도우 os에 ubuntu를 설치하고, 여기서 vim이나 mysql 등 필요한 것들을 설치해 사용헀다. 그런데 어느 순간 속도가 눈에 띄게 느려지더라. 리액트 서버 한 번을 키는데 몇 분이 걸리지를 않나.. 그래서 혼자 공부를 할 때는 수업 듣던 도중에 산 맥북을 이용해왔는데 최근에 맥북에서 mysql workbench를 이용해 eer을 통해 db schema를 만들 때 생각한 table간 관계가 내 의도대로 구현이 됬는지를 보려고 하니 window에선 툴바가 보이는데, mac에선 이상하게 그 기능을 찾을 수가 없더라. 그래서 다시 윈도우로 작업물을 가져와야 할 일이 생겼는데, 이 기회에 개발환경을 좀 정리해두는게 좋을 것 같았고, (선택지는 많을수록 좋으니까..) 직..

우리 직장 상사는 hardhat같은 툴을 사용하거나 하지 않고 모조리 깡 코드를 써서 tx도 보내고 배포도 하고 nft도 만들고 다 하시더라.. ethersJS 라이브러리를 이용해 다른 어플리케이션을 사용하지 않고 코드만으로 블록체인 네트워크와 상호작용을 하는 방법을 알아보자. hardhat, ethersjs를 사용한다. 1. 네트워크와 연결 새로운 hardhat 프로젝트를 생성하고, 다음과 같이 하드햇에서 제공하는 네트워크를 구동한다. npx hardhat node 디폴트로 rpc 주소는 http://127.0.0.1:8545로 지정된다. 이제 js 파일을 하나 만든다. 여기에 블록체인과 상호작용할 코드를 쭉 작성할 것이다. 2. pk > wallet, signer 생성 하드햇 네트워크를 구동하면 10..

styled components를 통해 함수형 컴포넌트들을 배치하려고 하는데, input에 뭘 적을 때 마다 focus가 풀리더라. focus() 함수 등 이런저런 방법을 사용해봤지만 소용이 없었고, 진짜 이유를 찾는데 오래 걸려 기록해 두기로 했다. 문제가 있는 코드는 다음과 같았다. // ... 앞쪽 코드는 생략 export function Calculator() { const CalculateModule = styled.div` ... > input { ... } ` // ...중략 return ( ) } 문제는 styled-components를 이용해 만든 element 코드 블럭의 위치였다. 저게 함수형 컴포넌트 안에 있으니 문제가 발생했던 것 같다. 내가 input에 값을 입력 > state ..

1. switch, case문 switch , case문은 다음과 같이 써줄 수 있다. #!/bin/bash case [변수] in case1) [case1일 경우 수행할 작업] ;; case2) [case2일 경우 수행할 작업] ;; ... *) [default로 수행할 작업] ;; esac 예시로 다음과 같이 종족을 고르는 코드를 만들 수 있다. #!/bin/bash case $1 in # $1 == protoss인 경우 protoss) echo "select protoss" # semicolon 2개로 각 case들을 구분한다. ;; terran) echo "select terran" ;; zerg) echo "select zerg" ;; # default는 다음과 같이 *)로 표시해준다. *) e..

이번엔 쉘 스크립트에서 조건문, 반복문을 사용하는 방법을 알아보자. 1. 조건문 JS와 큰 차이는 없는데 조건을 주는 방식이 약간 다르다. JS에서는 if, else if, else문이 있었는데, 쉘 스크립트는 else if 대신 elif를 사용하며, 조건문을 fi 명령어로 닫아줘야 한다. 우선 조건을 어떤 형식으로 넣어야 하는지를 알아본 후, 가장 단순한 형태인 if문을 시작으로 if-else, if-elif-else문까지 사용해보자. JS에서 어떤 두 값을 비교해 두 값의 대소 비교를 하거나 동일한지를 확인할 때, 혹은 하나의 값이 원하는 값이 맞는지 확인하기 위해서는 부등호나 등호 등을 사용했다. 쉘 스크립트에서는 이런 관계나 조건 등을 조금 다른 방식으로 적어줘야 조건문을 사용할 때 문제가 없다...

1. intro 쉘 스크립트 파일의 확장자는 .sh라고 표기한다. shell script 카테고리에서 공부할 것은 대부분의 프로그래밍 언어의 기본적인 기능인 - 변수 선언 및 사용 - 제어문 (조건문, 반복문 등..) - 스크립트 명령어 (echo, read, exec 등..) - 배열 - 함수 등이 있다. 하나씩 알아보자. 우선 .sh 확장자를 가진 파일을 만들고 가장 윗줄에 다음과 같이 작성한다. #!/bin/bash 이는 html의 head 부분에 메타데이터를 넣어줄 때가 있는 것처럼 sh 파일의 가장 윗줄에도 메타 데이터가 들어간다. 이는 이 파일을 어떤 쉘로 읽을 것인지를 나타내주는데, 위처럼 마지막에 /bash로 끝난다면 bash를 이용해 이 파일의 코드를 해석하겠다는 것을 의미한다. 2. 변..

1. shell 개발 과정에서 우리는 자주 터미널에서 shell을 사용해 명령을 입력한다. 우리가 다루는 컴퓨터의 구조를 살펴보면 다음 그림과 같다. 안 쪽에서부터 보면 우선 컴퓨터는 다양한 하드웨어로 이루어져 있다. 그 하드웨어에 직접 명령을 내려 어떤 동작을 수행하게 하는 것이 kernel이다. 그 kernel(커널)에 사용자는 직접 명령을 전달할 수는 없고 (기계가 알아들을 수 있는 언어를 사람이 직접 만들 수는 없다.) 사용자의 명령을 변환해 커널에 전달해 하드웨어가 이를 수행하게끔 그 매개 역할을 해주는 것이 shell이다. 명령을 수행한 후, 처리 결과도 하드웨어에서 커널을 거쳐 쉘에게 알려준다. shell은 껍데기, kernel은 코어, 중심이라는 뜻을 가지고 있다. 쉘은 사용자가 입력한 명..

google 검색을 조금 더 세밀하게 하는 방법을 알아보자. 프로그래머가 하는 일은 문제를 해결하는 일이다. 우선 문제를 파악하고, 해결책을 검색해서 찾던가 혹은 검색해도 안 나오면 직접 만들던가 해결책을 직접 만드는걸 잘하는건 꾸준한 프로그래밍을 통해 천천히 나아가야 할 길이지만 해결책을 검색해서 찾는 걸 잘하는건 어느 정도 스킬이 있다. 이 글에서는 구글에서 검색을 조금 더 디테일하게 하는 방법에 대해 알아보도록 하자. 1. logical operator 1. A +B : A, B 모두를 포함한 검색 실행 요즘 prysm을 이용해 private consensus network를 구동하는 방법을 알아보고 있는데, 이에 대해 prysm과 private network 두 키워드 모두를 가지고 있는 검색 결..

1. intro hardhat은 컨트랙트를 컴파일, 배포, 테스트 할 수 있는 truffle과 비슷한 종류의 툴이다. ts를 사용할 수도 있고, depolyment script를 작성하기도 편할 뿐더러, console.log 기능을 지원해 개발 과정에서 디버깅을 훨씬 편하게 해줄 수 있기 때문에 truffle에 비해 편리한 점이 있다. 2. install, setup npm install --save-dev hardhat (공식 개발자 문서에서는 wsl2 환경에서 사용하는 것을 추천하고 있다.) npx hardhat 콘솔에서 다음과 같이 입력해 hardhat을 실행하면 시작화면이 출력된다. 여기에서 첫 번째 옵션 (create a JS project)를 선택하고 엔터를 치면 루트 디렉토리 안에 컨트랙트 ..

1. intro proxy 기능을 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시 객체를 만들 수 있다. (비슷한 기능을 함수에선 hooking이라고 함) 원래 obj대신 사용할 있는 객체를 만들지만 이 객체의 속성 가져오기, 설정, 정의등의 기본적인 작업을 재정의한다. (사용자가 객체안의 속성값을 읽는 코드를 입력 후 실행해도, 객체 속성을 바꾸는 등의 작업으로 바꿀 수 있음) 일반적으로 속성 엑세스 기록, 입력의 유효성 검사, 형식 지정, 삭제에 사용한다. 보통 매개변수 2개를 이용해 Proxy 객체를 생성한다. target : 프록시 할 원본 객체 handler : 가로채는 작업, 가로채는 작업을 재정의하는 방법을 정의하는 객체 const target = { msg1 : 'hello..

1. Intro CSR, SSR 렌더링 방식에 대해 알아보고, 각각의 장단점을 알아보자. 2. Web Vitals terminology 자세히 알아보기 전에 이 포스트에서 이해를 편하게 하기 위한 약어를 정하고 넘어가자. Time To First Byte (TTFB) : 컨텐츠의 첫 데이터를 클라이언트가 받는데 걸리는 시간 First Paint (FP) : 사용자가 첫 픽셀을 받는데 걸리는 시간 First Contentful Paint (FCP) : 컨텐츠가 처음 보이기 시작하는 시간 Largest Contentful Paint (LCP) : 페이지의 메인페이지가 로딩되는데 걸리는 시간 Time To Interactive (TTI) : 페이지가 상호작용이 가능해지고, 사용자의 이벤트에 반응할 수 있게 되..

1. intro DID, DID document가 ID의 구성 요소중 식별자와 인증 수단이었다면, VC (Verifiable Credential), VP(Verifiable Presentation)는 주민 등록증, 자격증 등 사용자가 실제로 제시할 ID data들을 의미한다. holder는 Issuer에게서 VC를 발급받으면 이를 바로 verifier에게 제출하지 않고, 이를 적절히 가공한 (필요한 속성만을 추출한) 후, holder 자신의 서명을 추가한 VP를 제출한다. Verifier는 받은 VP를 issuer, holder 각각에 대해 검증한다. (issuer의 서명, holder의 서명) VC, VP 모두 앞에서 공부한 DID, DID document와 비슷하다. 2. VC (verifiable ..

1.1 DID (decentralized identifier) 1.1.1 DID의 개념 기존 주민 등록번호같은 중앙화된 식별자는 중앙 기관을 통해 발급되는 구조이다. 반면 DID (Decentralized Identifier)는 사용자 스스로 생성, 제어할 수 있는 분산형/탈중앙화형 식별자이다. DID는 DID를 사용하는 subject에 대한 식별자로 사용되는 것에 더해 인증 수단인 DID document를 참조할 수 있는 uri역할까지 수행한다. DID는 다음과 같은 구조를 가진다. 1. scheme : uri가 어떤 프로토콜을 사용해 자원에 접근하는지 명시 (did의 경우 항상 did를 값으로 가진다 http, https등과 같은 범주) 2. method : DID doument가 어떤 저장소 (보통..

Ch 2 마지막에 외부 컨트랙트를 가져오기 위해 CA를 사용했는데, 이럴 경우 해당 CA를 가진 컨트랙트에 문제가 생길 경우 우리의 컨트랙트도 사용할 수 없게 되어버린다는 문제가 있다. 이를 보완하기 위해 CA 변수를 상수로 값을 대입하지 말고 CA가 변하더라도 그 값을 그때 그때 읽어올 수 있도록 변수화 하는 과정을 거치고 시작하자. 1. CA 변수화 /* zombiefeeding.sol */ // ..중략 contract ZombieFeeding is ZombieFactory { KittyInterface kittyContract; // CA 대입 없이 선언만 한다. function setKittyContractAddress(address _address) external { kittyContract..

지난 글에 이어서 지금까진 민팅된 토큰이 종류별로, 랭크 별로 몇개가 있는지를 보여주는 기능, 토큰 리스팅 기능을 구현해보자. 우리가 ch2에서 컨트랙트를 수정할 때, 이중 배열을 이용해 랭크, 타입 별로 갯수를 저장해두고, 이 값을 가져올 수 있는 함수를 만들어두었다. 지금까지 해왔던 것과 크게 다르지 않다. 원하는 데이터를 담을 변수(data), 그 데이터를 바꿔줄 함수(setData), useState를 선언하고, 컨트랙트와 상호작용해 데이터를 가져올 함수(getData)를 만든 후, 그 함수에서 setData함수를 호출한다. getData함수는 적절한 때에 실행하고 그 결과값을 랜더링에 포함시키면 된다. 1. token 통계 보기 /* front/pages/index.tsx */ // ...중략 ..