이더리움 기반 Dapp 개발 연습 #9 (화면구현1)

- 이 Dapp의 화면을 구성하기 위해서 리액트의 부트스트랩을 사용할 것이다.

  화면구성에 대한 대략적인 그림은 다음과 같다.

 

- 프로젝트의 구조이다. public 폴더안에 index.html이 메인 홈페이지를 담당하는 html코드이고,

  src에 index.js가 리액트 관련 코드이다.

 

 

 

- 아래는 화면을 구성하는 코드의 예이다.

 

 

 

- 이제 react-bootstrap 모듈을 설치하자. 설치는 client 디렉토리에서 npm install react-bootstrap 명령어를 통해

  설치할 수 있다.

  이후 client/src 디렉토리에 bootstrap의 css와 fonts 파일들을 복사한다(링크).

  다음으로 App.js를 약간 수정해준다.

 

#App.js

import React, { Component } from "react";
import SimpleStorageContract from "./contracts/SimpleStorage.json";
import getWeb3 from "./getWeb3";

import "./App.css";

// 이미지 import
import logo from "./logo.svg";

class App extends Component {
  state = { storageValue: 0, web3: null, accounts: null, contract: null };

  componentDidMount = async () => {
    try {
      // Get network provider and web3 instance.
      const web3 = await getWeb3();

      // Use web3 to get the user's accounts.
      const accounts = await web3.eth.getAccounts();

      // Get the contract instance.
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = SimpleStorageContract.networks[networkId];
      const instance = new web3.eth.Contract(
        SimpleStorageContract.abi,
        deployedNetwork && deployedNetwork.address,
      );

      // Set web3, accounts, and contract to the state, and then proceed with an
      // example of interacting with the contract's methods.
      this.setState({ web3, accounts, contract: instance }, this.runExample);
    } catch (error) {
      // Catch any errors for any of the above operations.
      alert(
        `Failed to load web3, accounts, or contract. Check console for details.`,
      );
      console.error(error);
    }
  };

  runExample = async () => {
    const { accounts, contract } = this.state;

    // Stores a given value, 5 by default.
    await contract.methods.set(5).send({ from: accounts[0] });

    // Get the value from the contract to prove it worked.
    const response = await contract.methods.get().call();

    // Update state with the result.
    this.setState({ storageValue: response });
  };

  render() {
    if (!this.state.web3) {
      return <div>Loading Web3, accounts, and contract...</div>;
    }
    return (
      <div className="App">
        <header>
            <img src = {logo} className="App-logo"/>
            <h1>Hello, React!</h1>
        </header>
      </div>
    );
  }
}

export default App;

 

 

- 이제 개발용 웹서버 테스트를 위해 터미널에서 npm run start 명령어를 입력해준다.

 

 

- 정상적으로 작동하는 것을 확인하였다.

 

 

 

 

 

 

ref) https://www.inflearn.com/course/dapp/dashboard