자바스크립트로 Zeit Now를 활용한 블록체인 애플리케이션 개발하기

10 Nov 2023

javascript

소개

블록체인 기술은 현재 많은 분야에서 활용되고 있는데, 이 중에서도 블록체인 애플리케이션 개발은 매우 인기가 있습니다. 이번에는 자바스크립트와 Zeit Now를 활용하여 간단한 블록체인 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.

준비물

Node.js 및 npm 설치
Zeit Now 계정

개발환경 설정

프로젝트 폴더를 생성하고, 해당 폴더에서 터미널을 엽니다.
npm init 명령어를 실행하여 프로젝트를 초기화합니다.
필요한 패키지를 설치하기 위해 다음 명령어를 실행합니다.

npm install web3 truffle-hdwallet-provider

Zeit Now CLI를 설치하기 위해 다음 명령어를 실행합니다.

npm install -g now

스마트 컨트랙트 개발

contracts 폴더를 생성하고, 그 안에 스마트 컨트랙트 파일을 생성합니다. 예를 들어, SimpleContract.sol 파일을 생성합니다.

pragma solidity ^0.5.0;

contract SimpleContract {
    uint public value;

    function setValue(uint _value) public {
        value = _value;
    }
}

truffle-config.js 파일을 프로젝트 폴더에 생성하고, 다음과 같이 설정합니다.

module.exports = {
  networks: {
    development: {
      host: "localhost",
      port: 8545,
      network_id: "*" // Match any network id
    }
  }
};

터미널에서 다음 명령어를 실행하여 스마트 컨트랙트를 컴파일합니다.

truffle compile

다음 명령어를 실행하여 스마트 컨트랙트를 배포합니다.

truffle migrate --network development

프론트엔드 개발

src 폴더를 생성하고, 그 안에 index.html 파일을 생성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blockchain Application</title>
</head>
<body>
    <h1>Simple Blockchain Application</h1>
    <input type="number" id="valueInput">
    <button onclick="setValue()">Set Value</button>

    <script src="app.js"></script>
</body>
</html>

app.js 파일을 생성하고, 다음과 같이 작성합니다.

import Web3 from 'web3';

const web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));

const contractAddress = '0x...'; // 배포된 스마트 컨트랙트 주소
const contractAbi = [...]; // 스마트 컨트랙트 ABI

const contract = new web3.eth.Contract(contractAbi, contractAddress);

async function setValue() {
    const inputValue = document.getElementById('valueInput').value;
    await web3.eth.requestAccounts();
    await contract.methods.setValue(inputValue).send({ from: web3.eth.defaultAccount });
}

Zeit Now를 활용한 배포

now.json 파일을 프로젝트 폴더에 생성하고, 다음과 같이 설정합니다.

{
    "version": 2,
    "builds": [{ "src": "*", "use": "@now/static" }],
    "routes": [{ "src": "/(.*)", "dest": "/" }]
}

터미널에서 다음 명령어를 실행하여 애플리케이션을 배포합니다.

now

배포된 애플리케이션의 URL로 접속하여 동작을 확인합니다.

마무리

이제 자바스크립트와 Zeit Now를 활용하여 간단한 블록체인 애플리케이션을 개발하는 방법에 대해 알아보았습니다. 블록체인 기술은 계속해서 발전하고 있으며, 애플리케이션 개발에도 적용할 수 있는 다양한 가능성이 있습니다. 자세한 내용은 공식 문서를 참고하시기 바랍니다. #JavaScript #블록체인