React + Web3로 만든 나만의 블록체인 지갑 만들기

가상화폐를 거래하기 위해서는 블록체인 지갑이 필요합니다. 보통은 Metamask나 Kaikas 같은 앱 서비스를 이용합니다.

 

이런 앱 서비스를 이용하는 것도 좋지만, React + Web3.js를 활용하면 나만의 웹 지갑을 만들 수 있습니다. 

 

한번 간단하게 만들어 보겠습니다.

1. 프로젝트 개요

이 프로젝트는 다음 기능을 제공합니다:

• 기존 지갑 가져오기 (프라이빗 키 입력)
• 새로운 지갑 주소/키로 로그인
• 지갑 잔액 확인
• 코인 송금
• 프라이빗 키 복사
• 트랜잭션 해시 확인

네트워크는 **Kaia(Klaytn 기반)**의 Kairos 테스트넷을 사용하고 있으며, 실제 코인 송금이 아닌 테스트 용도입니다.

 

2.  사용 기술 

• React: 사용자 인터페이스 구성
• Web3.js: 블록체인과의 통신
• useState, useEffect: React 훅 사용
• KAIA Testnet RPC: 테스트넷 접속

3. Web3.js란?

Web3.js는 Ethereum(이더리움) 기반의 블록체인과 상호작용할 수 있도록 도와주는 JavaScript 라이브러리입니다.

• 지갑 주소 생성 및 관리 (프라이빗 키로 지갑 가져오기 등)
• 블록체인 잔액 확인
• 트랜잭션(송금) 보내기
• 스마트 컨트랙트와 상호작용

3. Web3 사용법

(1) Web3.js 설치 방법 : npm install web3

(2) 다운로드한 웹 3을 임포트 해줍니다.

 

(3) 네트워크(RPC) 연결해 줍니다.

 

(4) 주소와 프라이빗키로 지갑을 설정합니다.

 

(5) 잔액 확인 기능을 만들 수 있습니다.

 

(6) 송금기능을 만들 수 있습니다.

 

송금 시 트랜잭션을 만들고 서명한 후, 네트워크로 전송합니다. 

 

4. 마무리

이렇게 React와 Web3.js만으로도 개인용 블록체인 지갑 페이지를 만들 수 있습니다. 다만 주의하실 점은 개인키의 보안에 꼭 신경 써 주셔야 합니다. 개인 키가 유출되면 지갑의 모든 기능을 다른 사람이 쓸 수 있게 되고, 중앙화되어 있지 않기에 해킹 피해는 복구가 불가능합니다.