스마트 계약 위에 간단한 DAPP를 구축하는 방법은 무엇입니까?

Truffle, Ganache 및 Metamask를 설치하여 Solidity Smart 계약으로 간단한 이더 리움 DAPP를 구축하고 테스트하십시오.

2025/07/10 16:50

개발 환경 설정

스마트 계약 위에 간단한 DAPP을 구축하기 위해 먼저 적절한 개발 환경을 구축해야합니다. 이더 리움 기반 개발을위한 가장 인기있는 도구 중 하나는 트러플 (Truffle)으로 스마트 계약을 컴파일, 배포 및 테스트하기위한 프레임 워크를 제공합니다.

• JavaScript 패키지를 관리하려면 Node.js 및 NPM을 설치하십시오
• npm install -g truffle 실행하여 전 세계 트러플 스위트를 설치하십시오.
• 프로젝트 디렉토리에서 truffle init 사용하여 새로운 프로젝트를 발판하십시오.

송로 버섯이 설치되면 테스트 목적으로 로컬 블록 체인도 필요합니다. Ganache는 이더 리움 네트워크를 로컬로 시뮬레이션하는 일반적으로 사용되는 도구입니다. Ganache를 다운로드하여 설치 한 다음 새 작업 공간을 시작하여 테스트 계정 및 개인 키를 생성하십시오.

또한, 탈 중앙화 된 애플리케이션과의 상호 작용을 허용하는 이더 리움 지갑 인 메타 마스크를 사용하여 브라우저를 블록 체인에 연결하십시오. 원활한 테스트를 위해 Ganache가 제공하는 로컬 네트워크를 메타 마스크에 추가하십시오.

기본 스마트 계약 작성

환경이 준비되었으므로 이제 기본적인 스마트 계약을 작성할 차례입니다. 견고성은 이더 리움 스마트 계약을 작성하는 데 사용되는 기본 언어입니다. Truffle이 생성 한 contracts 폴더 내부에서 새 .sol 파일을 만듭니다.

다음은 샘플 계약입니다.

 pragma solidity ^0.8.0; 계약 SimpleStorage {


uint storedData; function set(uint x) public { storedData = x; } function get() public view returns (uint) { return storedData; }
 }

이 계약은 변수 storedData 와 두 가지 함수를 정의합니다. 하나는 값을 업데이트하고 다른 하나는이를 검색합니다. Solidity 버전이 트러플 구성에 지정된 버전과 일치하는지 확인하십시오 .

계약서를 작성한 후 migrations 폴더에서 마이그레이션 스크립트를 만듭니다. 이 스크립트는 트러플에게 계약을 블록 체인에 배치하는 방법을 알려줍니다.

스마트 계약을 컴파일하고 배포합니다

스마트 계약서가 작성되면 다음 단계는 컴파일 및 배포하는 것입니다. 터미널에서 프로젝트 루트로 이동하여 실행하십시오.

• truffle compile - 이에도 리움 가상 머신 (EVM)이 읽을 수있는 바이트 코드로 견고성 코드를 컴파일합니다.
• truffle migrate - 이것은 Ganache가 관리하는 로컬 블록 체인에 계약을 배치합니다.

마이그레이션 명령을 실행하기 전에 가나슈가 실행되고 있는지 확인하십시오 . 성공적인 배포를 나타내는 트랜잭션 로그가 표시됩니다.

배포 후 콘솔에 인쇄 된 계약 주소에 주목하십시오. 이 주소는 나중에 프론트 엔드 애플리케이션을 스마트 계약에 연결할 때 사용됩니다.

또한 가나슈의 트랜잭션을 확인하거나 송로 버섯 콘솔을 사용하여 truffle console 을 사용하여 배포 된 계약과 수동으로 배치를 확인하여 배포를 확인할 수도 있습니다.

프론트 엔드 인터페이스 구축

DAPP의 프론트 엔드를 통해 사용자는 스마트 계약과 상호 작용할 수 있습니다. DAPP를 구축하기위한 공통 스택에는 UI의 React.js 및 블록 체인 상호 작용을위한 react.js 또는 ethers.js가 포함됩니다.

