로메오의 블로그

Firebase 목록 react native에서 webview를 만들고 javascript와 react native간 interface를 해보겠습니다. web소스는 firebase hosting을 이용합니다. [FIREBASE] 호스팅 생성하고 배포하기 위 포스트에서 firebase hosting으로 hello world를 찍고 오시기 바랍니다. 프로젝트 생성 $ cd /my/project/path $ react-native init secondProject --version react-native@0.59.8 $ cd secondProject $ code . secondProject 프로젝트를 생성합니다. react-native 버전은 0.59.8로 설치합니다. (최신버전인 0.60을 설치했는데, an..

Firebase 목록 https://console.firebase.google.com firebase에 가입하고 console로 이동합니다. 프로젝트에 iOS, Android, Web 앱을 같이 운영할수 있으니 닉네임을 잘 감안해서 작성합니다. 웹앱을 생성하면 주소가 firstproject-aXXXX.firebaseapp.com 형식으로 생성되는데 호스팅을 설정하면 romeoh.firebaseapp.com 형식으로 도메인이 생성됩니다. 앱 등록을 누릅니다. 단계별로 잘 메모해두세요. 프로젝트가 생성되면 Hosting으로 이동합니다. 이곳에 소스를 등록할 예정입니다. firebase-tools 설치 $ sudo npm install -g firebase-tools $ firebase login fireba..

org.gradle.execution.MultipleBuildFailures: Build completed with 1 failures. at org.gradle.initialization.DefaultGradleLauncher$ExecuteTasks.run(DefaultGradleLauncher.java:386) at org.gradle.internal.operations.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:301) at org.gradle.internal.operations.DefaultBuildOperationExecutor$RunnableBuildOpe..

react.js 프로젝트를 생성할때 create-react-app을 사용하면 매우 편리합니다. 이번 포스트에서 create-react-app으로 프로젝트를 만드는 법과 create-react-app 없이 프로젝트를 생성하는 법을 알아봅니다. create-react-app 설치 $ npm install -g create-react-app ########### 또는 yarn을 사용할때 $ yarn add global create-react-app create-react-app 프로젝트 생성 $ create-react-app first-project create-react-app으로 프로젝트를 생성할때 프로젝트명은 카멜표기법으로 작성할 수 없습니다. firstProject => first-project 프로젝..

구글 애널리틱스 사이트로 이동해서 로그인합니다. https://analytics.google.com 전체 웹사이트 데이터를 눌러봅니다. 애널리틱스 계정과 속성으로 분류되어 있습니다. 운영하는 사이트나 앱을 계정으로 나누어 해당 계정에도 속성을 여러개 만들 수 있습니다. 좌측 하단에 관리 버튼을 누릅니다. 저는 Blog라는 계정을 이미 만들어서 구글 블로그 속성을 만들어 두었습니다. 계정 만들기 버튼으로 계정을 만드시면 되고, 저는 Blog 계정에 속성 만들기로 Tistory를 추가하겠습니다. 정보를 입력하시고 추적ID 가져오기를 누릅니다. 추적코드 페이지가 뜹니다. 추적 ID를 복사합니다. 이 상태로 그대로 두고 tistory 관리자 페이지로 갑니다. 메뉴에서 플러그인 > 구글 애널리틱스를 선택합니다. ..

react native를 debug 모드를 에뮬레이터나 디바이스에 앱을 build 하면 속도가 매우 느리고, 디버깅을 위해 브라우저와 소켓 통신을 하기 때문에 케이블을 빼거나 네크워크가 달라지면 앱이 실행조차 안 될 때가 있습니다. 그래서 때론 release 모드로 build를 해야하는 경우가 있습니다. Android Release build 하기 Android 에뮬레이터에서 키보드 command + M을 누르면 React Debug 창이 뜹니다. 궁극적인 목적은 이것을 보이지 않게 하는것입니다. Bundle 만들기 React Native는 브라우저와 소켓 통신을 위하여 localhost에 서버를 띄워서 그곳의 asset들을 사용하게 됩니다. bundle이란 이 요소들을 번들로 만들어서 디바이스에 sta..

