2023년 Redux를 상태 관리자로 사용하여 React로 dApp을 구축할 때의 이점

광고 암호화폐 및 분산형 앱은 금융 및 기타 거래를 관리하는 인기 있는 방법으로 빠르게 자리잡고 있습니다. 하지만 블록체인에서 온라인으로 많은 관심이 집중되고 있는 2023년에 성공적인 분산형 앱을 구축하려면 어떻게 해야 할까요? 이번 포스팅에서 공개해드릴 암호화폐 앱을 만드는 가장 인기 있는 도구 중 두 가지인 놀라운 분산형 애플리케이션을 만들기 위한 dApp 표준으로, 이 두 가지를 함께 사용하여 사용자가 좋아하고 구독할 강력하고 안전한 앱을 만드는 방법을 알아봅니다.

여기에 탈중앙화 앱과 암호화폐에 대한 약간의 배경이 있습니다. 따라서 암호화폐는 중앙은행이나 정부의 통제를 받지 않는 일종의 디지털 화폐입니다. 거래는 P2P 방식으로 이루어지며 자금은 제3자 없이 사용자 간에 직접 이체됩니다. 분산형 암호화폐는 모든 거래를 기록하는 분산 원장인 블록체인 기술을 기반으로 합니다.

암호화폐는 그로부터 10년 넘게 존재해왔지만 최근에야 주류의 주목을 받았습니다. 역사상 최초이자 가장 잘 알려진 암호화폐인 비트코인은 2009년 나카모토 사토시(Satoshi Nakamoto)에 의해 만들어졌습니다. 그 이후로 수백 개의 다른 암호화폐가 블록체인에서 생성되어 성공적으로 실행되었습니다. 암호화폐는 종종 분산형 거래소에서 거래되며 상품과 서비스를 구매하는 데에도 사용될 수 있습니다. 따라서 이러한 분산형 거래소는 dApp이며 이는 암호화폐 및 NFT 등과 별도로 블록체인에서 추진할 수 있는 또 다른 큰 요소가 됩니다.

이제 암호화폐의 인기로 인해 수많은 분산형 애플리케이션(dapp)이 개발되었다는 사실이 흥미롭습니다. Dapp은 분산 네트워크에서 실행되는 앱이며 스마트 계약을 통해 구동됩니다. Ethereum은 dapp 개발을 위한 가장 인기 있는 플랫폼이며 EOS와 TRON이 그 뒤를 따릅니다. React와 Redux는 2023년에 모든 블록체인에서 실행될 dapp 개발을 위한 두 가지 인기 있는 프레임워크입니다.

분산형 암호화폐는 금융 시스템에 혁명을 일으킬 수 있는 잠재력을 지닌 흥미로운 신기술입니다. React와 Redux를 사용하여 분산형 애플리케이션을 개발하는 데 관심이 있다면 저희가 도와드리겠습니다.

분산형 암호화폐 앱에 React & Redux를 사용하는 이유는 무엇입니까?

React와 Redux는 분산형 암호화폐 애플리케이션을 구축하는 데 널리 사용되는 두 가지 선택입니다. React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리인 반면 Redux는 애플리케이션 상태를 관리하기 위한 JavaScript 라이브러리입니다. .

분산형 암호화폐 애플리케이션에 React와 Redux를 사용하기로 선택한 데에는 몇 가지 이유가 있습니다. 첫째, React는 선언적 프로그래밍 언어입니다. 즉, JavaScript와 같은 명령형 언어보다 추론하고 디버깅하기가 더 쉽습니다. 둘째, React는 가상 DOM을 사용하므로 실제 DOM을 사용하는 다른 라이브러리보다 효율적입니다. 마지막으로 Redux는 분산형 환경에서 수행하기 어려울 수 있는 애플리케이션 상태를 관리할 수 있는 중앙 집중식 장소를 제공합니다.

환경 설정

Node.js가 설치되어 있다고 가정하고 다음 명령을 실행하여 새 React 애플리케이션을 생성할 수 있습니다.

npx 생성-반응-앱 내 앱

그러면 React 애플리케이션에 필요한 모든 파일이 포함된 my-app이라는 새 디렉터리가 생성됩니다.

다음으로 몇 가지 종속 항목을 설치해야 합니다. my-app 디렉터리에서 다음 명령을 실행합니다.

npm install --save 반응 라우터 반응 라우터-dom redux 반응-redux redux-thunk

그러면 React Router, React Redux가 설치됩니다. . 이러한 라이브러리는 분산형 애플리케이션을 구축하는 데 필요합니다.

