목록웹 개발 (225)
dukDukz

# 서명하는 방법 3가지 (사용자 입장에서) 블체 네트워크에있는 contract 사용 직전에 하는 작업 1. 메타마스크를 통해서 확인(팝업창) - 사용자가 서명하는 방식 (어제 했던것처럼) 핫 월렛 (온라인 지갑)을 통해서 하는 방식 => 지갑을 활용하여 서명하는 방식이라고 할 수 있다. 메마에 비밀키 저장하고있음 2. 사용자가 직접 서명하지만, Server를 거쳤다가 서명하는 방식 서명하겠다는 것을 컴퓨터 백서버에 (BE and DB) 사용자가 리엑트에 접근하면 사용자 로컬 메마가 블체에 연결시도 구매 버튼 클릭하면 리액트에서 함수 실행되고 이 내용을 백에 전달하고 백은 거기서 디비 작업을하고 백에서 리액트한테 서명을 받기 전 데이터를 건네주고 리액트는 사용자에게 그 내용을 알림창으로 띄워준다. 메마에..

Dapp 을 사용한다는 것은 사용자는 react로 솔리디티 언어는 EVM 이 해석해주고 빌드하면 abi 와 bin 파일이 생성됨 그럼 이 두 파일은 어디로 갈까? 블체 네트워크 (데몬)에 들어간다 이 파일을 어떻게 올렸나? 중간에 메타마스크를 통해서 데몬에 전달됨 그럼 어케 로컬이랑 메타마스크랑 연결됐나? 바로 web3를 통해서! react - web3 web3를 통해서 배포했었는데 우리가 만든코드를 블체 네트워크에 넣는행위하면 하나의 주소(contract 주소)를 반환해준다. 사용자 입장에서 사용자가 들어오면 metamask를 설치한 상태에서 이용을 할 것이다. react - web3 합쳐져있어서 react에 있는 주소와 사용자 로컬 metamask 와 연결한다. web3를 통해서 로컬 메마가 블체 데..

# Dapp 을 만들거임 # Dapp -> truffle -> React React 에서 deploy (배포)한 Smart Contract 내용을 가져오는 행위를 어떻게 작업했었는지 이미지 그려봐야함 배포한 컨트랙트 내용을 가져올 때 web3를 사용했다는 점 web3 에서 메타마스크에게 연결하는 방법 : 코드로 구현할 필요가 없음 truffle 이 알아서 해줌. react unbox 하면 src > getWeb3.js 가 있는데 이걸 나중에 호출해서 사용할거임 Promise 객체를 반환해줌 window.ethereum 이 어케 되는걸까?? - 메타마스크 설치되어있는 크롬에서만 나오는.. 즉 if(window.ethereum) 는 브라우져에 메타마스크가 있는지를 확인하는 것이다. # Truffle 작업 공..

1. 메타마스크 설치 크롬 확장프로그램에서 설치하고 지갑만들기 버튼을 눌러서 진행한다. 2. 가나쉬 설치 더보기 참고 - 테스트 네트워크 계정에서 이더 얻는 방법 더보기 메타마스크로 간단 transaction 해보기 1-1. 계정가져오기 1-2. 비공개키를 넣어주면 된다. 2. 이더 보내기 보낼 곳의 공개키를 넣어주면 된다. 보낼 금액을 적어주고 확인 누르면 보내짐 3. Transaction 확인하기 10 ETH 가 두번째 주소로 이동한 것을 확인할 수 있다. 그리고 가나쉬에서 TX COUNT = 1 로 변했다. Blocks 탭에 들어가보면 transaction 되면서 블럭이 생성된 것을 확인할 수 있다. Transaction 탭에서 보면 거래내역을 확인할 수 있다.
$ truffle init 1. contracts -> 솔리디티 작성하는 공간 2. migrations -> deploy 매서드가 사용되는 공간; 데몬에게 배포하는 행위를 하는 공간 3. test -> TDD 코드를 작성하는 공간 1. 솔리디티 파일 생성 $ truffle create contract [파일명] contracts 폴더 안에 [파일명].sol 이 생김 function hello() public view returns(string memory){ return "hello"; } 2. 솔리디티 파일 컴파일 하기 $ truffle compile 이후 build/contracts [파일명].json 생성되는것 확인하기 abi bin 파일을 truffle 에 맞게끔 json 파일로 바꿔준거임 3. ..

# truffle 에서 react 사용하기 $ truffle unbox react client : React 프레임워크가 설치된 공간 이 형태가 create-react-app : cra 가 설치된 폴더로 나온다. client> src > App.js 에 보면 기본적으로 web3 가 구현된것을 확인 할 수 있다. class 로 구현되어있는것만 함수형으로 바꿔서 쓴다고 생각하면 된다. Compile: truffle compile Migrate: truffle migrate Test contracts: truffle test Test dapp: cd client && npm test Run dev server: cd client && npm run start Build for production: cd cli..
# 메타마스크 = 지갑 지갑의 종류가 크게 2가지로 나눠져있다 핫 월렛 : 온라인 지갑 콜드 월렛 : 오프라인 지갑 메타마스크는 핫 월렛이다. 수탁형 지갑 : 거래소에 저장된 지갑. 제 3자에 의해서 보관되는 지갑 비수탁형 지갑 : 본인이 직접 관리하는 지갑 메타마스크는 비수탁형 지갑이다. 그렇다면 지갑의 역할은 무엇인가? 돈 보관 여기서의 지갑은 주소를 보관하는 공간이다. 가나쉬에 있던 10개의 주소들.. 왜 필요할까?? - 코인마다 지갑이 다르기 때문... 그래서 이런 것들을 저장하기 위해 나온게 메타마스크... 주소 보관 + 해당 주소 내용을 조회할 수도 있다. 해당 주소의 코인을 볼 수 있게 해준다. 혹은 다른 주소로 코인을 보낼 수 도 있다. 계좌 같은 느낌이다.

# 투표앱 만들기 * 솔리디티 1. 후보자를 초기화 2. 후보자 투표 기능 3. 후보자 정보 가져오기 구현하고 빌드해서 블럭에 배포(실행 시킨다는것)를 한다. 처음 배포할 때 이외에는 쓰지 않음 코드를 작성한 것. 컴파일 하면 두개의 파일이 나오는데 이것들을 블럭에 저장한다. (안에 내용들이 다 담겨 있음) * 블럭 abi 에 기능들이 다 저장이 됨 주소값도 영수증처럼 생김. * web3 이 저장한 내용을 웹에다가 출력 해야한다. 이때 쓰는게 바로 web3 이다. 사실 web3 는 따로 빠져있는게 아니라 html 페이지 안에 존재하는거임 얘가 가나쉬에 접근해서 접속한다. 블럭에서 주소값에 대한 내용도 가져와야 한다. 살짝 어려운 부분은 web3 랑 가나쉬랑 연결하는 부분..? # 투표앱 1. 솔리디티 코..