이더리움 Dapp 프레임워크인 트러플과 리액트 박스를 활용하여 이더리움 Dapp을 구현하는 방법을 알아봅니다. 자바스크립트로 구현하는 프론트엔드와 이더리움 스마트 컨트랙트가 어떻게 결합되어 애플리케이션이 되는지 학습하게 됩니다.
리액트로 구현하는 이더리움 Dapp
이더리움은 현재 가장 많이 활용되는 블록체인 애플리케이션 플랫폼입니다. 특히 자바스크립트 친화적인 Dapp 개발환경을 가지고 있기 때문에 자바스크립트 기술에 익숙한 개발자들은 어렵지 않게 접근할 수 있는 장점도 있습니다. 이 강좌는 트러플 공식 패키지인 리액트 박스를 사용해서 이더리움 Dapp – 동전 던지기 게임을 만들어 볼 것입니다. 솔리디티로 스마트 컨트랙트를 작성하고, 리액트로 화면개발을 해보면서 이더리움 Dapp이 어떻게 구현되는지 이해할 수 있는 유익한 시간이 될 것입니다.
학습 목표
이더리움 기반의 간단한 프론트 엔드 Dapp을 개발할 수 있으며 관련 기술에 대한 이해의 폭을 넓힐 수 있습니다.이 강좌를 통해 다음을 배울 수 있습니다.
- 이더리움 애플리케이션에 관한 기본 지식
- 개발환경인 트러플(Truffle), 가나쉬(Ganache) 사용법
- 트러플 리액트 박스 활용법
도움이 되는 분들
- 자바스크립트 프로그래밍 경험자
- 리액트를 조금이라도 아는 개발자
- 블록체인과 이더리움.Dapp에 대해 궁금한 개발자
배우는 것들
동전을 던져서 어느 면이 나올지 맞추는 게임을 구현해보아요 🙂
참고 사항
- 윈도우 10 Pro
- 솔리디티 0.4.24
- 가나쉬 1.2.2
- Truffle 4.1.14
- Truffle react box (react 16.4)
- 메타마스크(Injected Web3)
- 실습자료는 [강의자료]를 다운로드
지식공유자 소개
coldmind
한화시스템 블록체인(이더리움) 교육
고려대학교 “암호화폐 설계와 이해” 출강
강좌 교육과정
| 소개 |
|
오리엔테이션학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
미리보기 |
00:08:00 |
|
강의자료학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:00:00 |
| 환경 |
|
개발환경구성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
미리보기 |
00:13:00 |
|
소스파일작성도구학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:05:00 |
| Hello, World 컨트랙트 |
|
컴파일학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
미리보기 |
00:12:00 |
|
배포(1)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:08:00 |
|
배포(2)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:12:00 |
|
자바스크립트 단위테스트학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:09:00 |
|
테스트케이스 비동기 처리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
미리보기 |
00:04:00 |
| Unbox! |
|
트러플 리액트 상자 개봉기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:16:00 |
| 동전 던지기 컨트랙트 |
|
주요 로직(1)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:10:00 |
|
주요 로직(2), 난수생성문제학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:11:00 |
|
분석(1)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:07:00 |
|
분석(2)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:07:00 |
|
단위테스트학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:10:00 |
| 화면구현 |
|
화면구성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
미리보기 |
00:04:00 |
|
리액트 컴포넌트학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:05:00 |
|
react-bootstrap(1)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:07:00 |
|
react-bootstrap(2) – 화면 그리기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:09:00 |
|
react-bootstrap(3) – 화면 이벤트(컴포넌트 상태 변경)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:06:00 |
|
getWeb3 – 2018-11-02 메타마스크 변경사항학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:07:00 |
|
베팅 함수 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:05:00 |
|
플립 함수 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:07:00 |
|
트랜잭션 목록 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:07:00 |
| 마무리 |
|
요약학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' |
|
00:06:00 |