이제 모든 종속성이 설치되었으므로 환경 설정을 시작할 수 있습니다.

구성 요소 및 컨테이너

소프트웨어 구성 요소에는 컨테이너와 구성 요소라는 두 가지 주요 유형이 있습니다. 컨테이너는 앱의 구조를 제공하고 구성 요소는 해당 구조를 콘텐츠로 채웁니다. 분산형 암호화폐 앱에서 컨테이너는 애플리케이션 상태를 관리하는 역할을 담당하는 반면 구성 요소는 UI만 렌더링합니다.

React와 Redux를 함께 사용하려면 이들이 어떻게 상호 작용하는지 이해해야 합니다. React는 뷰 라이브러리입니다. 즉, UI 렌더링만 담당합니다. 애플리케이션의 전역 상태에 직접 액세스할 수는 없습니다. 이것이 바로 Redux가 등장하는 곳입니다. Redux는 애플리케이션의 전역 상태에 대한 액세스를 제공하는 상태 관리 라이브러리입니다.

React와 Redux를 두 개의 서로 다른 추상화 계층으로 생각할 수 있습니다. React는 UI를 담당하고 Redux는 애플리케이션의 상태를 관리합니다. React와 Redux를 함께 사용하면 분산형 암호화폐 앱을 구축하기 위한 강력한 도구를 만들 수 있습니다.

액션과 리듀서

React와 Redux를 사용하여 분산형 암호화폐 앱을 구축할 때 이해해야 할 두 가지 주요 개념이 있습니다: 작업과 리듀서.

작업은 앱에서 발생한 이벤트를 설명하는 가장 간단한 방법입니다. 이는 유형 속성과 선택적으로 페이로드 속성을 포함하는 일반 JavaScript 객체입니다. 예를 들어, 사용자가 앱에서 버튼을 클릭하는 것을 설명하려면 다음과 같은 작업을 생성할 수 있습니다.

{

유형: ‘BUTTON_CLICKED’,

페이로드: {

id: 123 //클릭한 버튼의 ID

}

}

리듀서는 작업을 수행하고 새로운 상태를 반환하는 함수입니다. 상태는 앱의 데이터를 나타내는 일반 JavaScript 개체입니다. 리듀서는 작업이 애플리케이션 상태를 수정하는 방법을 정의하는 곳입니다. 예를 들어, BUTTON_CLICKED 액션이 상태의 카운터를 증가시키길 원한다면 다음과 같은 리듀서를 작성할 수 있습니다.

