안녕하세요. Ethereum Dapp개발을 위한 truffle 튜토리얼 중 pet-shop 튜토리얼을 통해 로컬 개발환경 구성과 실행 테스트, 명령어 실행은 물론이고 스마트 컨트랙트 개발, 테스트, 마이그레이션을 경험해 볼수 있습니다 또한 nodejs 를 이용해서 웹으로 web3 클라이언트로 블록체인과 통신하고 트렌젝션 처리를위해 웹 브라우져를 통해 Metamask를 구동하고 거래를 처리해 봄으로서 Dapp서비스 개발의 전체적인 흐름과 개발 방법을 경험해볼수 있는 좋은 예입니다 (먼저, 충실히 튜토리얼을 진행해보고 이후 기본 기능에서 점차적으로 확장해가면서 기능을 추가해 볼 계획입니다) Pet Shop 튜토리얼의 대상 - Pet shop의 입양(Adoption) 추적 시스템 추축 과정 안내를 목표로 합니다 - Ethereum과 스마트 계약 대한 기본적인 지식과 HTML 및 JavaScript에 대한 지식이 있지만 Dapp에 익숙하지 않은 개발자를 대상으로 합니다 Pet Shop 튜토리얼 요건정의 - 고객은 애완동물의 입양처리의 효과적인 방법으로써 Ethereum 사용에 관심을 가지고 있습니다 - 한번에 16마리의 애완동물을 관리하기 위한 공간을 보유하고 있으며 - 각 애완동물에 대한 정보 데이터 베이스를 보유하고 있습니다 - Pet Shop에서 입양되는 애완동물과 Ethereum 주소(Address)와 연관시키는 Dapp 구현을 목표로 하며 - 기본 웹사이트의 구조와 Style을 제공합니다 - 프론트엔드 로직과 스마트 계약을 작성하면 완성되는 형식으로 구성되어 있습니다 Pet Shop 튜토리얼 아키텍처 ![pst001.jpeg](https://steemitimages.com/DQmZPP4b3NV2qfxgXRQFRpGd7cDY83wM5G4H1XaefNudJNe/pst001.jpeg) 4가지의 주요 기능으로 구성되며 순차적으로 하나씩 살펴 보겠습니다 튜토리얼 순서 1. 개발 환경 설정 2. Truffle Box를 사용하여 Truffle 프로젝트 만들기 3. Smart Contract 작성하기 4. Smart Contract 컴파일 및 마이그레이션 5. Smart Contract 테스트 6. Smart Contract와 상호 작용하는 사용자 인터페이스 만들기 7. 브라우저에서 dapp과 상호 작용 (MacOS를 기준으로 작성합니다) ## 1. 개발 환경 설정 먼저 Truffle 설치 전에 아래 두가지를 설치합니다. - Node.js v6+ LTS and npm (comes with Node) - Git 완료 후 Truffle을 설치합니다. ![](https://steemitimages.com/DQmR56DMYNeq7oJqFYpPmrmoc2QbsityiUAdSGzEm1wXWgG/image.png)

:~ dongsik$ sudo npm install -g truffle
Password:
/Users/dongsik/.nvm/versions/node/v6.9.5/bin/truffle ->
/Users/dongsik/.nvm/versions/node/v6.9.5/lib/node_modules/truffle/build/cli.bundled.js
+ truffle@4.0.3
updated 1 package in 4.603s
:~ dongsik$

Truffle 설치 확인 ![](https://steemitimages.com/DQmZxx5BMR24TpExUycXnCPXrj8THbtEaVhS3Tb2TQS1gHU/image.png) Ganache 설치 스마트 계약의 배포, 어플리케이션 개발, 테스트 실행에 사용할 Ethereum 개발을 위한 Personal 블록체인 http://truffleframework.com/ganache 로 이동하여 “Download” 버튼을 클릭하고, Ganache를 다운로드 및 설치합니다. ![](https://steemitimages.com/DQmeS5UqczfwnF9NYiQXbNi99hrtZB4nvQ3Pt56o5qFyxKz/image.png) 설치 후 Ganache를 실행하면 로컬 RPC 서버가 구동되며 테스트를 위한 10개의 Account가 만들어집니다. 우측 상단의 설정에서 IP 및 포트를 지정 할 수 있습니다. (자세한 사용방법은 사이트를 참조하세요) ![](https://steemitimages.com/DQmQ4ak1xBDkf5eyn3VaCrK2Znfo824gkg6WR3ZiwaHkyn7/image.png) ## 2. Truffle Box를 사용하여 Truffle 프로젝트 만들기 Truffle은 현재 디렉토리에서 초기화 되기 때문에 먼저 디렉토리를 하나 만들고 그 디렉토리로 이동합니다. ![](https://steemitimages.com/DQmaw8dho5eZiFc9aA4tn9UdXZRh58zDww3AfPBmFSsiZjp/image.png) Pet-shop 튜토리얼을 위한 Truffle Box가 만들어져 있으며, 기본 프로젝트 구조와 사용자 인터페이스 코드가 포함되어 있습니다. Truffle Box를 풀려면 Truffle unbox 명령을 사용하면 됩니다. ![](https://steemitimages.com/DQmQE4GJNTAV29AnSottLE96FKST5huyz2ooniAMXw8jbZY/image.png) 생성된 기본 Truffle 디렉토리 구조 및 파일 설명 contracts / : 스마트 계약을 위한 Solidity 소스 파일을 포함합니다. 해당 디렉토리에 Migrations.sol이라는 중요한 계약이 있습니다. 이 계약에 대해서는 나중에 설명합니다. Migrations / : Truffle은 스마트 컨트랙트 배포를 처리 하기 위해서 Migration시스템을 사용합니다. Migration은 변경 사항을 추적하는 추가적인 특별한 스마트 계약입니다. test / : 스마트 컨트랙트의 JavaScript 및 Solidity 테스트를 모두 포함합니다. truffle.js : Truffle 설정 파일 ![](https://steemitimages.com/DQmUkh8snfoYvq1B6qcNnZvzjaEE8LLLK6hzYsdKSJ9NBkC/image.png) ## 3. Smart Contract 작성하기 백-엔드 로직 및 스토리지 역할을하는 스마트 계약서를 작성하여 dapp을 시작해 봅니다. 첫 번째로, contracts > Adoption.sol 파일 추가 합니다. ![](https://steemitimages.com/DQmYiAHnkY7LQf3utovSCLWT6vxJYA35HS4QxPMdH7SyfbT/image.png) 심볼 (^)은 필요한 Solidity의 최소버전을 지정("표시된 버전 이상")하며, 명령문은 semicolons(;)로 끝납니다. Address라는 고유한 데이터 타입, 즉 Ethereum의 주소이며 20 bytes의 값으로 저장됩니다. ### 단일 변수 adopters 정의 Ethereum address의 배열. 배열은 하나의 유형(type)이 포함되며 고정 또는 가변 길이를 가질 수 있습니다. 이 경우 유형은 address 이며 배열의 크기는 16입니다. 또한 변수 adopters가 public임을 알 수 있습니다. Public 변수는 자동으로 getter 메소드가 가지지만, 이 경우 배열은 키가 필요하며 단일 값만 반환합니다. 나중에 UI에서 사용할 전체 배열을 반환하는 함수를 작성할 것입니다. ### 첫번째 함수 : Adopting a pet 사용자가 입양(Adoption) 요청을 할 수 있도록 허용합니다. Solidity에서는 함수 매개 변수와 출력 유형을 모두 지정 해야 합니다. 이 경우 petId (정수)를 가져 와서 정수를 반환합니다. PetId가 adopters 배열 범위 내에 있는지 확인합니다. Solidity에있는 배열은 0부터 인덱싱되므로 ID 값은 0에서 15 사이 여야합니다. ID가 범위 내에 있는지 확인하기 위해 require () 문을 사용합니다. ID가 범위 내에 있으면 우리는 adopters 배열에 호출 한 주소를 추가합니다. 이 함수를 호출 한 사람 또는 스마트 계약자의 주소는 msg.sender로 표시됩니다. 마지막으로, 제공된 애완 동물을 확인하고 반환합니다. 마지막으로, 확인을 하기 위해 전달했던 petId를 반환합니다. ### 두번째 함수 : Retrieving the adopters 위에서 언급 한 것처럼 배열 getter는 주어진 키에서 하나의 값만 반환합니다. UI에서는 모든 애완 동물의 입양 상태를 업데이트해야하지만, 16 개의 API 호출을 하는 것은 이상적이지 않습니다. 다음 단계는 전체 배열을 반환하는 함수를 작성하는 것입니다. 위에서 추가 한 adopt () 함수 다음, 스마트 계약에 getAdopters () 함수를 추가합니다. adopters 들은 이미 선언 되었으므로 간단하게 반환 할 수 있습니다. 반환 유형 (이 경우, Adopters의 유형)을 Address [16]으로 지정해야합니다. ## 4. Smart Contract 컴파일 및 마이그레이션 앞에서 간단한 Smart contract를 작성했습니다. 다음으로 컴파일 및 마이그레이션을 해보겠습니다 트러플은 내장 개발 콘솔(Truffle Develop) 가지고 있는데 개발용 블럭체인을 생성하고 이를통해 컨트랙트 배포(deploy)테스트를 해볼수 있습니다 또한 콘솔에서 직접 트러플의 명령들을 실행하는 기능도 가지고 있습니다 ### 컴파일(compilation) Solidity는 컴파일 언어 입니다. 즉, Ethereum Virtual Machine(EVM)에서 실행하기 위해 bytecode로 컴파일 해야 합니다 인간이 읽을수있는 Solidity코드를 EVM이 이해할수있는 무엇인가로 변환 번역 한다고 생각하면 됩니다 ![](https://steemitimages.com/DQmVjwpyjeLdXFrfv53juPNQKtiZogp8KzDwRk2gGunh2e9/image.png) 컴파일이 완료되면 .build/contracts 폴더아래 compile 정보를 담은 개별 json 파일이 생성됩니다. ![](https://steemitimages.com/DQmam6yzkkStSvTy1CeiE9V8zkPuVs2LzsEtDWGwJm3W1fj/image.png) ### 마이그레이션(migration) 성공적으로 Smart Contract가 Compile되면 이제 블록체인으로 migrate 합니다. 마이그레인션(Migration)은 응용 프로그램의 계약 상태를 변경하여 한 상태에서 다음 상태로 이동시키는 전개 스크립트입니다. 첫 번째 마이그레이션의 경우 새 코드를 배포하는 것이지만 시간이 지남에 따라 다른 마이그레이션은 데이터를 이동하거나 계약을 새로운 것으로 대체 할 수 있습니다. migrations/ 폴더에 default로 1_initial_migration.js 파일이 존재합니다. ![](https://steemitimages.com/DQmcm5LbQ81JT82JecvNnr8sWWRwnT3Pj14zrKyc1dYSxjL/image.png) 이 파일은 이후 스마트 계약의 마이그레이션을 관찰하기 위해 Migrations.sol 컨트랙트의 배포를 관리하며, 나중에 변경되지 않은 컨트랙트를 이중 마이그레이션하지 않도록 보장합니다. (1_initial_migration.js 내용) ![](https://steemitimages.com/DQmTgHqbL8YeCXRRq3WY3xk5ZzUWWhySuqpmn5DQknfrQK7/image.png) 이제 Adoption 컨트랙트에 대한 마이그레이션을 작성합니다 1. migrations/ 디렉토리에 2_deploy_contracts.js 파일을 생성 2. 2_deploy_contracts.js에 아래 내용 입력 ![](https://steemitimages.com/DQmSWuMuT7chqUPM1VFFa4GnrF8eSgqn4dQ88PKLdT9Ntrz/image.png) 3. 컨트랙트를 블록체인으로 Migration하기 전에 블록체인을 실행 해야 합니다. 컨트랙트를 Deploy, 어플리케이션 개발, 테스트 실행을 위해 Private 블록체인으로 Ganache를 사용 합니다. (응용 프로그래밍에서 Ganache.app을 실행하면 됩니다.) ![](https://steemitimages.com/DQmRUKynH7eYZ2eDqhD2n6j3esBrupG5RqFWKx3NeAtRFir/image.png) truffle.js파일에서 Ganache를 설정합니다. 이때 설정정보에 networks에 development 를 추가하면 로컬 Ganache에 연결됩니다. ![](https://steemitimages.com/DQmPxNuw81ixY9XySotyYacG17LTVF2L6zMN9prdS6GJfss/image.png) 4. 이제 터미널에서 컨트랙트를 블록체인으로 migration 합니다 ![](https://steemitimages.com/DQmdjDPqZrMgMnec7CCVYnb5YkDYTufujcd8K41MMFJFWJC/image.png) 순서대로 실행중인 마이그레이션과 배포 된 각 계약의 블록 체인 주소를 볼 수 있습니다. (이때 주소가 다를 수 있습니다.) 5. Ganache를 통해 블록체인의 상태가 변경된 것을 확인합니다. 현재 블록이 이전에 0이었는데 블록이 4로 변경된것을 보여줍니다. 또한 첫 번째 계정의 원래 Ether는 100 이었지만 마이그레이션하는 데 드는 트랜잭션 비용으로 인해 이제는 더 낮습니다. 나중에 거래 비용(Transaction Costs)에 대해 자세히 이야기하겠습니다. ![](https://steemitimages.com/DQmbY2WkxLUFPFDDNp1EBHeiYkASZcwBpYoRv1yKzQM3oRT/image.png) 아래는 추가된 블록의 정보 ![](https://steemitimages.com/DQmWPTF3uQBDHDTnxab6tdfQ9qyaFtzE5SFWeV7fjrHesQn/image.png) 트렌젝션의 처리 정보 ![](https://steemitimages.com/DQmb8krWJNPTpVEJBY6ewWhjjR3LQyQ2iM4cc4V443Qui76/image.png) 이제 첫 번째 스마트 계약서를 작성하여 로컬로 실행중인 블록 체인에 배포했습니다. 이제 이 스마트 계약과 상호작용을 해 보겠습니다. (interact with) ## 5. Smart Contract 테스트 Truffle은 스마트 계약 테스트의 경우 매우 유연합니다. 테스트는 JavaScript 또는 Solidity로 작성 될 수 있습니다. 이 튜토리얼에서는 Solidity에서 테스트를 작성합니다. 1. test/ 디렉토리에 TestAdoption.sol 이라는 이름의 파일을 생성합니다. 2. TestAdoption.sol 파일에 아래의 내용을 추가합니다. ![](https://steemitimages.com/DQmR9JXz5H2pAzxCfP6wo7NDSYytP9yrUQHgHmKu2KVFaFz/image.png) Assert.sol : 테스트에 사용할 다양한 assertion 을 제공합니다. 테스트에서 assertion은 같음(equality), 같지 않음(inequality), 테스트를 통과했는지 실패했는지 반환하기 위한 공백과 같은 것들을 확인 합니다. DeployedAddresses.sol : 테스트를 실행할때 Truffle은 테스트중인 컨트랙트의 새로운 인스턴스를 블록체인에 배포합니다. 이 스마트 컨트랙트는 deploy된 컨트랙트의 주소를 가져옵니다. Adoption.sol : 테스트 하고자하는 스마트 컨트랙트
*주의 )처음의 두 import는 truffle 디렉토리가 아닌 전역 Truffle 파일입니다. 그래서 test/ 디렉토리 내부에 truffle 디렉토리를 볼수 없습니다.
그런 다음 테스트될 스마트 컨트랙트를 포함하는 contract-wide 변수를 정의하고 address를 가져오기 위해 DeployedAddresses 스마트 컨트랙트를 호출합니다. #### adopt() 함수 테스트 adopt() 함수를 테스트하기 위해 앞서 작성한 Adoption.sol 컨트랙트의 adopt()함수를 상기해보면 함수는 성공하면 입력된 petId를 리턴하는 것을 떠올려 보기 바랍니다. 테스트 케이스에서는 ID가 반환되었는지와 전달된 ID에 대해 adopt() 함수의 반환 값을 비교하여 올바른지 확인 할 수 있습니다. 1. adoption 선언 이후에 TestAdoption.sol 스마트 컨트랙트 안에 아래의 함수(testUserCanAdoptPet)를 추가합니다 ![](https://steemitimages.com/DQmcAwELmictHmw7bvEnSi5eL6jRJ1cu4hLXL8gnV8ckuJy/image.png) - 입력값(ID) 8로 Adoption.sol 스마트 컨트랙트의 adopt() 함수를 호출합니다. - 그런 다음 예상 값인 8을 역시 선언합니다. - 마지막으로 Assert.equal()에 실제값(returnedId), 예상값(expected) 및 실패 메시지(테스트가 통과하지 못하면 콘솔에 출력됨)를 전달합니다. #### 입양한 Pet의 소유자 검색 테스트 앞서 언급한 public 변수가 자동 getter 메소드를 가진다는것을 기억한다면, 위의 입양 테스트에서 저장한 주소를 검색할 수 있습니다. 저장된 데이터는 테스트 기간 동안 지속되기 때문에 앞서 테스트한 Pet의 adopt(8)의 입양 정보는 다른 테스트를 통해 검색 가능 합니다. 1. TestAdoption.sol에 이전에 추가한 함수(testUserCanAdoptPet)아래에 해당 함수(testGetAdopterAddressByPetId)를 추가합니다. ![](https://steemitimages.com/DQmTeBURZxQX17DTCa2tiffNtCaDsdFiw2um8Jwsiv7vkPT/image.png) TestAdoption 컨트랙트는 트랜잭션에 현재 계약의 주소를 가져 오는 계약 변수를 transaction에 전송하기 때문에 예상 주소로 this를 설정합니다. #### 모든 Pet의 소유자 검색 테스트 배열은 주어진 단일 키에 대한 단일 값만 반환하기 때문에 전체 배열을 위한 자체 getter를 만듭니다. 1. TestAdopter.sol에 앞서 추가된 함수아래 해당 함수(testGetAdopterAddressByPetIdInArray)를 추가합니다. ![](https://steemitimages.com/DQmXMpsQAairyFY3n6CKHhTwn9oE4fnE4NFCYyXUSBWq58u/image.png)
adopters의 memory 속성에 주의하기 바랍니다. 메모리 속성은 Solidity가 컨트랙트의 storage에 저장하는 대신 메모리에 값을 일시적으로 저장하도록 알립니다.
adopters 는 배열이고 애완동물 8을 입양한 첫 입양 테스트를 알기 때문에 테스트 컨트랙트 주소와 배열에서의 위치 8을 비교합니다. 전체 테스트 코드입니다. ![](https://steemitimages.com/DQmVgWN8UcKP6HfV1FkMF2a9EnM9y9BLYXgafPfiDSpPSjJ/image.png) #### 테스트 실행하기 이제 터미널로 돌아가서 test를 실행합니다. "truffle test"를 사용하며, 모든 테스트가 통과 되면 아래와 같은 출력을 확인 할수 있습니다. ![](https://steemitimages.com/DQmWUFAkzhrX2ZQ9c4KvxmPAfLdN9pQWyUJ8NT8xfr4LaRH/image.png) ## 6. Smart Contract와 상호 작용하는 사용자 인터페이스 만들기 이제 스마트 계약서를 작성하여 로컬 테스트 블록체인에 배포하고 콘솔을 통해 상호 작용할 수 있다는 것을 확인 했으므로 Pete가 Pet Shop에서 사용할 수 있는 UI를 만들겠습니다. 이 Pet shop Truffle Box에는 src/ 디렉토리에 프론트 엔드 용 코드가 포함되어 있습니다. 이미 제공되는 앱의 구조에 Ethereum의 고유한 기능을 채워 넣음으로써 프런트 엔드 개발을 완료합니다. ![](https://steemitimages.com/DQmVvqkescmiN4YRCkqzHLoDcMGWSmT5PqDB3DFevUtC4tf/image.png) #### web3 인스턴스 1.텍스트 편집기로 /src/js/app.js 파일을 엽니다. 2.파일을 살펴보면, 어플리케이션을 관리하고 init()에서 pet 데이터를 로드한 다음 initWeb3() 함수를 호출하는 전역 App 객체가 있다는 것을 알 수 있습니다. 실제 js에서는 아래 load 함수가 가장 아래 있지만 흐름 설명을 위해 먼저 기술합니다. ![](https://steemitimages.com/DQmVFaddMuuDsdHL3RyKy8wwSpdRsAdefN8NjNXydwxoyt3/image.png) init 함수 ![](https://steemitimages.com/DQmYd7imAvsNqYYZqYkU5e1GUwnCB7e3epZPgaXBFjyTeXL/image.png) Web3 JavaScript 라이브러리는 Ethereum 블록체인과 상호작용합니다. 사용자 계정을 검색하고 transaction을 보내고 스마트 컨트랙트와 상호작용하는 등의 작업을 수행할 수 있습니다. initWeb3 함수 ![](https://steemitimages.com/DQmeU3zCMhyj8SSU3VL8gaKr8u5DVMvGqoBf43HGgt67Hq4/image.png) - 먼저 이미 활성화된 web3 인스턴스가 있는지 체크합니다. (Mist나 MetaMask 확장된 크롬같은 Ethereum 브라우져는 자체 web3 인스턴스를 주입합니다.) - 만일 주입된 web3 인스턴스가 있다면, web3 Provider를 가져와서 web3 객체를 생성하는데 사용합니다. - 만일 주입된 web3 인스턴스가 없다면, 로컬 프로바이더를 기반으로 web3 객체를 생성합니다. #### 컨트랙트 인스턴스 1. /src/js/app.js 파일에서. initContract 안에서 멀티 라인 주석을 제거하고 아래와 같이 바꾸어 줍니다. ![](https://steemitimages.com/DQmW1AiWk9xurjmdrHdPfzC3GwPBuk77atVZXY5pFq5JieK/image.png) - 먼저 스마트 컨트랙트에 대한 아티팩트 파일을 검색합니다. 아티팩트는 배포 된 주소 및 ABI (Application Binary Interface)와 같은 컨트랙트에 대한 정보입니다. ABI는 변수, 함수 및 매개 변수를 포함하여 컨트랙트와 상호 작용하는 방법을 정의하는 JavaScript 객체입니다. - 일단 콜백에 아티팩트가 생기면 TruffleContract로 전달합니다. 이것은 우리가 상호작용 할 수 있는 컨트랙트의 인스턴스를 생성합니다. - 인스턴스화된 컨트랙트를 통해 web3를 설정할때 이전에 저장한 App.web3Provider 값을 이용해서 web3 provider를 설정합니다. - 그런 다음 이전 방문에서 이미 분양된 pet인 경우 앱의 markAdopted() 함수를 호출합니다. 스마트 컨트랙트의 데이터를 변경할때마다 UI를 업데이트 해야 함으로 분리된 함수로 캡슐화 했습니다. #### 입양된 Pet정보를 얻고 UI를 업데이트 1. /src/js/app.js 파일에서, markAdopted 에서 멀티 주석을 제거하고 아래 내용으로 대체합니다. ![](https://steemitimages.com/DQmVgNje9XS5a8qLrNox5D8qGnqnjgown9amUujivUhYtF6/image.png) - 배포 된 Adoption 컨트팩트에 액세스 한 다음 해당 인스턴스에서 getAdopters ()를 호출합니다. - 먼저 스마트 컨트랙트 호출의 외부에서 adoptionInstance 변수를 선언하여 처음 인스턴스를 검색 한 후에 인스턴스에 액세스 할 수 있습니다. - call ()을 사용하면 전체 트랜잭션을 보낼 필요없이 블록 체인에서 데이터를 읽을 수 있습니다. 즉, ether를 소비하지 않아도됩니다. - getAdopters ()를 호출 한 후 각 애완동물에 대해 주소(adress)가 저장되어 있는지 확인하기 위해 모든 항목을 반복합니다. 배열에는 주소 유형이 포함되어 있으므로 Ethereum은 16 개의 빈 주소로 배열을 초기화 되어 있습니다. 우리가 null이나 다른 거짓 값이 아닌 빈 주소(address) 문자열을 검사하는 이유입니다. - 해당 주소가 있는 petId가 발견되면 입양(adopt) 버튼을 비활성화하고 버튼 텍스트를 "Success"으로 변경하여 사용자가 몇 가지 피드백을 얻습니다. - 모든 오류는 콘솔에 기록(logging)됩니다. #### Adopt() 함수 다루기 1. /src/js/app.js 파일에서, handleAdopt 에서 멀티 주석을 제거하고 아래 내용으로 대체합니다. ![](https://steemitimages.com/DQmb3xC7XyKvugbgofPxYqKJ5nDnqaiJWGe8MSScLvqtPjx/image.png) - web3을 사용하여 사용자의 계정을 얻습니다. 오류 검사 후 콜백에서 첫 번째 계정을 선택합니다. - 거기에서 우리는 위에서 설명한대로 deploy 된 컨트랙트를 가져 와서 adoptionInstance에 인스턴스를 저장합니다. 이번에는 호출 대신 트랜잭션을 전송할 것입니다. 거래에는 "보낸 사람"주소가 필요하며 관련 비용이 있습니다. 이 비용은 ether로 지불하며 gas(게스)라고 합니다. 게스 비용은 계산을 수행하거나 스마트 계약서에 데이터를 저장하는 데 드는 수수료입니다. 우리는 애완 동물의 ID와 이전에 계정에 저장 한 계정 주소를 포함하는 객체 양쪽을 사용하여 adopt () 함수를 실행하여 트랜잭션을 보냅니다. - 트랜잭션을 전송 한 결과는 트랜잭션 객체입니다. 오류가 없으면 markAdopted () 함수를 호출하여 새로 저장된 데이터와 UI를 동기화합니다. ## 7. 브라우저에서 dapp과 상호 작용 이제 Dapp을 사용할 준비가 되었습니다. #### MetaMask 설치 및 설정 브라우저에서 dapp과 상호작용하기 가장 쉬운 방법은 Chrome과 Firefox 모두를 위한 브라우저 확장 프로그램 인 MetaMask를 사용하는 것입니다.
1.브라우저에 MetaMask를 설치합니다. 2.한번 설치되면, 주소 표시줄 옆에 MetaMask fox 아이콘을 볼수 있습니다. 아이콘을 클릭하면 다음 화면이 나타납니다. ![](https://steemitimages.com/DQmNmhs4vixJNG7KtkR5epTC7GK9WzhsvANogMZCdMvYrXn/image.png) 3.Privacy Notice를 수락하기위해서 Accept 버튼을 클릭합니다. 4.그러면 사용조건(Term of Use)가 나타나며, 읽은 다음 밑으로 스크롤링 하고 역시 Accept를 클릭합니다. ![](https://steemitimages.com/DQmfLGhYb1tB4zXEWr8CZkJhYdaSbJrK8S19dpAUy5Bexe3/image.png) 5.이제 초기 MetaMask 화면이 나타납니다. Import Existing DEN을 클릭합니다. ![](https://steemitimages.com/DQmcju6tH1cdHsx81GRBek88ZzFk1pGsSvUQRXagSKRzVkq/image.png) 6.Wallet Seed 라고 표시된 박스에 Ganache에 표시된 mnemonic을 입력합니다. ![](https://steemitimages.com/DQmTqCuqAi2FsK9SFQYcytZmXhDhfFevTU9DvJRpH3k7sdt/image.png) ![](https://steemitimages.com/DQmb11na3T9sDXs6MxtN3Wwf3fWCJGtYyES4aCK8CVrcszT/image.png) 아래에 비밀번호를 입력하고 OK를 클릭합니다. ![](https://steemitimages.com/DQmbvEHpLGbTeZcpJHMp7cNCMrDALZ5TxEguJDLQusbYhcX/image.png) 7.이제 MetaMask를 Ganache가 만든 블록체인에 연결합니다. "Main Network"가 표시된 메뉴를 클릭하고 Custom RPC를 선택하십시오. ![](https://steemitimages.com/DQmQFHJwcTZkBE6oM53F4h81UEPNH2rd8NqVad2zZgxNi5v/image.png) 8."New RPC URL"상자에 http://127.0.0.1:8545를 입력하고 저장을 클릭합니다. ![](https://steemitimages.com/DQmeuHRUD2ks7X6pJD1YeCFFBuMK4iFBqfda1aPmb91WPRM/image.png)
상단의 네트워크 이름이 “Private Network”으로 바뀝니다. 9.’Setting'옆에 있는 왼쪽 화살표를 클릭하여 페이지를 닫고 계정 페이지로 돌아갑니다. Truffle Develp에 의해 생성된 각 계정에는 100 ether가 주어집니다. 첫 번째 계정에서는 계약 자체가 배포 될 때와 테스트가 실행될 때 일부 가스가 사용 되었기 때문에 약간 더 적습니다. ![](https://steemitimages.com/DQmTnWxUU7EHPkrLPKEcVEiYZkwqFb9ws9qXx4nH1ExXLFv/image.png) 설정이 이제 완료 되었습니다. #### lite-server 설치 및 설정 이제 로컬 웹 서버를 시작하고 dapp를 사용할 수 있습니다. 정적 파일을 제공하기 위해 lite-server 라이브러리를 사용하고 있습니다. 이것은 pet-shop Truffle Box와 함께 제공되었지만 작동 방식을 살펴 보겠습니다. 1.텍스트 에디터로 bs-config.json 파일을 오픈 (프로젝트의 root 디렉토리에 있는) 하고 내용을 검사합니다. ![](https://steemitimages.com/DQmVXeeF3mQsYcv3dE1Refuaq94fcg1r1yfJZ3pjcK5875Y/image.png) lite-server에 우리의 기본 디렉토리에 포함시킬 파일을 알려줍니다. 웹 사이트 파일에는 ./src 디렉토리를, 컨트랙트 아티팩트에는 ./build/contracts 디렉토리를 추가합니다. 프로젝트의 루트 디렉토리에있는 package.json 파일의 scripts 객체에 dev 명령을 추가합니다. ![](https://steemitimages.com/DQmVUv6uF3R9pPGx8Enpie5Px3sZrKig7j6BokarfaM2m6w/image.png) ![](https://steemitimages.com/DQmbBwK4ijQTSLNet4H6zJGtEkcaMLK21We5ba3baGHpXyr/image.png) #### App 사용하기 1.로컬 웹 서버를 시작합니다. ![](https://steemitimages.com/DQmXnbxz9kscPP3RkD8qz9tSVvQ13dNhyP6MmhzMpWismj4/image.png) ![](https://steemitimages.com/DQmTJHaMR3mydd7C8eBHD5oucJmTN4PrVxJYwqd5P6iYTkv/image.png) dev 서버가 실행되고 dapp이 포함 된 새 브라우저 탭이 자동으로 열립니다. ![](https://steemitimages.com/DQmewFe3SFwa71Ee8jNa6T12ZYQDDkUEVq3qsv53jr1f34c/image.png) 2.dapp을 사용하기 위해 원하는 애완동물의 입양 버튼을 클릭합니다. 주) 크롬 브라우져에서 어떻게 다이렉트로 Metamask를 띄울수 있는지에 대한 질문에 대한 답입니다. Chrome 플러그인 Metamask는 브라우저에 전역 변수 web3을 삽입합니다. MetaMask가 설치되어 web3가 주입 된 브라우져 콘솔에서 web3을 타이핑하여 web3 객체를 볼 수 있습니다. MetaMask는 서버 측과 브라우저 인터페이스 간의 프록시입니다. 프로그램(Metamask)이 브라우저에로드 될 때만이 변수를 볼 수 있습니다. 아래글은 Metamask QnA에 올라온 글입니다. ![](https://steemitimages.com/DQmW9hkhTXZTgN81gHg9asYRCoixEnmNTg3hpJL9MNp5K82/image.png) 3.MetaMask를 통해 트랜잭션을 승인하라는 메시지가 자동으로 표시됩니다. SUBMIT을 클릭하여 트랜잭션을 승인합니다. ![](https://steemitimages.com/DQmbPeHddtwyzZ3XqS4nY5zd5hg1gykG9CdLDmVtyMZqwSJ/image.png) 4.채택 된 애완 동물의 변화 옆에있는 버튼이 "Success"이라고 표시됩니다. 애완 동물이 입양 되었으므로, 비 활성화됩니다. ![](https://steemitimages.com/DQmZDWCkzhfWPUXmohssdYUMsaPUHnf42vgaCosHQ5EEGH7/image.png) 그리고 MetaMask에서 트랜잭션이 나열된 것을 볼 수 있습니다 : ![](https://steemitimages.com/DQmTDVKbtmV4zkcpzweftr8Ee2hBsQGRQh6eWL38A6MshR5/image.png) #### Ganashe 트랜젝션 확인 ![](https://steemitimages.com/DQmTSJnYPJMSb4Kw2fmJjsuTo5WYDoqVjgWPGeJeHapNKa2/image.png) ![](https://steemitimages.com/DQmVSZ1Ny2KpndG3DZsTVbvfcVpTiNN1QZot5f2kazs3fz5/image.png) 지금까지 Truffle 프레임워크를 이용해서 App을 만들고 Metamask를 통해서 스마트 컨트랙트와 상호작용(Interacting) 해보는 튜토리얼을 해봤습니다. 간단한 샘플이긴하지만, 많은 Dapp들이 가져야하는 어플리케이션의 구조를 잘 설명하고 있다고 생각됩니다. 이 패턴을 통해 여러가지 목적하는 어플리케이션을 블록체인으로 구현하는 기본이 될수 있을거라고 생각합니다.