Web3 Development Environment Setup

Web3 개발자들이 자주 사용하는 필수 도구와 프레임워크들을 소개하고, 각각의 설치 및 셋업 과정을 안내해 드립니다. Nodit 튜토리얼을 시작하기 전에 필요한 개발 환경을 구축해보세요.

Integrated Development Environments (IDE)

Visual Studio Code(VS Code)

Visual Studio Code (VS Code)는 가볍고 강력한 오픈 소스 코드 편집기로, 다양한 프로그래밍 언어와 프레임워크를 지원합니다. Solidity와 같은 스마트 계약 언어를 위한 확장 프로그램을 통해 Web3 개발에도 적합한 환경을 제공하며, Web3 개발뿐만 아니라 프론트엔드, 백엔드, 데이터 분석 등 다양한 분야에서도 널리 사용되고 있습니다.

설치 방법
VS Code 공식 사이트에서 설치 파일을 다운로드하여 설치합니다.

편리한 개발과 원활한 튜토리얼 진행을 위해, 아래 확장 프로그램들은 함께 설치하시기를 권장드립니다.

  • Solidity: Solidity 코드 작성을 위한 지원
  • ESLint: Javascript 코드 품질 향상을 위한 린팅(오류 및 스타일 위반 추적)도구
  • GitLens: 소스 Repository인 Git 연동을 위한 확장 프로그램

Remix IDE

Remix IDE는 브라우저 기반의 통합 개발 환경(IDE)으로, 주로 Solidity를 사용한 스마트 계약 개발에 특화되어 있습니다. 사용자가 별도의 설치 없이 웹 브라우저에서 바로 접근할 수 있어, 언제 어디서나 스마트 계약을 작성, 컴파일, 배포할 수 있도록 도와주는 편리한 도구입니다.

사용 방법
Remix 공식 사이트에 접속하여 별도의 설치 없이 바로 사용할 수 있습니다.


Frameworks

Node.js & npm

대표적인 JavaScript 런타임 환경인 Node.js와, Node.js 생태계의 라이브러리 및 패키지를 관리 툴인 npm(Node Package Manager)을 설치하는 방법을 알아보겠습니다.

설치 방법

  • mac OS
    brew install node
    
  • Windows
    Node.js 공식 웹사이트에서 최신 버전의 설치 파일을 다운로드하고 설치합니다.
  • Linux(Ubuntu)
    sudo apt-get update
    sudo apt-get install nodejs npm
    
  • 추가적인 OS별 설치 방법은 Node.js 패키지 설치 페이지에서 확인할 수 있습니다.

설치가 완료 되었는지 확인하기 위해, 아래와 같이 버전을 확인하세요.

node -v
npm -v

React

React는 Web기반 오픈소스 JavaScript 라이브러리로, Web3 프로젝트의 DApp(Decentralized Application)의 프론트엔드를 구축하는 데 널리 사용됩니다. React는 컴포넌트 기반 아키텍처를 채택하여, 복잡한 웹 애플리케이션을 효율적으로 개발할 수 있도록 도와줍니다.

설치 방법

create-react-app 도구를 사용하여 React의 초기 설정을 빠르게 할 수 있습니다. 아래와 같이 create-react-app 를 설치하고 프로젝트를 생성합니다. 프로젝트 하위 src 폴더에서 컴포넌트를 작성할 수 있습니다.

React를 설치하기 전에 Node.js와 npm이 설치되어 있어야 합니다. (설치 방법은 위의 Node.js 섹션 참조)

npx create-react-app my-app
cd my-app
npm start

Blockchain Environments

Hardhat

Hardhat은 Solidity 개발을 위한 Ethereum 개발 환경으로, 실제 Ethereum 네트워크에 연동하지 않고도 로컬 환경에서 트랜잭션 및 스마트 컨트랙트를 테스트하고 배포할 수 있도록 도와주는 도구입니다. 다양한 플러그인을 제공하기 때문에 구현하고자 하는 Web3 어플리케이션에 맞는 개발환경을 설정할 수 있습니다.