함수 카운터(상태 = { 개수: 0 }, 동작) {

switch (action.type) { // action.type은 액션 객체의 type 속성 값입니다.

case ‘BUTTON_CLICKED’: // 작업이 BUTTON_CLICKED 유형인 경우…

return { // … 그런 다음 증가된 개수로 새 상태 객체를 반환합니다.

개수: state.count + 1

Web3.js 및 Ethereum을 사용한 작업

분산형 애플리케이션(dapp) 구축에 관심이 있는 프런트엔드 개발자라면 아마도 이더리움 블록체인과 그것이 제공하는 많은 이점에 대해 잘 알고 있을 것입니다. 그러나 실제로 Ethereum을 사용하여 작업하는 것은 상당히 어려울 수 있습니다. 특히 플랫폼을 처음 사용하는 경우에는 더욱 그렇습니다. 이것이 Web3.js가 들어오는 곳입니다.

Web3.js는 dapp 개발자가 훨씬 간단한 방법으로 Ethereum 블록체인과 상호 작용할 수 있게 해주는 JavaScript 라이브러리입니다. 이제 Web3.js와 React를 사용하여 2023년에 Ether(Ethereum의 기본 암호화폐)의 현재 가격에 대한 정보를 표시하는 기술과 경험을 향상시키는 간단한 dapp을 구축하는 방법을 보여 드리겠습니다.

먼저 개발 환경을 설정하고 필요한 모든 종속성을 설치해야 합니다. 그런 다음 새로운 React 애플리케이션을 만들고 그 안에서 Web3.js를 초기화합니다. 완료되면 Ethereum 노드에서 데이터를 가져와 UI에 표시합니다. 마지막으로 누구나 액세스할 수 있도록 dapp을 공용 서버에 배포합니다 FXRP.

그럼 시작해 보겠습니다!

블록체인 네트워크에 배포

React 및 Redux를 사용하여 분산형 암호화폐 애플리케이션 개발을 완료했다고 가정하면 이제 이를 블록체인 네트워크에 배포할 준비가 되었습니다. 다양한 블록체인 네트워크가 있지만 이 예에서는 Ethereum 네트워크를 사용하겠습니다.

첫 번째 단계는 이더리움 네트워크에 새 계정을 만드는 것입니다. 이는 MetaMask와 같은 사용 가능한 많은 온라인 지갑 중 하나를 통해 수행할 수 있습니다. 계정을 생성하고 자금을 조달한 후에는 스마트 계약을 이더리움 네트워크에 배포하는 데 관련된 가스 비용을 지불하기 위해 일부 ETH를 얻어야 합니다.

ETH를 획득한 후에는 이제 스마트 계약을 이더리움 네트워크에 배포할 수 있습니다. 이는 Truffle 또는 EtherScan.io와 같은 다양한 도구를 사용하여 수행할 수 있습니다. 스마트 계약이 배포되면 새로 배포된 계약 주소를 가리키도록 프런트 엔드 애플리케이션을 업데이트해야 합니다.

그리고 그게 다야! 이제 귀하의 분산형 암호화폐 애플리케이션을 이더리움 네트워크에 성공적으로 배포했습니다!

앱 디버깅

앱 디버깅은 개발 프로세스에서 중요한 부분입니다. React 및 Redux 코드를 디버깅하는 데 도움이 되는 몇 가지 도구가 있습니다.

  • Google Chrome용 React 개발자 도구 확장
  • Google Chrome용 Redux DevTools 확장 프로그램
  • Firefox용 React DevTools 확장
  • Firefox용 Redux DevTools 확장

create-react-app 도구를 사용하는 경우 Facebook에서 제공하는 내장 디버깅 도구를 사용할 수도 있습니다.

  • 반응 개발 도구
  • redux-devtools

이 두 도구를 모두 사용하면 React 및 Redux 코드를 매우 자세하게 검사하여 버그를 찾고 수정하는 데 도움이 됩니다.

2023년 분산형 앱을 위한 React/Redux의 새로운 대안

분산형 앱을 구축하는 방법에는 여러 가지가 있으며, 각각 고유한 장점과 단점이 있습니다. 이 섹션에서는 React/Redux에 대한 가장 인기 있는 대안 중 일부를 살펴보겠습니다.

널리 사용되는 대안 중 하나는 Ethereum입니다. 이더리움은 개발자가 분산형 애플리케이션을 만들 수 있는 블록체인 기반 플랫폼입니다. Ethereum에는 React/Redux보다 더 많은 유연성을 허용하는 자체 프로그래밍 언어가 있습니다. 그러나 Ethereum은 React/Redux보다 배우기가 더 어려울 수 있으며 좋은 문서와 지원을 찾는 것이 어려울 수 있습니다.

또 다른 인기 있는 대안은 Hyperledger Fabric입니다. Hyperledger Fabric은 개발자가 블록체인 기반 애플리케이션을 만들 수 있는 오픈 소스 플랫폼입니다. Fabric은 React/Redux보다 더 많은 유연성을 제공한다는 점에서 Ethereum과 유사하지만 배우고 사용하기가 더 어려울 수 있습니다.

마지막으로 Corda가 있습니다. Corda는 개발자가 분산 원장 애플리케이션을 구축할 수 있는 오픈 소스 플랫폼입니다. Corda는 유연성 측면에서 Ethereum 및 Fabric과 유사하지만 일반적으로 두 플랫폼 중 하나보다 사용하기 쉬운 것으로 간주됩니다.

분산형 암호화폐 앱은 미래이며 React와 Redux를 사용하면 앱을 그 어느 때보다 쉽게 ​​만들 수 있습니다. 라이브러리, 구성 요소, 데이터 바인딩 및 라우팅 기능으로 구성된 강력한 도구 세트를 사용하면 안전하고 효율적이며 안정적인 앱을 빠르게 개발하는 데 도움이 될 수 있습니다. 이러한 모든 기능을 활용하면 분산형 암호화폐 애플리케이션을 쉽게 구축할 수 있습니다. 사이드 프로젝트를 찾고 있든 좀 더 야심찬 프로젝트를 찾고 있든 이 기사는 시작하는 방법에 대한 유용한 힌트를 제공했을 것입니다. 더 많은 새로운 프로그래밍 튜토리얼을 보려면 다음 사이트를 방문하세요.

Easy methods to Select a Delicate Pores and skin Facial Cleanser

Back to the default homepage