본문으로 건너뛰기

방명록

이 방명록 예제는 두 가지 주요 구성 요소로 이루어진 간단한 앱입니다.

  1. 사용자의 메시지를 저장하고 돈을 첨부할 수 있는 스마트 컨트랙트
  2. 게시된 마지막 10개의 메시지를 표시하는 간단한 웹 기반 프론트엔드

img

프로젝트 시작​

프로젝트 사용을 시작하는 데는 두 가지 옵션이 있습니다. 첫 번째 권장 사항은 웹 기반 대화형 환경을 여는 Gitpod를 통해 앱을 사용하는 것입니다. 두 번째 옵션은 레퍼지토리를 로컬로 복제하는 것으로 모든 필수 구성 요소를 설치해야 합니다.

Gitpod로컬로 복제
Open in Gitpod🌐 https://github.com/near-examples/guest-book-js

Gitpod를 선택하면 새 브라우저 창이 코드와 함께 자동으로 열리고, 잠시 기다리면 프론트엔드가 팝업됩니다(팝업 창이 차단되지 않았는지 확인).

앱을 로컬에서 실행하는 경우, 앱을 복제한 디렉터리를 입력하고 yarn으로 의존성(dependency)을 설치한 뒤 yarn start를 입력하여 시작합니다.

cd guest-book
yarn
yarn deploy
yarn start

그러면 컨트랙트가 컴파일되어 testnet 네트워크의 계정에 배포됩니다. 완료되면 브라우저 창이 열립니다.

방명록과 상호 작용​

img 방명록 앱의 프론트엔드

NEAR 계정으로 로그인하세요. 계정이 없는 경우 즉시 만들 수 있습니다. 로그인하면 방명록에 메시지에 서명할 수 있습니다. 메시지와 함께 돈을 더 보낼 수 있고, 0.01Ⓝ 이상 첨부하면 메시지가 "프리미엄"으로 표시됩니다.

dApp의 구조​

이제 dApp이 무엇을 하는지 이해했으므로 그 구조를 자세히 살펴보겠습니다.

  1. 프론트엔드 코드는 /frontend 폴더에 있습니다.
  2. 스마트 컨트랙트 코드는 /contract 폴더에 있습니다.

컨트랙트​

컨트랙트는 add_message와 get_message 두 가지 메서드가 있습니다.

contract/src/contract.ts
loading...

프론트엔드​

프론트엔드는 하나의 HTML 파일(/index.html)로 구성되며, REACT를 사용합니다. 구성 요소가 화면에 표시되는 방식을 이해하려면, /App.js 및 /index.js를 확인하세요.

다음 코드에서 /assets/js/index.js를 확인할 수 있습니다.

frontend/index.js
loading...

필요한 변수를 설정하고 앱을 시작합니다.

테스트​

스마트 컨트랙트를 작성할 때, 모든 방법을 철저하게 테스트하는 것이 매우 중요합니다. 이 프로젝트에는 단위(unit) 및 통합(integration)이라는 두 가지 유형의 테스트가 있습니다. 이를 자세히 알아보기 전에 yarn test 명령을 통해 dApp에 있는 테스트를 수행하세요.

단위 테스트​

단위 테스트는 스마트 컨트랙트의 개별 함수를 확인합니다. 현재 Rust에서만 단위 테스트가 구현되어 있습니다.

contract/src/lib.rs
loading...
integration-tests/src/main.ava.ts
loading...