15. 솔리디티 컨트랙트 Web3.js 활용하여 웹으로 보여주기

1. 스마트 계약의 시작, 리믹스 도구 사용해보기

2. 솔리디티 개발환경 구성

3. 스마트컨트랙트 작성 후 배포하기

4. openzeppelin 사용하여 ERC20 토큰 만들기

5. Ropsten 테스트넷에 ERC20토큰 배포하기

6. web3.js 와 자바스크립트를 활용한 간단한 예제

7. 솔리디티 기초, 리믹스로 컨트랙트 작성하기

8. 솔리디티 기본문법 (변수, 데이터타입, 구조체)

9. 솔리디티 배열, 맵핑

10. 솔리디티 조건문, 반복문(if, else, for)

11. 솔리디티 암호화폐 지불(호텔룸 예약하기 프로그램)

12. 솔리디티 상속

13. 리믹스 솔리디티 6.0 버전 ERC20토큰 만들기

14. web3.js 와 자바스크립트를 활용하여 (이더잔액조회) 지갑 만들기

15. 솔리디티 컨트랙트 Web.js 활용하여 웹으로 보여주기

 

---

 

1. index.html 파일을 아래와 같이 만듭니다.

 

* WEB 3 라이브러리 주소는 아래 링크 참고

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

 

 

const web3 = new web3 연결부분은 지난시간 강의를 참고바랍니다.

이전 솔리디티 시간에 배운 hotel 예약 관련 컨트랙트를 컴파일 하고 배포합니다.

 

Deploy후 해당 컨트랙트 주소를 가져옵니다.

 

해당 컨트랙트 주소를 아래에 붙여넣기 합니다.

 

이제 ABI를 가져옵니다.

ABI는 컴파일하는 메뉴에 있습니다.

 

이걸 가져와서 아래에 ABI 부분에 붙여넣기 합니다.

 

자, 기본적인 작업이 끝났습니다.

이제 index.html 파일을 오픈해봅니다.

개발자모드에서 MyContract.methods.currentStatuas.call() 명령을 호출해봅니다.

위 그림과 같이 표시되는 걸 확인할 수 있는데요.

이제 이렇게 제공받은 데이터를 잘 조작하고 이쁘게 정렬하고 사용하는 일이 남았는데요...

이건 Javascript와 Html, CSS를 어떻게 다루느냐에 따라서 달라질 수 있습니다. 우리는 아주 기초적인 것만 배웠죠~~하나씩 구현하면서 필요한 것들을 배워가면 됩니다.

 

그리고 Web3.js 역시 하나씩 실행해보면서 배워가야 합니다.

web3js.readthedocs.io/en/v1.3.0/index.html

web3.js - Ethereum JavaScript API — web3.js 1.0.0 documentation

솔리디티도 마찬가지죠~

solidity.readthedocs.io/

Solidity — Solidity 0.7.4 documentation

 

자, 여기까지가 제가 준비한 블록체인 기본프로그래밍 수업과정입니다.

이제 필요한 부분을 하나씩 배워가면서 블록체인 전문개발자로 성장하시길 기원합니다.

감사합니다.

 

블록체인 교육 문의는 아래 링크 참고 바랍니다. 

https://kimsfamily.kr/414

블록체인 교육 커리큘럼 및 프로필