react를 활용한 Dapp 2탄입니다!! (3.블록체인 네트워크 연결)

안녕하세요!

어제 Private Ethereum Network에 연동까지해서 블록에저장, 호출까지 하려했는데.. 개인 사정때매 끝까지 못했네요

그래서 오늘 나머지 진행하려 합니다!!

어제에 이어서 바로 시작하겠습니다!

---

저희가 ipfs서버에 파일을 저장하고, 해시값을 가져오고, 화면에 출력하는 단계까지 진행을 하였습니다.

이제는 블록에 저장하고, 호출하는 코드를 작성해볼게요!

어제 스마트 컨트랙트부분을 솔리리티로 작성하고 컴파일까지 했었죠?

컴파일이 완료되면 build/contracts폴더안에 FileHash.json이라는 파일이 생성됐을거예요

이파일과, src/utils안에있는 getweb3파일을 저희 FileHash.js파일에 import시키겠습니다!

그후에 새로운 state변수 account와 web3 도 선언해줄게요!

account state변수에는 현재 트랜잭션을 일으키는 이더리움 계좌를 저장할거구,
web3 변수에는 현재 사용할 web3를 저장할거예요!

web3란것은 간단히 말해서 JSON RPC를 호출하게 해주는 라이브러리입니다!

이더리움기반으로 Dapp 프로젝트를 진행함에 있어서 굉장히 편하게 이벤트처리나 리턴값 호출을 다룰수 있게되요!

조금더 web3에 대해 자세히 알고싶은 분을 위해 제가 참고했던 블로그 주소를 첨부드릴게요!

http://goodjoon.tistory.com/260
good joon's님의 블로그인데 저도 이분 글을 읽고 web3에 대해서 개념이 생겼습니다!!

다음으로 현재 사용중인 web3를 불러와 저장시키는 코드입니다!

utils/getweb3를 보시면 web3를 호출하는 것에 대한 코드가 되어져있어요!

다음으로 저희가 작성한 스마트 컨트랙트를 호출하고, 계정정보를 가져오고, 컨트랙트내에 함수를 사용하는

function을 만들겠습니다!

전에 작성햇던 콜라 구매하고 판매하기 Dapp이랑 굉장히 유사하죠??

저희가 만드는것처럼 기본적인 프로젝트에서는 거의다 비슷비슷하게 사용을 하니까 , 절대 어려움 갖지 않으셔도됩니다!

컨트랙스 인스턴스화시키고 젖, 계정정보저장및, ipfsHash값을 가져오게 할거예요!

이제 마지막으로 파일을 업로드하고 버튼을 눌렀을때, 그 hash값이 블록에 저장되는 코드를 작성해볼게요!

전에 작성했던 onSubmit함수에 작성을 할거예요!

빨간색 포인트 되어져 있는 부분만 작성하시면 됩니다!

ipfs서버에 파일을 올리고, result로 해시값을 받아오는데 그값을 블록에 저장하는 코드입니다!

이제 잘되나 테스트를 해볼까요?

가나슈를 열어주시고 콘솔창에서 새로 컴파일을 진행합시다!

그리고 스타트!!를 햇는데 set이 define되지 않았다고 에러가 나네요 ㅋㅋㅋㅋ

위에서 만든 instantiateContract() 함수 기억나시나요?

이곳에서 저희가 만든 컨트랙트를 관리하는데, 이 함수 호출을 아무데서도 안시켜서 나는 에러입니다...

컨트랙트 내에 set함수는 물론 get함수까지도 못불러오는 사태인거죠!

이부분에 추가해주시면 정상적으로 작동할거예요!

가스비를 지불하고 트랜잭션을 실행하면!
가나슈에서 블록이 생성된걸 볼수가 있습니다 ㅎㅎ

오늘 배운걸 많이 활용하면 여기저기 써먹을데가 많으니 안 잊어버리셨으면 합니다!

다음시간에는 더 좋은 자료로 찾아올게요! 감사합니다