자바스크립트와 React.js로 블록체인 기반 애플리케이션 구현하기

09 Nov 2023

reactjs

블록체인 기술은 혁신적인 분산 원장 기술로서 다양한 산업 분야에서 활용되고 있습니다. 이번 블로그 포스트에서는 자바스크립트와 React.js를 사용하여 블록체인 기반 애플리케이션을 구현하는 방법에 대해 알아보겠습니다.

1. 블록체인 개념 이해하기

1.1 블록체인이란?

블록체인은 거래 내역이 연속된 블록 형태로 저장되는 분산 원장 기술입니다. 각각의 블록은 이전 블록과 연결되어 있으며, 공개적이고 불변성을 가지고 있습니다. 이를 통해 중앙 기관이나 중개자 없이 신뢰성 있는 거래를 보장할 수 있습니다.

1.2 블록체인 구조

각 블록은 해시 값, 이전 블록의 해시 값, 타임스탬프, 거래 내역 등의 정보를 포함하고 있습니다. 블록체인은 이러한 블록들의 연결로 구성되며, 변경되지 않기 위해 암호화 기법과 합의 알고리즘을 사용합니다.

2. 블록체인 애플리케이션 개발 환경 설정

2.1 자바스크립트 환경 설정

블록체인 애플리케이션을 개발하기 위해 먼저 자바스크립트 개발 환경을 설정해야 합니다. Node.js와 npm을 설치한 후, 프로젝트 폴더를 생성하고 필요한 패키지를 설치합니다.

npm init -y
npm install web3
npm install truffle

2.2 React.js 환경 설정

React.js를 사용하여 사용자 인터페이스를 개발할 수 있습니다. React.js 프로젝트를 생성하기 위해 아래 명령어를 실행합니다.

npx create-react-app my-app
cd my-app

3. 스마트 계약 작성하기

스마트 계약은 블록체인 상에서 실행되는 프로그램입니다. Solidity 언어를 사용하여 스마트 계약을 작성할 수 있습니다. 먼저 스마트 계약을 저장할 Contracts 폴더를 생성하고, MyContract.sol 파일을 생성합니다.

pragma solidity ^0.5.0;

contract MyContract {
  string public message;

  constructor() public {
    message = "Hello, world!";
  }

  function setMessage(string memory newMessage) public {
    message = newMessage;
  }
}

4. 웹 인터페이스 개발하기

4.1 React.js 컴포넌트 작성

React.js를 사용하여 스마트 계약과 상호작용할 수 있는 웹 인터페이스를 개발합니다. MyComponent.js 파일을 생성하고 아래와 같이 작성합니다.

import React, { useState, useEffect } from 'react';
import MyContract from './contracts/MyContract.json';
import getWeb3 from './getWeb3';

const MyComponent = () => {
  const [web3, setWeb3] = useState(null);
  const [contract, setContract] = useState(null);
  const [message, setMessage] = useState('');

  useEffect(() => {
    const init = async () => {
      const web3 = await getWeb3();
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = MyContract.networks[networkId];
      const contractInstance = new web3.eth.Contract(
        MyContract.abi,
        deployedNetwork && deployedNetwork.address
      );

      setWeb3(web3);
      setContract(contractInstance);
      refreshMessage(contractInstance);
    };

    init();
  }, [contract]);

  const refreshMessage = async (contract) => {
    const message = await contract.methods.message().call();
    setMessage(message);
  };

  const updateMessage = async (newMessage) => {
    await contract.methods.setMessage(newMessage).send({ from: web3.eth.defaultAccount });
    refreshMessage(contract);
  };

  return (
    <div>
      <h1>{message}</h1>
      <input type="text" onChange={(e) => setMessage(e.target.value)} />
      <button onClick={() => updateMessage(message)}>Update Message</button>
    </div>
  );
};

export default MyComponent;

4.2 컴포넌트 렌더링

src/App.js 파일을 아래와 같이 수정하여 MyComponent를 렌더링합니다.

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div>
      <h1>블록체인 애플리케이션</h1>
      <MyComponent />
    </div>
  );
};

export default App;

5. 애플리케이션 실행하기

블록체인 애플리케이션을 실행하기 위해 아래 명령어를 실행합니다.

npm start

애플리케이션이 성공적으로 실행되면, 브라우저에서 http://localhost:3000을 열어 애플리케이션을 확인할 수 있습니다.

마치며

이번 포스트에서는 자바스크립트와 React.js를 사용하여 블록체인 기반 애플리케이션을 구현하는 방법에 대해 알아보았습니다. 블록체인 기술의 발전은 분산된 개념과 신뢰성 있는 거래를 가능하게 해 주는데, 이는 개인과 기업의 데이터 보안과 신뢰성을 증진시킬 수 있는 많은 장점을 제공합니다. 앞으로 더 많은 분야에서 블록체인 기술을 활용한 혁신적인 애플리케이션이 개발될 것으로 기대해 봅니다.

참고 자료: