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
,

복합Query

ElasticSearch 2018. 4. 6. 09:44

엘라스틱을 사용하다 보면 여러가지의 Query를 복합해서 사용해야 하는 경우가 있다.


잘 섞이는 Query는

  must, must_not, should  + (filter)이며 아래와 같이 "bool"로 연결한다.   REF


{
    "bool": {
        "must":     { "match": { "title": "how to make millions" }},
        "must_not": { "match": { "tag":   "spam" }},
        "should": [
            { "match": { "tag": "starred" }}
        ],
        "filter": {
          "range": { "date": { "gte": "2014-01-01" }} 
        }
    }
}


Posted by yongary
,

<truffle + react>

이더리움의 개발환경을 

truffle과 react.js를 이용해 개발환경을 구축해 보았으며

관련 소스는 여기참조 : https://github.com/frownder/graph/tree/master/react-truffle

- metamask이용 및  ganache를 이용한 로컬개발은 잘 된다.



여기에다가 토큰발행을 위해서  zeppelin-solidity 를 이용.


react+metamask 참고사이트: REF


import 'Web3' from 'web3';

// ...

componentDidMount() {

  // Check if Web3 has been injected by the browser (MetaMask).
  // (since 'web3' is global, we need to use 'window')
  if (window.web3 && window.web3.currentProvider.isMetaMask) {
    window.web3.eth.getAccounts((error, accounts) => {

      // Do whatever you need to.
      this.setState({wallet: accounts[0]});
    });
  } else {
    console.log('MetaMask account not detected :(');
  }
}



<truffle + zeppelin>

truffle과 zeppelin-solidity를 이용한 개발 예제는

이곳을 참조:  DNEXT-POST

Posted by yongary
,

몽고db

springBoot gradle 2018. 3. 26. 23:14

springBoot2.0에서

spring-boot-starter-data-mongodb 등장.

   (localhost 27017포트의 test DB로 자동 접속.)  SpringBoot2.0 tutorial


@Document나 @Id는 기존과 동일.


출처:

https://m.youtube.com/watch?v=UJn_aTbmk9o



윈도우용 mongoDB설치는 : http://solarisailab.com/archives/1605 


약간예전꺼지만 spring Query예제들:  mkyong



2014년 몽고db 문제점 한글로 적은 글: REF

Posted by yongary
,

2세대 블록체인의 대세는 이더리움이고 가장 저변도 넓다.

하지만 단점을 꼽는다면, 다소 늦은 점과 사용시에 수수료가 든다는 점이다.


이를 극복하기 위해서 리눅스재단과 IBM을 중심으로 하이퍼레저가 만들어졌으며

컨소시엄을 구성해서 운영하기에 좋은 형태이다.



개인적으로 생각하는 하이퍼레저의 단점을 나열해 보면


-하이퍼레저: 컨소시엄을 구성해서 운영해야 하는 부담이 있고

    그렇게 하지 않을경우, 보안성이 떨어진다. 

   물론 하나의 회사에서 4개이상의 노드를 구성해서 운영할 수도 있지만,

   이럴 경우 서버장애로 인한 안정성도 떨어지고, 

   소스를 자체수정해서 로직의 조작등의 가능성도 있기 때문에 보안성이 떨어지는 것이다.


그래서, 개인적으로는 수수료라는 큰 단점이 있긴 하지만

이것은 보통 ICO를 통해 극복이 되는 이더리움이 더 대세가 될 것이라고 판단된다.

(물론 이더리움이 이미 대세라고 보고 있다)



<이더리움과 하이퍼레저의 차이점>

 구분

 이더리움

 하이퍼레저

 오픈시기

 2015.7

 2017.7

 가상화폐

 ETH

 없음

 합의

 POW

 PBFT(자체 알고리듬- 타3개의 노드중 1개이상의 노드의 승인 필요)

 네트워크

 Public, (private에서도 가능)

 private

 스마트계약

 주로 solidity로 구현

 chaincode로 구현

 블록체인 구분

 Public

 Private

 기술기반

 EVM(자체구현) 

 Docker




참고사이트: REF

Posted by yongary
,

react설치:   npm install -g create-react-app

프로젝트 생성:  create-react-app hello-world    REF



============= Form 예제 =================== 


class Game extends React.Component {

  constructor(props) {

super(props);


this.onSubmit = this.onSubmit.bind(this);   //onSubmit등 이벤트를 쓸때는 생성자에서, 이 window로 onSubmit을 bind

  }


  onSubmit(event) {

event.preventDefault();

console.log(this.input.value)    //   this.input으로 바로 언급가능


//const data = new FormData(event.target);

let data={};

data.name = event.target[0].value;

data.value = event.target[1].value;


fetch('/api/form-submit-url', {

method: 'POST',

body: data,

});

  }


