오늘의 CODE

web3.js 란? 자바스크립트 기반으로 이더리움 Dapp이나 서비스를 구현할 때 사용되고 통신을 위하여 JSON-RPC API를 호출한다. 구조도는 아래 이미지 참고 기능 web3.js는 내부적으로 HTTP나 IPC를 통해 JSON RPC API를 호출하도록 되어 있다. 이더리움 네트워크는 노드로 구성되어 있고, 각 노드는 블록체인의 복사본으로 가지고 있다. 만약, 스마트 컨트랙트의 함수를 실행하고자 한다면 노드에 질의를 보내 아래의 세가지 정보를 전달해야 한다. 스마트 컨트랙트 주소 실행할 함수 함수에 전달할 변수들 이더리움의 노드들은 JSON-RPC로만 소통할 수 있고, 이는 개발자에게 불편한 일이기 때문에 web3.js는 개발자들이 쉽고 편리하게 자바스크립트 인터페이스로 상호작용할 수 있도록 해준..

web3.eth(web3-eth package) - 이더리움 블록체인과 스마트 컨트랙트와 상호작용할 수 있다. web3.shh(web3-shh package) - broadcast를 위한 whisper 프로토콜과 상호작용할 수 있다. web3.bzz(web3-bzz package) - swarm과 상호작용하면서 파일 저장을 탈중앙화할 수 있도록 한다. web3.utils(web3-utils package) - Dapp 개발자에게 도움되는 함수를 포함하고 있다. 1. web3 provider web3 provider는 스마트 컨트랙트의 내용을 호출하거나 입력하기위해 어떤 노드와 통신해야 하는지 설정해 줘야 한다. http에서 동작하는 node를 연결하기 위해 httpProvider를 사용해 web3 객체를..

React 컴포넌트를 선언하는 방식은 두가지가 있다. 함수형(Function)과 클래스형(Class)이 있는데 이 두가지의 차이점을 비교해보며 내가 구현하고자 하는 목적에 적합한 방식으로 컴포넌트를 선언해 사용하길 바란다. 기본적으로 함수형과 클래스형의 동작은 동일하다. 하지만 클래스형 컴포넌트가 함수형보다 더 많은 기능을 제공해주는 것이 가장 큰 차이점이다. 클래스형은 state를 이용한 상태를 나타내거나 라이프사이클(LifeCycle)에 정의된 메서드를 이용해 원하는 순서에 특정한 동작도 할 수 있어 과거에는 클래스형을 많이 사용했지만 2019년 v16.8부터 함수형 컴포넌트에 리액트 훅(hook) 함께 사용할 것을 권장하고 있다. [함수형 컴포넌트를 선호하는 이유] 클래스형 컴포넌트는 로직과 상태를..

자바스크립트의 비동기 처리는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드 먼저 실행하는 자바스크립트의 특성을 의미한다. 비동기 처리 사례 1. Ajax Web API 요청 : 서버쪽에서 데이터를 받아와야 하는 경우 function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }) return tableData; } console.log(getData()); // undefined $.get()은 jquery의 ajax 통신 부분으로 url로 HTTP GET 요청을 날려 1번에 대한 정보를 요청하는 코드이다. 이렇게 서버에서 받아온 ..

web3.js 때문에 머리아픈지 꽤 오랜 시간이 지났는데도 web3.js는 여전히 나를 당황시킨다. 알꺼 같으면서도 모르겠고 알았던 것도 모르겠고 모르겠던건 더 모르겠고 울고 싶을 때가 한두번이 아니다!!!!!!(유리멘탈...) 도움이 될만한 인강이나 유튜브 영상 또는 도서를 찾아봤지만 내가 무능력한건지 이것도 찾다가 지침... ㅋㅋ 그러다가 우연치 않게 접하게 된 CryptoZombies. https://cryptozombies.io/ko/course #1 Solidity Tutorial & Ethereum Blockchain Programming Course | CryptoZombies CryptoZombies is The Most Popular, Interactive Solidity Tutorial..

import React, { render } from 'react'; 차이점은 보내주는 export 방식의 차이라고 한다. 모듈을 불러올 때 import를 해주는 것처럼 해당 모듈을 다른 파일에 보내려면 export라고 명시적으로 써줘야 한다. export 시 default를 붙인 경우 중괄호 없이 import가 가능하지만, default 없이 export한 경우, 중괄호 안에 담아 import를 해주면 된다. 만약, default 없이 export한 경우, 중괄호를 빼먹을 경우 에러가 발생한다. 예시. // App.js const react = 1; const vue = 2; export { react }; export const angular = 3; export default vue; react, ..

스마트 컨트랙트란? 서면으로 이루어진 계약을 코드로 구현하고 특정 조건(합의한 내용 및 조건)이 충족되었을 때 해당 계약이 자동으로 이행(self-execution)되게 하는 스크립트(전자 계약서)를 말한다. 이 때, 조건이 충족될 경우, 계약 내용을 스마트 컨트랙트 소스 코드로 작성하여 블록체인 네트워크에 전송하면 네트워크 참여자(노드)들의 유효성 검증이 이뤄지며, 검증 완료 시 스마트 컨트랙트가 포함된 블록이 생성되며 배포된다. 조건이 충족되지 않을 경우, 계약은 실행되지 않는다. 이더리움에서 스마트 컨트랙트를 만들기 위해서는 기존에 사용하던 프로그래밍 언어가 아닌 Solidity, Vyper와 같은 스마트 컨트랙트를 만드는 전용 언어로 논리적인 계약의 작동을 정의해야 한다. 작성된 코드는 컴파일러를..

이더리움 구성요소 Peer-to-Peer 네트워크(P2P network) - 이더리움은 TCP 포트 3030으로 접속 가능한 이더리움 메인 네트워크(Ethereum man network)에서 실행된다. 합의 규칙(Consensus rules) - 이더리움의 합의 규칙은 기준 사양인 황서(Yellow paper)에 정의되어 있다. 트랜잭션(Transaction) - 이더리움 트랜잭션은 보낸 사람, 받는 사람, 값 및 데이터 페이로드가 포함된 네트워크 메시지이다. 상태 머신(State Machine) - 이더리움 상태 전이는 바이트코드(기계명령어)를 실행하는 스택 기반 가상 머신인 EVM(이더리움 가상 머신)에 의해 처리된다. 데이터 구조(Data Structure) - 이더리움의 상태는 트랜잭션 및 시스템..

ABI(Application Binary Interface) ABI는 컨트랙트 함수와 매개변수들을 JSON 형식으로 나타낸 리스트이다. 다음은 ERC20 Interface의 BalanceOf 함수 ABI이다. { "constant": true, "inputs": [ { "internalType": "address", "name": "tokenOwner", "type": "address" } ], "name": "balanceOf", "outputs": [ { "internalType": "uint256", "name": "balance", "type": "uint256" } ], "payable": false, "stateMutability": "view", "type": "function" }, 함수 ..

Instructions. If we were to set up a Tic-Tac-Toe game, we would want to know whether the board's current state is solved, wouldn't we? Our goal is to create a function that will check that for us! 틱택토 게임을 만들었다면, 보드의 현재 상태가 해결됐는지 여부를 알고 싶지 않은가? 우리의 목표는 그것을 확인할 함수를 만들어내는 것이다. Assume that the board comes in the form of a 3x3 array, where the value is 0 if a spot is empty, 1 if it is an "X", or 2 if..