///
Search
🏐

12.클레이튼 덧셈게임 개발 시작 및 Boilerplate 받기

이전자료

사용할 환경설정

Node.js
NPM
트러플 프레임워크
비쥬얼 스튜디오 코드
설치 방법은 아래의 링크 참고
Node 버전이 8이상이고 NPM 버전이 5이상이면 이 부분을 스킵해도 된다.
Node와 Npm 버전 체크 방법
C:\Users\glory>node -v v14.16.0 C:\Users\glory>npm -v 6.14.11 C:\Users\glory>
JavaScript
복사

트러플 설치

BAPP을 쉽게 개발하도록 도와주는 프레임워크이다.
스마트 계약을 컴파일, 테스트. 배포할 수 있다.
여기서는 버전을 4에 맞춰서 개발을 하도록 한다.
트러플 지우는 명령어
npm uninstall -g truffle
JavaScript
복사
트러플 설치하는 명령어
npm install -g truffle@4.1.15
JavaScript
복사
트러플 설치 확인 하는 명령어(cmd를 관리자 권한으로 실행시켜서 봐야한다.)
truffle version
JavaScript
복사
vscode 열어서 solidity 확장프로그램을 설치한다.

Boilerplate 받기

BApp파일
5.2.zip
84.6KB
트러플 박스
트러플 박스에서 엥귤러나 리엑트를 지원하는 탬플릿을 받으면 된다.
여기서 다운로드 받은 탬플릿은 이더리움 BAPP에 특화되어있기 때문에 아더리움을 지우고 클레이튼에 맞게 설정해야한다.
여기 보면 WebPACK의 탬플릿을 다운로드 받고 이걸 클레이튼으로 바꾼것이 아래의 깃허브에 공지되어있다.
소스코드 출처
여기서 부터는 공평성을 위해 JS, JQuery로 작업을 수행하겠다.
일단 위의 소스코드를 받을 폴더에 가서 아래의 명령어를 입력한다. (Github 설치가 되어 있어야만 함)
git clone https://github.com/kkagill/addition-game-starter.git cd addition-game-starter
JavaScript
복사
실행화
위의 소스코드에서 cd addition-game-starter까지 눌렀으면 다음 단계로 넘어간다.

파일 소개

Contracts 폴더에는 솔리디티 컨트랙 파일들을 보관하는 것이다.
우리가 만든 코드들이 다있는데, 마이그레이션은 스마트 계약을 배포할때 마이그레이션 폴더 안에 스크립트 파일을 실행하게 된다.
그래서 매우 중요
마이크레이션 폴더안에 js 파일은 배포하는 과정의 로직이 담겨져 있다.
migration 컨트랙 파일을 불러와서 배포를 하는 단계이다.
src 파일 안에는 프론트 엔드를 담당하는 구조를 설정했다.
html파일은 view를 담당한다. 부트스트랩을 활용한다.
css 안에 내용도 작성을 했다.
index.js 은 기능을 수행하기 위한 엔진과 같은 파일이다. (함수만 정의 하였고 맨 아래의 opts 변수는 옵션으로써 로딩할 때 쓰는 환경설정 변수이다.)
package.json은 npm을 통해 필요한 dependency를 추가하는 파일이다. cavar-js 가 핵심이다.
truffle.js 환경설정을 담당한다.
webpack은 코드가 변경될 때 마다 바로 바로 반영해주는 역할을 한다.