Hardhat Setup (Typescript)페이지로 이동하여 자세한 Hardhat 설정 방법을 확인하세요.

Foundry

Foundry는 빠르고 효율적인 Solidity 개발 환경으로, 테스트, 배포, 스크립팅을 지원합니다. Rust 기반으로 설계되어 뛰어난 성능을 자랑하며, 스마트 컨트랙트 개발자들에게 널리 사용됩니다. Foundry는 다음과 같은 요소로 구성되어 있습니다.

  • Forge: Foundry의 핵심 컴포넌트로, 컴파일, 테스트, 배포를 관리합니다.
  • Cast: Ethereum 네트워크와 상호작용할 수 있는 CLI 도구입니다.
  • Anvil: 로컬 테스트 노드로, 트랜잭션 시뮬레이션과 테스트를 수행합니다.

설치 방법

curl -L https://foundry.paradigm.xyz | bash

Wallets

지갑 어플리케이션은 블록체인과 상호작용하기 위해 필요한 개인 키를 생성하고 안전하게 보관하는 역할을 수행합니다.

MetaMask

MetaMask는 대표적인 웹 기반의 지갑 어플리케이션으로서 편리한 인터페이스를 기반으로 Web3 어플리케이션에서 트랜잭션을 생성하거나 자산을 관리할 수 있도록 도와줍니다.

설치 방법
Metamask 공식 사이트에서 브라우저 확장 프로그램을 설치하세요. 현재 Chrome, Firefox, Brave, Edge를 지원합니다.

MetaMask를 설치하셨다면, 새로운 계정을 생성하고 니모닉 문구를 안전하게 백업하세요. 계정 생성이 완료되었다면 네트워크 메뉴에서 테스트하고자 하는 대상 체인 환경을 선택하거나 Custom RPC 메뉴를 통해 추가할 수 있습니다.


Block Explorer

블록체인 Explorer를 통해 특정 블록체인의 데이터를 조회하고, 트랜잭션, 주소, 블록 등의 정보를 확인할 수 있습니다. 다음은 Nodit에서 지원하는 체인별 대표 Explorer 목록입니다.

Ethereum - Etherscan

Etherscan은 Ethereum 네트워크에서 가장 널리 사용되는 블록체인 탐색기입니다. 트랜잭션, 스마트 계약, 주소, 토큰 등을 조회할 수 있으며, 다양한 고급 기능을 통해 네트워크의 상태와 활동을 분석할 수 있습니다.

Polygon - Polygonscan

Polygonscan은 Polygon 네트워크의 공식 블록체인 탐색기로, Etherscan과 유사한 기능을 제공합니다. Polygon에서 발생하는 트랜잭션, 블록, 토큰 거래 내역 등을 쉽게 검색할 수 있으며, 스마트 컨트랙트를 배포하고 검증할 수 있는 도구도 함께 제공합니다.

Arbitrum - Arbiscan

Arbiscan에서 Arbitrum의 트랜잭션 기록, 스마트 계약 활동, 블록 생성 내역 등을 실시간으로 확인할 수 있습니다.

Optimistic Etherscan은 Optimism 네트워크에 특화된 블록체인 탐색기로, Etherscan이 제공하는 익숙한 인터페이스와 기능을 제공합니다. Optimism의 트랜잭션, 블록, 스마트 계약을 탐색할 수 있으며, L2 솔루션으로서의 상태를 모니터링하는 데 유용합니다.

Aptos Explorer는 Aptos 네트워크의 공식 블록체인 탐색기입니다. 트랜잭션 내역, 계정 정보, 블록 생성 기록 등을 조회할 수 있습니다. Aptos Explorer는 Aptos의 독자적인 구조와 스마트 계약 활동을 모니터링할 수 있는 기능을 제공하여, Aptos 기반 애플리케이션 개발자들에게 유용한 정보를 제공합니다.