React와 truffle로 dApp을 개발중이다. 

- 백엔드는 sprintBoot로 할 예정인데 모두 합해서 RST 개발환경으로 부르고 있다.
 (R: react-frontend ,  S: springboot-backend,   T: truffle )


dApp개발과 직접상관있는 부분은

  - R: dApp개발, 

  - T: solidity개발이다. (S: springboot-backend는 일단은 배포와 상관이 있다고 보면된다)



(UI와 web3가 섞이면서 콜백지옥에 빠질 수 있으므로,

RST개발환경과 같은 방식을 사용해 ES6 javascript를 사용해 이를 빠져나오길 추천한다.)



UI에서 promise를 활용해  web3.eth.getAccounts, 그 중에서도 accounts[0] 즉, 자기 account를 

가져오는 샘플코드는 다음과 같다.


<UI에서 호출하는 부분>

componentDidMount() {     console.log('componentDidMount start');     //getMyAccount     this.ATZToken.getMyAccount().then((account) => {         this.myAccountInput.value = account;         console.log('in componentDidMount:' + account);     }).catch((err) => {         console.log(err.message);     });     console.log('componentDidMount End'); }


<web3 연동 부분>  es6-promisify로는 잘안되는 부분이 있었는데, REF 를 보고 자체 promisify함수를 만들어 해결하였다. 

//web3함수를 Promise로 만들기 위한 공통모듈 const promisify = (inner) =>     new Promise((resolve, reject) =>         inner((err, res) => {             if (err) { reject(err) }             resolve(res);         })     );

 

/* Basic함수들 - eth sync함수는 값을 못 읽어 오는 경우가 발생가능하므로 async함수를 써야 함. */ getMyAccount = async () => {     const accounts = await promisify(cb => this.web3.eth.getAccounts(cb));     return accounts[0]//accounts Array 0번째가 본인 account. }


Posted by yongary
,

REF


라우저의 console에서도 web3로 contract를 실행할 수 있다.  

작년에 작성된 것이긴 하지만, ERC20 token을 전송하는 transfer를 아래와 같이 console로 수행가능하다.


 ==> 이를 응용하면 개발중인 화면에서, 유사방식으로 실행하면서 debugging이 가능하다. 


> const Web3 = require('web3');
undefined
> const web3 = new Web3('http://localhost:8545');
undefined
> web3.version
'1.0.0-beta.11'
> fs = require('fs');
<blah>
> const abi = fs.readFileSync('erc20_abi.json', 'utf-8');
undefined
> const contract = new web3.eth.Contract(JSON.parse(abi), '0xafb7b8a4d90c2df4ce640338029d54a55bedcfc4', { from: '0x90f8bf6a479f320ead074411a4b0e7944ea8c9c1', gas: 100000});
undefined
> contract.methods.balanceOf('0x90f8bf6a479f320ead074411a4b0e7944ea8c9c1').call().then(console.log).catch(console.error);
Promise {...}
> 99997
> contract.methods.transfer('0xffcf8fdee72ac11b5c542428b35eef5769c409f0', 1).send().then(console.log).catch(console.error);
Promise {...}
> { transactionHash: '0xf2d621ba5029a086e212d87fab83be31c3fa41fe47198c378f55c252e5b25d5b',
  transactionIndex: 0,
  blockHash: '0x0e806bf3e88f9335ee9be903303a2393c940ab22f4a73c7e28ca8d9a212ffa4e',
  blockNumber: 429,
  gasUsed: 35206,
  cumulativeGasUsed: 35206,
  contractAddress: null,
  events: 
   { Transfer: 
      { logIndex: 0,
        transactionIndex: 0,
        transactionHash: '0xf2d621ba5029a086e212d87fab83be31c3fa41fe47198c378f55c252e5b25d5b',
        blockHash: '0x0e806bf3e88f9335ee9be903303a2393c940ab22f4a73c7e28ca8d9a212ffa4e',
        blockNumber: 429,
        address: '0xAFB7b8A4d90C2Df4ce640338029d54A55BEDcfC4',
        type: 'mined',
        id: 'log_bfd297b0',
        returnValues: [Object],
        event: 'Transfer',
        signature: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
        raw: [Object] } } }
> contract.methods.balanceOf('0x90f8bf6a479f320ead074411a4b0e7944ea8c9c1').call().then(console.log).catch(console.error);
Promise {...}
> 99996


Posted by yongary
,

아래 세 군데의 Reference사이트를 참고하여, 간단하게 xls 다운로드 하는 spring기능을 만들어 보았다.

기존 3가지가 다 약간씩 장점이 있으나, 복잡한 면이 있어서 이들을 섞으니 간단하게 된다.



    참고0: https://okky.kr/article/421321

   참고1: http://pkbad.tistory.com/26

   참고2:  http://heowc.tistory.com/66 



1. xml 설정.


<!-- 엑셀 Download용 View  -->

<beans:bean class = "org.springframework.web.servlet.view.BeanNameViewResolver">

    <beans:property name = "order" value = "1" />

</beans:bean>

<!-- 엑셀 Download View는 컨트롤러 리턴시 다른것들보다 먼저 읽혀야 하기 때문에 order를 0과 1로 지정-->

<beans:bean class = "org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">

    <beans:property name = "order" value = "0" />

    <beans:property name = "defaultErrorView" value = "error" />

    <beans:property name = "exceptionMappings">

        <beans:props>

            <beans:prop key = "RuntimeException">error</beans:prop>

        </beans:props>

    </beans:property>

</beans:bean>

<beans:bean name="ExcelXlsView" class="my.common.view.ExcelXlsView" />



2.  ExcelXlsView class 작성.


@Component

public class ExcelXlsView extends AbstractXlsView {


@Override

protected Workbook createWorkbook(Map<String, Object> model, HttpServletRequest request) {

return (HSSFWorkbook)model.get("workbook");

}

 

@Override

protected void buildExcelDocument(Map<String, Object> model, Workbook workbook, HttpServletRequest request, HttpServletResponse response) {


    response.setCharacterEncoding("UTF-8");

            response.setContentType("application/vnd.ms-excel");

            response.setHeader("Pragma","public");

            response.setHeader("Expires","0");

        

//file이름 및 확장자

response.setHeader("Content-Disposition",

                 "attachment; filename=\"" + model.get("fileName") +".xls" + "\"");

}

}



3. Controller에서 excel 다운로드 수행.


@RequestMapping(value="/ExcelDownload.do")

public ModelAndView ExcelDownload(ModelMap modelMap, @ModelAttribute("modelVO")myVo infoVO,  

HttpServletResponse response, HttpServletRequest request, HttpSession session) throws Exception {

//화면의 List와 똑같은 Query수행.

List<MyVo> resultList = service.selectList(infoVO);


//Excel 생성

Workbook xlsWb = new HSSFWorkbook();

Sheet sheet1 = xlsWb.createSheet("sheet1");

Row row = null;

Cell cell = null;

    //Header Row생성

    row = sheet1.createRow(0);

    

    //필드별 헤더설정.

    int k=0;

    

    cell = row.createCell(k++);   

    cell.setCellValue("번호");


    

    sheet1.setColumnWidth(k, 4000); //좀 넓은 column은 width설정. 4000정도하면 날짜가 여유있게 들어감.

    cell = row.createCell(k++);   

    cell.setCellValue("생년월일");

    

    

    

 //Data 출력

        for(int i = 0; i < resultList.size(); i++) {

        row = sheet1.createRow(i+1);

        JdnumBunJadonVo oneRow = resultList.get(i); 

        int j = 0;

        //필드별 값설정.

        cell = row.createCell(j++);

        cell.setCellValue(oneRow.getNo());

        

        cell = row.createCell(j++);

        cell.setCellValue(oneRow.getBirthday());

        }


//model에 data넣어서, modelAndView 리턴.

        modelMap.put("workbook", xlsWb);

        modelMap.put("fileName", "excelList_" + CommonUtil.getCurrentDate()); //파일네임 앞부분 설정(.xls는 자동추가됨)

        

return new ModelAndView("ExcelXlsView");


}




4. 마지막으로, jsp에서는 아래와 같이 실행.


      var url = '/ExcelDownload.do'; //+parameter  를 get방식으로 설정.

window.open(url, '_blank' ); 

Posted by yongary
,

_json파일을 만들어서, _bulk로 elastic에 데이타를 넣는게 가장 빠른것으로 보인다.

단, batch파일은 10만건 정도가 적당하고..

이렇게 할 경우 batch파일이 너무 많아지므로,

아래와 같이 shellscript를 만들어서 일괄 삽입하는 게 좋다.


윈도우즈의 경우는 git 윈도우용을 깔아서, git bash등에서 실행하는 걸 추천한다.




#!/bin/sh


for ((i=130;i<258;i++)); do

fName='@modonBatchElastic'$i

RUN_COMMAND='curl -u elastic:changeme -s -H Content-Type:application/x-ndjson 

                   -XPOST 210.92.91.234:9210/_bulk --data-binary '$fName

echo $RUN_COMMAND

echo `$RUN_COMMAND`

done




참고: json포맷 - 2줄당 data한건 삽입

{ "index" : { "_index" : "test", "_type" : "type1", "_id" : "1" } }

{ "field1" : "value1" }

{ "index" : { "_index" : "test", "_type" : "type1", "_id" : "2" } }

{ "field1" : "value2" }

Posted by yongary
,

이더리움 KeyStore

블록체인 2018. 5. 18. 09:31

REF


이더리움에서 private키는 KeyStore라는 파일을 이용해 암호화해서 관리한다.

물론 이렇게 하지 않아도 되지만 위험하므로, 일반적으로 안전성을 위해 이렇게 관리한다.


keyStore파일 + 패스워드조합을 통해  privateKey를 관리한다.

Posted by yongary
,

REF: 20분만에 토큰배포 영문사이트


truffle환경에서 zeppelin을 이용해 토큰을 생성하는 방법 및 예제. 



<Zeppelin>


Zeppelin기반으로 Token을 만들고 싶다면..

   1. npm방식으로 zeppelin을 설치하는 방법과

   2. ethpm방식으로 zeppelin을 설치하는 방법이 있는데..   



  1.1  $ npm  install  zepplin-solidity

       혹은   package.json 이용 추천:
      => node_modules/zepplin-solidity 폴더 생성됨.

     

아래처럼 package.json을 만들고..   $ npm intall로 설치함.

{
"name": "truffle",
"version": "0.1.0",
"private": true,
"dependencies": {
"zeppelin-solidity": "1.9.0"
},
"devDependencies": {},
"scripts": {} } 


  ==>   2. Token생성.으로 이동.


  1-2.ethpm방식 (현재 비추)

    딱 필요한 것만 받는 ethpm방식이 더 좋을 수도 있는데

현재 1.9.0을 못 받고, 1.3.0을 받아오는 문제가 있다..  (일단 pass)

아래와 같이 ethpm.json파일을 만들고

  

  ethpm.json 파일

{
"package_name": "zeppelin",
"version": "1.9.0",
"description": "Secure Smart Contract library for Solidity",
"authors": [
"Manuel Araoz <manuelaraoz@gmail.com>"
],
"keywords": [
"solidity",
"ethereum",
"smart",
"contracts",
"security",
"zeppelin"
],
"license": "MIT"
}

 




$truffle install zeppelin  하면 intalled_contracts밑에 패키지가 설치가 된다..    REF


토큰관련 코딩후에는 그냥 

$truffle compile -> $truffle migrate  로 다른 일반 contracts와 함께 개발/배포 함. 



($truffle publish는 아직은 필요없는거 같은데.. 이건 ROPSTEN용도이려나? .... 아직 미 test중)



2. 그 후 Token solidity생성.


pragma solidity ^0.4.23;


import "../node_modules/zeppelin-solidity/contracts/token/StandardToken.sol";



contract ATZToken is StandardToken{

uint public INITIAL_SUPPLY = 10000000; //100만개 나누기 decimals(10**decimals)으로 표시됨.
string public name = 'Test ATZ Token';
string public symbol = 'ATZ';
uint8 public decimals = 1; //토큰을 얼마나 잘게 나눌수 있느냐. 10**X
address owner;

bool public released = false;

function ATZToken(){
totalSupply_ = INITIAL_SUPPLY * 10 ** uint(decimals);
balances[msg.sender] = INITIAL_SUPPLY; //각 계정별 잔액 저장. 상속받아 자동생성
owner = msg.sender;
}

function transfer(address to, uint256 value) public returns (bool) {
super.transfer(to, value);
}
function allowance(address owner, address spender) public view returns (uint256) {
super.allowance(owner, spender);
}
function transferFrom(address from, address to, uint256 value) public returns (bool) {
super.transferFrom(from, to, value);
}
function approve(address spender, uint256 value) public returns (bool) {
super.approve(spender, value);
}

}

그 후에,
truffle/migrations 폴더 밑에
2. _deploy_contracts.js에 ATZToken을 추가하고

$ truffle compile
$ truffle migrate (--reset) 하면 ganache등에 배포가 된다.




 






3. 회원가입등의 process가 발생할 때마다, 특정 회원에게 Token을 보내기..작성예정. REF

Posted by yongary
,

springboot에 포함된 tomcat과 함께 배포해서 바로 서비스로 돌릴 수 있다.


jar파일을 묶어서 배포하면 되고, java -jar xxx.jar 로도 실행가능하며 tomcat까지 돌아간다.


혹시 서비스로 설정을 해서 돌리고 싶다면 여기참조: REF

Posted by yongary
,

reactstrap

React.js 2018. 4. 19. 21:27

react에서 사용하는 bootstrap4라고 보면 된다.

다양한 컴포넌트들이 만들어져 있어서 가져다 쓰기만 하면 된다.


 사전준비: 1. npm install bootstrap --save

                2.  index.js 에 import 'bootstrap/dist/css/bootstrap.min.css';  추가.




<개인적으로 맘에 드는 component들> 


Navbar: http://reactstrap.github.io/components/navbar/ 


Card : 상품나열


Carousel : 슬라이드 쇼같은 느낌.

Posted by yongary
,

js HashMap 정수용

javascript 2018. 4. 16. 17:40

예전에는 아래 방식이 좋다고 생각했었는데,

최근엔 그냥 json을 hashMap으로 써도 충분한것 같다. (좀 늦으려나?)

 

let hm = {}

hm['key1']  = 2

hm['key2'] = 3

 

==> 이렇게 하면 바로 hashMap처럼 사용가능.  hm = {key1:2, key2:3} 이며, 이렇게 저장해도 됨.

 

--------------- 아래 --------------

REF 를 수정해서 만듦.

<javascript용 정수를 자동 add해주는 HashMap>

 

Map = function(){

 this.map = new Object();

};   

Map.prototype = {   

    put : function(key, value){   

 if (typeof this.get(key) == 'undefined')

             this.map[key] = value;

       else

 this.map[key] = this.map[key]+value;

    },   

    get : function(key){   

        return this.map[key];

    },

   

    //밑에 함수들은 사실 별필요 없음, 검증도 필요하고..

    containsKey : function(key){    

     return key in this.map;

    },

    containsValue : function(value){    

     for(var prop in this.map){

      if(this.map[prop] == value) return true;

     }

     return false;

    },

    isEmpty : function(key){    

     return (this.size() == 0);

    },

    clear : function(){   

     for(var prop in this.map){

      delete this.map[prop];

     }

    },

    remove : function(key){    

     delete this.map[key];

    },

    keys : function(){   

        var keys = new Array();   

        for(var prop in this.map){   

            keys.push(prop);

        }   

        return keys;

    },

    values : function(){   

     var values = new Array();   

        for(var prop in this.map){   

         values.push(this.map[prop]);

        }   

        return values;

    },

    size : function(){

      var count = 0;

      for (var prop in this.map) {

        count++;

      }

      return count;

    }

};

 

var map = new Map();

map.put("ag", 5);

map.put("ag", 2);

map.get("ag");  ===> 7

Posted by yongary
,

pure compoennet, ref등

React.js 2018. 4. 15. 21:56

<주요키워드>

className : 리액트에선 class가 아니라 className으로 써야 한다. css도 적용될 듯.

props   : extends Component엔 자동으로 들어오고,   Functional Component는 선언시 꼭 인풋으로 선언한다.

this.state  :   this.setState로  state변수를 바꿔야 하며 이 setState함수를 통해 redraw(=Update)가 발생한다. 
                    처음 그릴땐 Mount라 부르고, 그 이후부터는 Update라 부른다.




<Unique ID>

react에서 <ul>과 같은 list들에선  일반적으로 unique한 ID가 필요하다. (향후 선택을 위해서..)

array 데이타를 ul안에서 사용할 경우 array의 index를 사용해도 된다.

데이타 세팅시에는 UniqueId를 많이 사용한다.  

 

import UniqueId from 'react-html-id';

class App extends Component {

constructor() {
super();
UniqueId.enableUniqueIds(this);

this.state = { //uniqueID를 쓰려면 this때문에 생성자에서?
users: [
{id:this.nextUniqueId(), name:'Kim', age:10},
{id:this.nextUniqueId(), name:'Lee', age:20}
]
}
//array.findIndex( )로 true리턴해서 쉽게 찾을수 있음.
}
render() {
return (
<div className="App">
<ul>
{
this.state.users.map((user,index) => {
return (<User age={user.age} id={user.id} index={index}>{user.name}</User>)
})
}
</ul>
</div>
);
}
}




<Router>  REF , youtube


react에선 java-spring의 controller처럼 url을 관리해주는 메커니즘이 router이다.

url을 파라미터로 받을 수도 있다.

Link, NavLink, Redirect, Prompt도 유사하다.


   dependeny 필요: react-router-dom


   props:   exact : 정확한 매치만 허용,  strict:마지막 슬래쉬 까지도 정확히 체크


   match:  마치 props를 사용하듯이, Router에서는 match를 사용해  파라미터를 받아서 사용할 수 있다.

     => const User = ({match})  => {}  에서  match.params.myVar 사용가능  (props와는 달리 {match}중괄호 필요)

     =>      <Route path="/user;:myVar"  component={User} /> 이렇게 선언해 놓아야 함.

    

      match.url도 이용가능.



<Fragment>

  div를 2개써야 한다던지 할때 그 외부를  또 div로 싸도 되긴 하지만

 일부러 이렇게 div를 넣지 않아도 되게, react에서 특별히 제공하는 태그이다.

 실제 렌더링 되지는 않고, 2개를 가상으로 묶어주기만 한다.




<pure component>    REF

일반적으로 Component를 상속해서 Mount와 Update가 발생하지만,

PureComponent를 상속하면 Mount만 발생한다. 

아주 간단한 .. 한번 만들면 update할 일이 없는 component는 PureComponent를 쓰는게 좋다.

- 하지만 조심할 필요는 있다.    




<ref>  REF : (onKeyUp 코드도 같이 있음.)

ref={(input) => { this.firstName = input; }}

를 정의하면 ${this.firstName.value}로 사용가능하다.

외부에서 App.firstName도 사용가능하다.


16.3.0 부터는 (생성자등에서) productNameRef = React.createRef(); 지원. 조금더 간단함.



<Type Check>    REF

(개인적으로는 아직, typeCheck가 많이 필요한지 필요성을 못 느끼고 있다.

백엔드를 다른 language로 하기 때문에 필요성을 못 느낀 걸 수도 있는데..

아래와 같이 3가지 type check가 존재하는 걸 보면 분명 필요성 있는 곳이 있는것 같다..)


1. 일반적으로 간단한 type check는 PropType으로 한다. 

2. 좀 더 복잡한 type check는   react-flow  (yarn을 이용한 설치)를 이용하며

3. 가장 복잡하면서 확실한 type check는 typeScript를 이용한다..확장자도 tsx로 바뀌는 만큼 무겁다.. 




Posted by yongary
,