이더리움 Dapp 프레임워크인 트러플과 리액트 박스를 활용하여 이더리움 Dapp을 구현하는 방법을 알아봅니다. 자바스크립트로 구현하는 프론트엔드와 이더리움 스마트 컨트랙트가 어떻게 결합되어 애플리케이션이 되는지 학습하게 됩니다.
리액트로 구현하는 이더리움 Dapp
이더리움은 현재 가장 많이 활용되는 블록체인 애플리케이션 플랫폼입니다. 특히 자바스크립트 친화적인 Dapp 개발환경을 가지고 있기 때문에 자바스크립트 기술에 익숙한 개발자들은 어렵지 않게 접근할 수 있는 장점도 있습니다. 이 강좌는 트러플 공식 패키지인 리액트 박스를 사용해서 이더리움 Dapp – 동전 던지기 게임을 만들어 볼 것입니다. 솔리디티로 스마트 컨트랙트를 작성하고, 리액트로 화면개발을 해보면서 이더리움 Dapp이 어떻게 구현되는지 이해할 수 있는 유익한 시간이 될 것입니다.
[변경공지]
최근 Truffle이 버전 5로 업그레이드 되면서 크고 작은 변경이 발생하였습니다. 실습에 사용된 예제를 이에 맞추어 Github에 올렸습니다. 참고하시기 바랍니다.
학습 목표
이더리움 기반의 간단한 프론트 엔드 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 |
강좌 퀄리티가 좋습니다.
이더리움 애플리케이션은 말로만 들었는데 이 강좌를 들어보니 이제 좀 알 것 같습니다.
제가 자바스크립트 쪽을 그렇게 잘 아는 편은 아니라서 그런지 몰라도 어려운 부분이 좀 있네요. 특히 리액트 부분은 다른 강좌를 수강하든지 해야 할 듯… 하지만 리액트 맛보기로는 충분하다는 느낌이 듭니다. PPT도 시간이 많이 들었을 것 같은데 잘 구성한 것 같습니다. 암튼 가성비 좋은 강좌였습니다.
추천합니다.
개념 위주, 중급 레벨의 강좌네요.
후반부 수강중입니다.
전반부 트러플-스마트 컨트랙트 부분은 약간 생소하지만 들을만 합니다.
특히 단위테스트의 중요성을 크게 생각하지 않았는데 그 의미를 다시 배울 수 있었네요.
어느 정도 배경지식이 있어야 하는 중급 레벨이라 개인적으로 따로 찾아볼 부분이 있는 것 같네요.
화면구현 부분은 자바스크립트 관련 내용인데… 잠깐 보니 리액트 기본지식만 가지고 있어도
금방 따라갈 수 있어서 다행입니다. 무엇보다도 스마트컨트랙트와 리액트 프론트 엔드 자바스크립트
라이브러리를 어떻게 결합할 수 있는지 잘 설명되어 있어서 그 동안 궁금했던 점들이 많이 해소되었습니다.
다음 강좌도 기대해봅니다.