일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- jest
- unittest
- vsCode
- 센토스
- 맥
- centos
- node
- MachineLearning
- xcode
- Android
- MAC
- IOS
- 네트워크
- 개발
- ReactNative
- Chrome
- linux
- 리눅스
- build
- androidstudio
- TensorFlow
- PYTHON
- VirtualBox
- webpack
- 오블완
- qunit
- react
- localserver
- 티스토리챌린지
- Today
- Total
목록분류 전체보기 (490)
로메오의 블로그
구글 애널리틱스 사이트로 이동해서 로그인합니다. 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..