React 앱 생성으로 시작하십시오.

• npx create-react-app my-dapp 실행하여 새로운 React 프로젝트를 발판
• 프로젝트 디렉토리로 이동하여 npm install web3 또는 npm install ethers

다음으로 Smart Contract ABI (Application Binary Interface)를 통합하고 주소를 프론트 엔드에 통합하십시오. ABI는 컴파일 중에 자동으로 생성되며 build/contracts 디렉토리에서 찾을 수 있습니다.

React 구성 요소에서 Web3을 가져 와서 사용자의 지갑에 연결을 인스턴스화합니다 (예 : Metamask) :

 import Web3 from 'web3'; const web3 = new Web3 (Window.Ethereum);
 Await Window.Ethereum.enable ();

그런 다음 ABI 및 계약 주소를 사용하여 계약 인스턴스를 만듭니다.

 const contractInstance = new web3.eth.Contract(abi, contractAddress);

이 설정을 사용하면 이제 set 호출하여 버튼 핸들러 내에서 스마트 계약에서 기능을 get 화면에 결과를 표시 할 수 있습니다.

프론트 엔드를 스마트 계약에 연결합니다

계약 인스턴스가 생성되면 사용자가 브라우저를 통해 직접 상호 작용할 수있는 기능을 구현할 수 있습니다.

예를 들어, get 기능을 호출하려면 다음과 같습니다.

 contractInstance.methods.get().call()
 .then(result => console.log(result));

set 함수를 사용하여 트랜잭션을 보내려면 :

 contractInstance.methods.set(42).send({ from: accountAddress })
 .on('transactionHash', hash => console.log(hash));

트랜잭션을 수행하기 전에 메타 마스크가 연결되고 잠금 해제되었는지 확인하십시오 . 또한 사용자 경험을 향상시키기 위해 오류를 우아하게 처리하십시오.

블록 체인에 저장된 현재 값을 반영하도록 UI 구성 요소를 업데이트하고 새 값을 설정하기위한 입력 필드를 허용하십시오. 이것은 DAPP에 대한 완전히 기능적인 인터페이스를 만듭니다.

npm start 으로 React 앱을 실행하고 버튼과 상호 작용하여 Ganache 및 브라우저 콘솔의 변경 사항을 관찰하여 전체 흐름을 테스트하십시오.

자주 묻는 질문

DAPP와 일반 웹 앱의 차이점은 무엇입니까?

DAPP (분산 응용 프로그램)는 블록 체인 네트워크에서 작동하며 백엔드 로직을 위해 스마트 계약을 사용하는 반면 일반 웹 앱은 중앙 서버에 의존합니다. DAPP는 분산 된 특성으로 인해 투명성, 불변성 및 검열 저항을 제공합니다 .

현지에서 스마트 계약을 배치 할 때 가스 수수료를 지불해야합니까?

아니요, 가나슈와 같은 로컬 블록 체인을 사용할 때 가스 요금이 시뮬레이션되며 실제 에테르가 필요하지 않습니다 . 거래는 실제 비용없이 즉시 처리되므로 테스트에 이상적입니다.

DAPP의 프론트 엔드에 반응 외에 다른 프레임 워크를 사용할 수 있습니까?

예, Vue.js, Angular 또는 일반 HTML/CSS/JavaScript와 같은 프론트 엔드 프레임 워크를 사용할 수 있습니다. 키는 Web3 공급자를 통합하고 스마트 계약과 올바르게 상호 작용하는 것입니다 .

로컬 블록 체인 대신 DAPP를 TestNet에 배포 할 수 있습니까?

예, 광범위한 테스트를 위해 Rinkeby, Ropsten 또는 Goerli 와 같은 네트워크에 배포 할 수 있습니다. 해당 네트워크와 관련된 수도꼭지에서 얻을 수있는 테스트 에테르가 필요합니다. 트러플 구성에 올바른 네트워크 설정과 니모닉이 포함되어 있는지 확인하십시오 .