App.js에서 truffle과 연결하도록 하겠습니다. /src/js/App.js 계정 정보를 가져와서 Content.js 콤포넌트로 넘겨서 화면에 표시하도록 하겠습니다. import React from 'react' import ReactDOM from 'react-dom' import Web3 from 'web3' import TruffleContract from 'truffle-contract' import Election from '../../build/contracts/Election.json' import Content from './Content' class App extends React.Component { constructor(props) { super(props) this.state ..

/src/index.html react용 root컴포넌트 추가하고 build.js 파일을 불러옵니다. webpack에서 output을 build.js 로 build 합니다. /src/App.js webpack.config.js에서 App.js 파일을 entry로 설정했기 때문에 App.js가 react의 시작이 됩니다. entry: path.join(__dirname, 'src/js', 'App.js'), $ touch src/js/App.js App.js의 기본 구조는 아래와 같습니다. import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { constructor(props) { super(..

DApp을 만들기 위해서 Solidity로 투표하기 App을 만들었습니다. [DAPP] WATCH EVENT LISTENER 그런데 Front-end 화면 개발을 단순한 html과 jquery를 이용해서 간단하게 구현했었는데요. 이것을 React.js프레임워크를 이용해서 Refactoring 해보겠습니다. 물론 코드를 간단하게 하기 위해서 Bootstrap같은 디자인 적인 요소는 사용하지 않겠습니다. webpack-cli 설치 $ npm install -g webpack-cli webpack-cli 를 글로벌로 설치합니다. React.js 환경 설정 babel 설치 $ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react bab..

npm 설치과정에서 mkdir permission 오류가 발생했을때 $ sudo npm install web3 --unsafe-perm=true --allow-root sudo npm 으로도 해결되지 않으면 --unsafe-perm=true --allow-root 옵션을 준다. 그리고 Appears to be a git repo or submodule. 오류가 발생하면 $ sudo rm -rf node_modules/*/.git/ node_modules에 있는 .git 파일을 제거하고 다시 설치한다. 제일 좋은 방법은 yarn으로 넘어가시는게...

마지막으로 Watch Event Listener를 사용해보겠습니다. [DAPP] 투표하기 화면 구현 투표하기에 성공하면 location.reload()로 화면을 강제로 새로고침하였습니다. Election back-end 코드에서 이벤트가 발생했을때 화면으로 이벤트를 전달해 보도록 하겠습니다. /contracts/Election.js pragma solidity ^0.5.0; contract Election { .... // 투표하기 Watch Event event votedEvent ( uint indexed _candidateId ); // 투표하기 function vote(uint _candidateId) public { .... // 이벤트 트리거 emit votedEvent(_candidateId..

우리는 위와 같은 화면을 구현합니다. [DAPP] SOLIDITY FRONT-END ELECTION에서 후보자 읽어오기 위 포스트에 이어서 투표하기 코드를 추가하겠습니다. 먼저 Election.sol 에서 constructor에서 3명의 후보자를 추가하겠습니다. /contracts/Election.sol pragma solidity ^0.5.0; contract Election { .... // constructor constructor() public { addCandidate('romeoh'); addCandidate('doraemong'); addCandidate('pororo'); } .... } constructor에 위와 같이 코드를 추가합니다. 전체 코드는 아래와 같습니다. pragma so..

[DAPP] 투표하기 테스트 코드 작성 위 포스트에 이어 계속 테스트코드를 작성합니다. /test/election.spec.js const Election = artifacts.require('./Election.sol') contract('Election', accounts => { .... it('투표 유효성 검사', () => { return Election.deployed() .then(instance => { electionInstance = instance // 유효하지 않은 후보자에게 투표한다. return electionInstance.vote(99, {from: accounts[0]}) }) .then(assert.fail) .catch(error => { assert(error.mess..

중복투표를 방지하기 위해 vote 메서드에 코드를 추가하겠습니다. /contracts/Election.sol pragma solidity ^0.5.0; contract Election { ... // 투표하기 function vote(uint _candidateId) public { // 중복투표를 하면 오류를 발생 시킨다. require(!voters[msg.sender]); // 목록에 없는 후보자에게 투표하면 오류를 발생시킨다. require(_candidateId > 0 && _candidateId Candidate) public candidates; // 투표에 참여한 ID 기록 mapping(address => bool) public voters; // 후보자 등록하기 function addC..

앞에서 작성한 투표하기 solidity 코딩에 대한 테스트 코드를 작성합니다. [DAPP] SOLIDITY TEST 코드 작성하기 위 포스트에 이어 테스트 코드를 추가합니다. /test/election.spec.js const Election = artifacts.require('./Election.sol') contract('Election', accounts => { .... it('투표하기', () => { return Election.deployed() .then(instance => { electionInstance = instance candidateId = 1 // 1번 후보자에게 투표함 return electionInstance.vote(candidateId, {from: accounts[..

/contracts/Election.sol 추가하기 pragma solidity ^0.5.0; contract Election { .... // 투표에 참여한 ID 기록 mapping(address => bool) public voters; .... // 투표하기 function vote(uint _candidateId) public { // 투표에 참여한 ID를 기록해서 두번 투표하지 못하도록 한다. voters[msg.sender] = true; // 득표수를 +1 한다. candidates[_candidateId].voteCount ++; } } 위와 같이 voters 데이터와 vote 메서드를 추가합니다. 그리고 constructor에서 3명의 후보자를 추가한 코드를 주석처리 합니다. 최종 코드는..

CANDIDATE 등록, 확인하기 Solidate로 작성한 Back-end 코드는 위 포스트를 그대로 사용합니다. 다만 constructor에 후보자를 미리 3명 정도 등록하는 코드를 추가하겠습니다. /contracts/Election.sol pragma solidity ^0.5.0; contract Election { // 후보자 모델 struct Candidate { uint id; string name; uint voteCount; } // 후보자 기호 변수 uint public candidatesCount; // 후보자 매핑 mapping(uint => Candidate) public candidates; // 후보자 등록하기 function addCandidate (string memory _n..

Truffle로 프로젝트를 생성하면 기본적으로 제공하는 Front-end 소스가 포함되어 있습니다. SOLIDITY 맛보기 [SMOKE TEST] src 폴더가 Front-end 소스를 구현한 코드입니다. 크롬 브라우저에서 구동해보겠습니다. MetaMask 로그인 브라우저로 구동하기 전에 먼저 크롬 브라우저에 MetaMask에 로그인되어 있어야 합니다. 메타마스크 설치 [METAMASK - 여우지갑] 위 포스트에서 크롬용 MetaMask를 설치하시고 로그인까지 하시기 바랍니다. Truffle Migrate $ truffle migrate --reset back-end를 구동합니다. 터미널을 그대로 두시고 + 아이콘을 눌러서 터미널을 새로 엽니다. $ npm run dev 1: bash는 truffle로 ..

CANDIDATE 등록, 확인하기 위 포스트에서 작성한 코드를 그대로 사용하겠습니다. 테스트파일 생성 touch test/election.spec.js test/election.spec.js const Election = artifacts.require('./Election.sol') contract('Election', accounts => { it('후보자 두 명 등록하면 candidatesCount는 2명 이다.', () => { return Election.deployed() .then(instance => { // 두명의 후보자를 등록합니다. instance.addCandidate('romeoh') instance.addCandidate('doraemong') // candidatesCount를..

/constracts/Election.sol pragma solidity ^0.5.0; contract Election { // 후보자 모델 struct Candidate { uint id; string name; uint voteCount; } // 후보자 기호 변수 uint public candidatesCount; // 후보자 반환하기 mapping(uint => Candidate) public candidates; // 후보자 등록하기 function addCandidate (string memory _name) public { candidatesCount++; candidates[candidatesCount] = Candidate(candidatesCount, _name, 0); } // con..