소개
비트코인의 출현은 디지털 화폐의 번영을 가져왔을 뿐만 아니라 분산형 네트워크 개발의 토대를 마련했습니다. 블록체인 분야의 급속한 발전은 계속해서 기술 인력의 관심을 끌고 있으며, 동시에 기술 인력 공급에 대한 수요도 더욱 강해지고 있습니다. 전통적인 프런트엔드 개발자가 이 분야를 탐색하면 기존의 기술적 이점을 활용할 수 있을 뿐만 아니라 경력의 지평도 확장할 수 있습니다. 이 기사는 DApp 개발의 핵심 기술과 혁신 전략에 특별히 초점을 맞춰 이러한 기술 혁신을 위한 실질적인 지침을 제공하는 것을 목표로 합니다.
분산형 네트워크의 새로운 시대
블록체인 시대의 핵심 기능은 분산화, 투명성, 변조 방지 및 스마트 계약 적용입니다.
분산화: 블록체인은 분산 원장 기술을 사용하여 단일 서버나 데이터베이스에 데이터를 집중시키는 대신 네트워크의 여러 노드에 데이터를 저장합니다. 즉, 단일 제어 지점이 없으므로 시스템의 공격 저항과 데이터 보안이 향상됩니다.
투명성 및 불변성: 블록체인의 모든 거래는 공개적이고 투명하며, 일단 기록되면 수정하거나 삭제할 수 없습니다. 이는 거래 추적성과 신뢰성을 보장합니다.
스마트 계약: 계약 조건을 자동으로 실행하는 프로그램으로, 블록체인에서 실행되며 중개자 없이 자동으로 거래를 처리하여 블록체인의 기능과 유연성을 크게 향상시킵니다.
Solidity
// SPDX-License-Identifier: MIT
pragma solidity ^ 0.8.0;
contract SimpleStorage {
uint StoreData; // 데이터를 저장할 부호 없는 정수를 정의합니다.
// 블록체인에 숫자를 저장하는 함수
function set(uint x) public {
storedData = x;
}
// 블록체인에 저장된 번호를 검색하는 함수
function get() public view returns (uint) {
return storedData;
}
}
이더리움은 비트코인 이후 또 다른 주요 블록체인 혁신입니다. 비트코인과 달리 이더리움은 디지털 통화일 뿐만 아니라 스마트 계약 및 분산 애플리케이션(DApp) 개발을 지원하는 플랫폼이기도 합니다. DApp은 기존 중앙 집중식 서버를 제거하고 사용자 상호 작용은 블록체인에서 직접 발생합니다. 이 모델은 데이터 보안, 사용자 개인 정보 보호, 분산화에 대한 새로운 관점은 물론 프런트 엔드 개발자에게 새로운 과제와 기회를 제공합니다.
분산형 애플리케이션의 아키텍처
전통적인 인터넷 애플리케이션 아키텍처는 독자에게 친숙해야 합니다. 온라인 쇼핑 웹사이트라고 가정하면, 사용자는 먼저 브라우저를 통해 프론트 엔드에서 제공하는 인터페이스에 접속하여 쇼핑 관련 작업을 수행하고, 사용자가 특정 제품 키워드를 검색하면 백엔드에서 해당 로직을 처리합니다. , 즉 프런트엔드의 요청에 응답하고, 데이터베이스를 검색한 후 필요한 데이터를 프런트엔드로 반환합니다. 데이터베이스는 모든 제품 정보 및 사용자 관련 정보(예: 장바구니 내용)를 포함하여 애플리케이션에 안정적인 저장 공간을 제공합니다.
블록체인을 기반으로 구축된 DApp은 기존 애플리케이션과 근본적으로 다르며, 가장 큰 차이점은 백엔드와 데이터베이스의 역할이 변화한다는 점입니다. 여기서 스마트 계약은 전통적인 백엔드 역할을 하며, 블록체인은 전통적인 데이터베이스를 대체하고 분산형 데이터 저장소를 제공합니다. 스마트 계약과 블록체인 간의 긴밀한 협력을 통해 데이터 저장 및 검색이 투명해지고 변조가 어려워집니다.
백엔드와 데이터베이스의 엄청난 변화에도 불구하고 분산형 애플리케이션의 프런트엔드는 기존 역할의 연속성을 유지해 왔습니다. 사용자 인터페이스는 여전히 애플리케이션과의 상호 작용을 위한 다리 역할을 하며, 트랜잭션 실행이든 데이터 요청 제출이든 사용자의 모든 작업은 프런트 엔드를 통해 스마트 계약으로 직접 전달됩니다. 이러한 스마트 계약은 전 세계적으로 분산된 블록체인 네트워크에 배포되고 실시간으로 상호 작용하여 각 거래 기록 및 계약 상태의 불변성과 개방성을 보장합니다.
실제로 프런트 엔드와 스마트 계약 간의 통신은 그림에 표시된 것보다 더 복잡하며, 다음 내용에서 이에 대해 자세히 설명하겠습니다.
동일: 사용자 인터페이스 개발
위의 내용을 바탕으로 웹 개발 경험이 있는 프런트 엔드 엔지니어의 경우 사용자 인터페이스 개발 기술을 이전할 수 있습니다. HTML, CSS 및 JavaScript와 같은 기본 기술은 DApp 개발 프로세스에서 계속 중요한 역할을 하며 최신 프런트 엔드 프레임워크 숙련도 React 또는 Vue에서는 사용자 친화적이고 대화형 DApp 인터페이스를 구축할 때 작업 효율성과 제품 품질을 크게 향상시킬 수도 있습니다.
투명성과 신뢰의 원칙을 바탕으로 많은 DApp은 프런트 엔드 코드를 오픈 소스로 제공하여 커뮤니티 구성원이 기여 및 코드 검토에 참여할 수 있도록 하여 애플리케이션의 품질, 보안 및 사용자 신뢰를 향상시킵니다. 예를 들어, 분산형 거래소 Uniswap의 사용자 인터페이스 창고https://github.com/Uniswap/interface, 개발자가 비즈니스 역량을 향상시키기 위한 학습 리소스로 사용할 수 있습니다.
그런데 저자는 최근 사용자 인터페이스 개발을 돕기 위해 생성적 AI를 활용하려고 시도했는데, 보다 일반적인 상호 작용 방법은 디자인 초안의 페이지 스크린샷을 업로드하거나 자연어를 통해 개발할 구성 요소를 설명하는 것입니다. 개인적인 경험에 관한 한 vercel이 개발되었습니다.v 0.dev기본적으로 정적 페이지의 콘텐츠 및 레이아웃 구현을 해결할 수 있지만, 스크린샷을 기반으로 코드를 생성하려면 여전히 세부적인 조정이 필요합니다. 전반적으로 생성 AI는 개발 효율성을 어느 정도 향상시킬 수 있습니다. 사용 중에는 AI가 인식하는 텍스트 내용의 정확성에 주의해야 하며, 사용 중에 저자는 때때로 디자인 초안과 불일치하는 것을 발견했습니다.
차이점: 인증 메커니즘과 데이터 읽기 및 쓰기
DApp에서는 비밀번호, 토큰과 같은 기존 인증 방법이 지갑 연결 및 디지털 서명으로 대체됩니다. 이를 위해서는 프런트 엔드 개발자가 사용자의 인증 메커니즘을 이해하고, 지갑과 상호 작용하는 기술을 숙달하고, 블록체인 네트워크에서 데이터를 읽고 쓰는 방법을 이해해야 합니다.
지갑 기술과 사용자 신원 인증
DApp에서는 사용자 신원 인증 및 관리 방법이 기존 웹사이트와 근본적으로 다릅니다. 이 프로세스는 기존의 사용자 이름과 비밀번호가 아닌 블록체인 지갑을 통해 구현되며 지갑 주소는 DApp에서 사용자의 고유 식별자 역할을 하며 사용자는 동일한 지갑 주소를 사용하여 여러 DApp과 상호 작용할 수 있습니다. 지갑에는 공개키와 개인키라는 한 쌍의 키가 포함되어 있습니다. 공개키(예: 지갑 주소)는 다른 사람과 공유하여 자금을 받을 수 있는 반면, 개인키는 기밀이므로 거래에 서명하고 소유권을 증명하는 데 사용됩니다. 자금의.
프런트 엔드 개발자는 애플리케이션이 사용자의 지갑을 식별하고 상호 작용할 수 있도록 DApp에 지갑 인터페이스를 통합합니다. 사용자가 DApp과 상호 작용하려고 하면 지갑을 통해 연결하라는 메시지가 표시됩니다. 지갑을 연결하려면 일반적으로 사용자가 해당 지갑 주소에 대한 개인 키를 소유하고 있음을 증명하는 메시지에 서명해야 합니다. MetaMask는 브라우저 플러그인으로 설치할 수 있는 가장 인기 있는 블록체인 지갑 중 하나입니다. MetaMask 또는 기타 지갑은 Ethers.js와 같은 JavaScript 라이브러리를 사용하여 DApp에 쉽게 통합될 수 있습니다. 또한 RainbowKit 및 Web3 Modal과 같은 도구는 구현하기 쉬운 통합 솔루션을 제공하여 다양한 주류 지갑의 연결 프로세스를 더욱 단순화합니다.
블록체인과의 데이터 상호작용
프론트 엔드 개발자는 fetch 또는 axios를 사용하여 API에 요청을 구성하고 보내는 프로세스에 익숙해야 하지만, 블록체인 개발에서는 특히 web3.js 또는 Ethers.js와 같은 라이브러리를 사용할 때 추가적인 학습이 필요합니다. . 자세히 소개하기 전에 가장 일반적으로 사용되는 두 가지 JavaScript 라이브러리인 web3.js와 Ethers.js를 비교해 보겠습니다.
전반적으로 web3.js는 오랜 존재감과 광범위한 사용으로 인해 더 큰 커뮤니티와 풍부한 리소스를 보유하고 있는 반면, Ethers.js는 현대적이고 가벼운 디자인과 깔끔한 API 디자인으로 인해 개발 추진력을 얻었습니다. 독자의 사랑을 받고 있습니다. 개발자는 프로젝트 요구 사항과 개인 선호도에 따라 적합한 JavaScript 라이브러리를 선택할 수 있습니다.
공급자와 서명자는 프런트엔드와 블록체인 간의 상호 작용에서 두 가지 핵심 개념이며 상호 작용할 때 서로 다른 역할을 합니다.
Provider는 블록체인 노드에 연결되어 블록체인 데이터를 읽을 수 있는 인터페이스입니다. 계좌 잔액, 거래 데이터, 스마트 계약 상태 등 블록체인의 상태를 얻을 수 있는 쿼리 창이라고 할 수 있습니다.
Solidity
// web2: API에 직접 GET 요청 보내기
const res = await axios.get('
autolink https://some-api.comautolink
');
// web3: 공급자를 통해 온체인 데이터를 읽습니다.
const provider = ethers.getDefaultProvider('homestead');
const balance = await provider.getBalance("ethers.eth"); // 계좌 잔액 읽기
console.log(balance: ${ethers.utils.formatEther(balance)} ETH); // 단위 변환
서명자는 거래를 수행하는 권한을 나타내며 거래를 보내는 데 필요한 개인 키를 보유하는 개체입니다. 간단히 말해서, Ether 코인을 보내거나 스마트 계약 방법을 실행하는 등 쓰기 작업을 수행해야 하는 경우 서명자가 필요합니다.
Solidity
// web2: API에 직접 POST 요청 보내기
const res = await axios.post('
autolink https://some-api.com/autolink
', { name: 'Satoshi' });
// web3: 서명자를 통한 서명 쓰기 작업
const signer = 공급자.getSigner(); // 서명자 가져오기
// 트랜잭션 객체를 구성하고 서명자를 통해 보냅니다.
const tx = await signer.sendTransaction({
to: "0x목적지 주소",
value: ethers.utils.parseEther("1.0")
});
console.log(transaction hash: ${tx.hash}); // 해시는 블록체인의 트랜잭션을 추적하는 데 사용될 수 있습니다.
신원 확인 메커니즘과 데이터 읽기 및 쓰기 외에도 프런트 엔드 개발자는 DApp 개발 중에 트랜잭션 수명 주기, 가스 요금 및 트랜잭션 상태 처리를 포함하여 블록체인 트랜잭션 모델에 주의를 기울여야 합니다.
학습 경로
• 블록체인과 이더리움의 기초를 배우고 기본을 이해합니다.
•스마트 계약 기본 사항(ABI, 메서드 및 속성, 이벤트 및 로그)을 알아보세요.
https://docs.soliditylang.org/en/latest/index.html
https://www.wtf.academy/en/solidity-start
•지갑 및 지갑 연결 메커니즘(공급자, 서명자)에 대해 알아보세요.
https://docs.ethers.org/v5/api/providers/
https://docs.ethers.org/v5/api/signer/
•지갑 연결 및 지갑 주소 표시를 구현하는 페이지를 생성합니다.
https://docs.ethers.org/v5/getting-started/#getting-started--connecting
•테스트넷에서 계약과 상호 작용할 수 있는 페이지를 만듭니다.
https://docs.ethers.org/v5/api/contract/
•승인, 전송, 발행 프로세스를 포함하여 ERC 20 및 ERC 721 토큰 발행 프로세스에 대해 알아보세요.
https://ethereum.org/en/developers/docs/standards/tokens/erc-20/
결론
전송 가능한 사용자 인터페이스 개발 기술은 프런트 엔드 개발자가 Web3로 전환할 수 있는 고유한 이점인 동시에 블록체인 기술의 고유한 혁신은 이러한 선택에 대한 도전을 제기합니다. 이 신흥 분야에서 프런트 엔드 개발의 역할은 기술 구현에만 국한되지 않고 독특하고 안정적인 사용자 경험을 창출함으로써 프런트 엔드는 가치 포착의 핵심 링크가 될 수도 있습니다. 저자는 처음부터 Web3의 혁신적인 서사에 매료되어 호기심과 관심을 가지고 배우기 시작했고, 계속 노력하고 실천하면서 점차 블록체인의 매력과 그것이 가져오는 변화의 가능성을 깨닫게 되었습니다. 이 기사가 Web3 분야에서 애플리케이션 개발에 관심이 있는 독자들에게 영감을 주기를 바랍니다.
