블록체인 인 액션 Ch.4-1

< 스마트 컨트랙트에서 Dapp으로 >

Dapp 스택

Dapp : 블록체인 함수를 호출하는 탈중앙화 스마트 컨트랙트 로직이 포함된 web/app

• 탈중앙화 애플리케이션 : 웹 / 엔터프라이즈 application
• 가상머신 샌드박스상의 app 로직 : 애플리케이션 로직을 실행하는 환경 구현
  • 참여자 어카운드
• 블록체인 프로토콜 구현 : 트랜잭션과 블록 합의 같은 블록체인 기능 구현
• NW과 Operating 시스템
• 컴퓨터 시스템 HW

Truffle을 사용한 Dapp 개발

Truffle : 통합 Dapp 개발환경과 테스팅 프레임워크를 제공하는 도구
(이더리움 기반 종단간 Dapp 개발)

• truffle init : Dapp을 위한 템플릿 (기본 디렉터리 구조) 생성
• truffle compile : 스마트 컨트랙트 컴파일, 배포
• truffle develop : 콘솔에서 테스트하기 위한 개인 블록체인 론칭
• truffle migrate : 스마트 컨트랙트 배포를 위한 마이그레이션 스크립트 실행
• truffle console : Dapp UI 없이 테스팅하기 위한 커맨드 라인 인터페이스를 트러플에 오픈
• tuffle test : 배포된 컨트랙트 테스팅

현재 나의 버전은 이러하다
(여기서 처음보는 가나쉬는 테스트 체인이다)

실습을 위한 작업 list

1. 로컬 블록체인 레이어 설치
2. 스마트 컨트랙 개발 및 배포
3. 웹 앱 UI 개발
4. 웹 서버 환경 설정, UI와 스마트 컨트랙트 레이어 연결하는 결합 코드 개발

tip. Dapp 개발 시 디렉토리 관리하는 법 :

• Counter-dapp
  • counter-contract : 스마트 컨트랙트 관련 파일
  • counter-app : 웹 앱과 관련된 파일

👍🏻 로컬 블록체인 레이어 설치 : 가나쉬 테스트 체인 설치

• 가나쉬 : 트러플 스위트의 테스트 블록체인
  • 10개의 테스트 account 제공
  • 각 account : 100ETH 보유

✌🏻 스마트 컨트랙트 개발 및 배포

• 이전에 실습하였던 투표 문제 스마트 컨트랙트에서, 투표 단계의 변화는 체인 외부의 기관이 관리한다고 가정.

1. truffle init을 통해 표준화된 디렉터리 구조 만들기

-> dir 결과 :

• contracts : 스마트 컨트랙트를 위한 솔리디티 소스 파일
• migrations : 트러플이 스마트 컨트랙 배포를 위해 사용하는 마이그레이션 시스템. 개발 중인 스마트 컨트랙의 변화를 관리하는 JS 스크립트
• test : 스마트 컨트랙트를 위한 JS와 솔리디티 테스트
• truffle-config.js : 트러플 설정 파일 (블록체인 네트워크 정보 포함)

2. 스마트 컨트랙트 추가 및 컴파일

Ballot.sol을 ballot-contract의 contracts 파일에 저장한 뒤,
ballot-contract 폴더에서 truffle compile 진행

• build/contracts 디렉터리에 생성된 JSON 파일 : 웹 앱에서의 스마트 컨트랙트 함수 호출과 블록체인 서버 모듈 간의 데이터 송신을 위한 interface로 사용
• 이러한 스마트 컨트랙트 JSON 파일을 ABI (Application Binary Interface) 라고 부른다.

3. 블록체인 네트워크 설정
truffle-config.js는 컨트랙트를 배포할 테스트 블록체인을 설정하는 파일로, 웹 앱을 스마트 컨트랙트로 연결하기 위한 RPC 포트 설정하는 파일

• 테스트 블록체인을 위해 localhost 사용
• port 7545에 바인딩
• 네트워크 ID 5777로 설정 (이더리움 메인넷은 1)
  (localhost와 port 번호는 가나쉬를 위한 표준 설정)

truffle-config.js 소스코드

4. 스마트 컨트랙트 배포

• migration 디렉토리에 2_deploy_contract.js라는 Ballot 스마트 컨트랙트 배포 스크립트를 생성

contract.js 소스코드

• 배포해야할 스마트 컨트랙트 명시

• 배포 시 생성자 constructor에게 전달할 파라미터 값 입력

• 이 배포 스크립트를 통해 여러 스마트 컨트랙트를 동시에 배포할 수 있다.

• migration 디렉터리에 이미 존재하던 1initial 파일은 Migration.sol을 배포하기 위한 스크립트이고, 파일 앞의 1, 2_ 등은 변경하면 안되는 점 주의!

• 가나쉬 테스트 체인에 컨트랙트 배포하기
  truffle migrate --reset : Migration.sol을 포함한 모든 컨트랙트 재배포
  (하지만 reset 옵션은 테스팅 상황이 아닐 경우 사용하면 안된다!! production 환경에서는 이미 배포한 컨트랙트는 변조 불가하기 때문!)

배포 성공 확인
배포시 사용한 이더는 가니쉬의 첫번째 계정의 balance 양이 줄어듦을 통해서도 확인할 수 있다!

👌🏻 웹 앱 UI 개발 : 웹 앱 개발하고 설정하기

package.json 소스코드

• index.js : 서버를 위한 구동 스크립트 (웹 애플리케이션 설정)

  • request(), response(), Node.js 서버 포트 번호 등 설정
  • Dapp을 위한 디폴트 실행 파일

• package.json : 서버 디펜던시

• express : Node.js 서버에 많이 쓰는 웹 애플리케이션 framework

• 블록체인 노드 = 노드 서버 / 웹 서버 = Node.js 서버

index.js 소스코드

index.js 설정까지 모두 마친 후,
교재에서 제공해주는 src 폴더를 다운 받아 기본적인 웹 앱 client 설정을 마무리한다.
ballot-app 폴더에도 npm install 해준 후, npm start 을 실행하고,
크롬에서 localhost:3000 에 접속하면! 웹이 정상 실행된다

-> index.js 파일에서 설정한 포트 3000번에 app.js를 론칭하여 입력값을 대기하도록 만든 것

메타마스크 지갑 설치하기

🖖🏻