  onClick() {                                                      //각종 이벤트 정의 가능

     console.log('test);

  }


  render() {

            const list = [ 'test1', 'test2'];   //여기서 변수 선언 가능. const나 let을 많이 쓴다. ES6문법.


    return (

      <div className="game">        //html에선 class를 쓰지만, JSX에서는 className을 쓴다.

        <div className="game-board">

          <Board />

        </div>

        <div className="game-info" onClick = {this.onClick}> //이벤트를 이런식으로 호출 가능

          <div>{/* status */}</div>

          <ol>{/* TODO */}</ol>

        </div>


         <form onSubmit={this.onSubmit}>

                 <input onChange={this.onChange}  ref={input => this.input=input} />

         </form>         

      </div>

    );

  }

}




============= setState 예제 ===================


class
 App extends React.Component {

  constructor(props) {

super(props);


this.state= {                 //JSON포맷으로 state 지정

title: 'My Title'

};

this.onClick = this.onClick.bind(this);

  }


  onClick() {

      this.setState(               //state 수정시에는 꼭, setState() 함수로 수정

            {title: 'New Title'}

      );

  }


  render() {


    return (

      <div className="App">        

<h1> {this.state.title} </h1>    //state 사용

               <div onClick = {this.onClick}> Click here </div>

               <MyComponent />    //다른  Component 그리는 방법. 혹은

               

                //혹은 아래처럼 변경하면서 사용가능 : 

                // 이경우 MyComponent render() 첫줄에는  const {title, name, onClick } = this.props;  

               <MyComponent                        

                    title =' __'

                    name = 'My Name'

                    onClick = {this.onClick}

               />

      </div>

    );

  }

}



출처유투브

Posted by yongary
,

참고)  이더리움 용어:  transaction - writing하는 호출,   call-읽는 호출.

공부하기 좋은 소스: petShop




<Truffle> : 단어 의미는 송로버섯


이더리움 solidify 개발시에 간단한 웹환경인 remix가 공부하기 좋지만,

본격적으로 빌드환경 구성해서 개발하기에는 truffle이 좋다.   


설치: $npm install -g truffle

$truffle init    만 하면 개발폴더구조와 설정파일인 truffle.js가 생성된다.

$truffle compile - sol컴파일.

 


참고: 테스트 서버환경 (테스트용도임- 배포환경으로 적당치 않음)

truffle에 직접 lite-server를 사용하여 localhost:3000으로 test를 할 수도 있는데

이 경우엔 package.json을 만들어 "dev"란 이름으로 lite-server를 추가하고

$npm run dev 를 하면 된다.     => petShop truffle예제 참고   


$truffle console - crowd세일등을 test할 때, javascript console처럼 온라인 test가능. REF


좋은 crowd세일 예제:  REF



<Ganache> : 단어 의미는 초코+크림 반반 섞은 거시기


remix에서는 이더리움 지갑으로 metaMask를 쓰듯이

Truffle에서는 이더리움 client로 ganache를 사용하는게 좋다. (물론 다른 것들도 있다)


GANACHE  :  app을 실행하면

http://127.0.0.1:7545  에서 클라이언트 실행

                                 참고 8545 = TestRPC일경우.(주로 MetaMask랑 같이 씀) - REF

                                     truffle init # Initialize a default truffle project in that folder

truffle build # Compile the dapp truffle migrate # Publish the dapp on the blockchain truffle serve # Host your web interface on port 8080


Truffle + Ganache환경에서

truffle develop하면  http://127.0.0.1:9545 에서 클라이언트 실행해줌. 



<ROPSTEN-TestNet사용법>


 $npm install truffle-hdwallet-provider -save하고 나서


 truffle.js를 편집해서 ROPSTEN설정하고

           (ethpm.js도 점검하고)

$truffle publish  하면 ROPSTEN에 publish됨.




<Zeppelin>

Zeppelin기반으로 Token을 만들고 싶다면.. npm방식으로 zeppelin을 설치하는 방법과

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


npm방식으로 하면 다른 소스들과 헤깔리기도 하고, 직접 zeppelin과 상관도 없는 많은 파일들을 받아야 하므로

딱 필요한 것만 받는 ethpm방식으로 설치하기를 추천한다.


ethpm.json파일만 만든 후에  REF

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

토큰관련 코딩후에는 그냥 

$truffle compile -> $truffle migrate로 다른 일반 contracts와 함께 개발이 가능한 것으로 보인다.

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



출처:Truffle공식사이트

Posted by yongary
,


비트코인 블록의 헤더가 6가지 간단한 정보로 관리되는데 비해,


이더리움 블록의 헤더는 무려 15가지 정보가 관리된다.   

   바디에는 Trasaction List와  Uncle List: (유효한 블록이지만 선택이 안된  List)가 관리된다.


이더리움 블록헤더

 부모Hash

 Uncle Hash

 보상: 채굴성공에 대한 보상금

 stateRoot :  상태 trie의 rootHash값

 transactionsRoot: transaction List에서 파생된 trie의 rootHash값

 수신자Root

 Bloom필터

 난이도 

 조상 블록의 개수

 gasLimit

 gasUsed

 시간(timestamp)

 extraData

 mixHash : 

그리고, 그 유명한 NONCE


REF



이더리움은 기본적으로 블록에  (비트코인처럼)완성된 데이타가 저장   되는게 아니고,  

최종상태와 transaaction List를 관리하고 있어서,  계산을 해야 최종상태를 알수 있다. 



헤더도 마찬가지 개념으로서, 바디의 2가지 정보를 위주로 

   parentHash와 nonce를 제외한 모든 헤더정보를 만들어 낸다고 볼 수 있는데,

자세한 사항은 (공부해서 보충예정)

Posted by yongary
,

REF


이더리움에서 계산량이 많을 경우를 대비해, 계산량이 많은 부분은 별도로 sidechain에서 계산을 해서

비용을 줄이도록 만든 블록체인으로  Loom Network가 대표적이다.



Posted by yongary
,