블로그 이미지
윤영식
Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2018.10.23 16:52 BlockChain

Ethereum 의 Mining 부분의 동작원리 발표를 정리한다.



Ethereum 

  - P2P Network + Mining의 결합 

  - Mining



소스 설명

  - miner/miner.go

  - worker가 대부분의 mining 로직을 처리한다.

  - new worker가 실행되면 4가지 루프가 go routine 기반으로 계속 돈다. 

  - 발표 자료: 

3. How does go-ethereum work__Aiden.pptx





참조

https://steemit.com/@sigmoid sigmoid 님의 go-ethereum 분석기 : geth의 거의 모든 부분을 잘 정리해주셨습니다. 개인적으로 정말 많은 도움이 되었습니다.

https://github.com/NAKsir-melody/go-ethereum sigmoid 님의 go-ethereum 주석 한글화 프로젝트

http://www.notforme.kr/block-chain/geth-code-reading 자바 개발자의 go-ethereum 소스 분석기 : geth의 entry point부터 차근차근 잘 설명해주셨습니다. 처음 공부를 시작하시는 분들은 이 분의 글을 먼저 보시면 큰 도움이 되실겁니다.

https://blog.seulgi.kim/ 코드박스 김슬기님의 블로그 : 이더리움에 대한 수준 높은 포스트가 정말 많습니다. 직접적으로 소스코드를 다루는 글은 없지만 이더리움의 기술적인 부분을 이해하시는데 정말 큰 도움이 됩니다.

https://tech.etherstudy.net/ethereum/geth/delve/debug/consensus/lifecycle/2018/08/02/geth-consensus-lifecycle-debug.html 임완섭님의 이더리움 컨센서스 라이프사이클 디버깅 : 디버깅을 통해 소스코드를 보다 더 이해하기 쉽게 해주셨습니다. 역시 큰 도움이 되실겁니다.


posted by peter yun 윤영식
2018.10.23 16:14 BlockChain

Onther Devcon 1 세미나에 참여하여 이더리움 2.0 의 현재와 진행방향에 대해 알아보러 왔다. 특별히 인원제한으로 인해 당첨(?)이 되어야 올 수 있었는데 다행이 행운을 얻어 참여할 수 있었다. 




Ethereum 2.0 개괄


발표: 정우현

내용: 2.0

  - Sharding + Casper FFG 메인

  - Multi Layer 확장성 개선

  - p2p 개선작업

  - signature 알고리즘 개선

  - EVM의 병렬처리 개선 -> web assembly기반


Casper FFG

  - PoW를 대체

  - Staking ether 방식

  - Finality(피넬리티): 만들어진 블록이 최종적인지 판단 가능


P2P 프로토콜

  - devp2p에서 libp2p로 변경

  - IPFS 프로토콜

 

PoW Main Chain -> Beacon Chain -> Shard Chain -> VM

  - Beacon chain이 Shard chain을 validating한다.

  - 현재는 Beacon이 개발 메인이다. 내년 release?

  - Stake of Proof는 Beacon Chain에 존재하고, Shard chain은 TX와 DATA를 핸들링한다.

  - 처리용량은 Shard chain까지 가면 제곱으로 증가한다. 

  - Beacon Chain Spec: 어려 팀에서 빠르게 개발되어 가고 있다.



Beacon chain 이외 Ethereum 2.0에서 다루고 있는 내용

  - 각 기능을 각각의 다른 팀들이 알아서 만드는 중


2.0 의 개발 범위



Plasma vs Sharding

  - Sharding: Validator, Proposer, Committee

    Plasma: Operator, User, Challenger

  - Shard Chain은 1024개의 새로운 체인을 추가

  

eWASM

  - EVM의 대체물로 개발

  - Google WASM (Web Assembly)를 사용

posted by peter yun 윤영식
2018.10.18 14:52 AI Deep Learning

네패스의 뉴로모픽 인공신경망 장비를 통한 실습 워크샵 내용을 정리한다. RBF 알고리즘을 사용하는 칩이다. 




Radial Bassis Function (RBF)

중심점으로부터 일정한 거리에 있는 데이터만 골라낸다. 거리에 대한 정보를 끄집에 내는게 중점이다. 

  - 거리를 표한하는 법은 가우시안 분포(정규분포)를 사용한다

  - 가우시안 함수를 여러개 중첩시켜 다양한 함수(=인공지능)를 만들 수 있다. 

  - 입력: 특징정보를 준다.

  - 네패스 칩은 하나의 가우시안 칩으로 중첩해서 사용할 수 있다.





뉴로모픽 NM500



  - 576개의 뉴론이 있다.

  - 각 뉴론은 독립적으로 작동한다. 

  - 실시간으로 학습하고 모델을 만들어 낼 수 있다. 

  - 전처리된 feature를 넣어주어야 RBF를 통해 처리를 할 수 있다. 모든 것을 다 해주는 것은 아니다. 

  - 디지털화 가능한 모든 데이터 입력은 가능하다. 

  - 학습된 뉴런들만 작동한다. 

  

사용예

  - 라켓에 칩을 붙여서 스윙의 괘적이 잘 되고 있는지 알려준다. 

  - 어선에서 잡은 물고기중에서 원하는 것만을 골라냄 

  - 칩하나로 할 수 있는것

   + Fish sorting: 200 뉴런 사용

   + Glass Inspection: 유리의 이물질 발견 - 800 뉴런 사용

   + Motion classification: 움직임 괘적 추적 - 128 뉴런 사용




NM500 뉴런


뉴론안에 context끼리 서로 맞아야 연결된다. 네트워크를 구분하는 용도로 사용한다. 예로 얼굴인식이면 얼굴인식 뉴런끼리 연결되도록 한다.

Active Influence field 값이 학습을 진행하면서 정교하게 정해진다.

DEG (DeGenerate Flag)은 Minimum Influence Filed이하로 내려가면 작동한다.

Difference(차이) 절대값은 L1, Lsup을 사용한다. 





Knowledge Studio를 통한 실습


이미지에 대해 학습을 하고 딕텍션을 할 수 있다. 

  - context를 만든다.

  - 이미지를 선택한다. 

  - 이미지에 ROI라는 사이즈를 만들어 Full scan 학습을 한다.

  - 디텍션으로 가서 학습시킨 이미지를 찾거나, novelty를 선택하여 이전 이미지와 차이가 나는 부분을 찾는다. 


예) 100원 동전이 없는 이미지를 context 100사이즈, ROI w/h = 80, stride = 80으로 학습을 하고, 100원 동전이 있는 이미지로 교체후 디덱션을 해서 이전 이미지와 틀린 부분이 무엇인지 찾는다. 



참조

  - 제너럴비젼사와 MOU하여 뉴로모픽 NM500을 만든 것임

  - 확률 가우시안이란



posted by peter yun 윤영식
2018.10.17 15:11 Data Visualization/Vega

Vega는 선언적인 차트 생성 라이브러리이다. 좀 더 추상화하고 쉽게 사용할 수 있도록 Vega-lite를 제공한다. C3.js 또는 네이버의 C3.js 확장판인 Billboard.js를 생각하면 된다.




특징


- SVG, Canvas를 지원한다. 

- Javascript코드없이 JSON환경으로 차트를 생성한다. 

- Editor, Recommendation Charting해주는 Voyager등을 제공한다.


테스트: https://vega.github.io/editor/#/ 접속해서 다음 환경값을 넣는다. 


{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "data/seattle-weather.csv", "format": {"type": "csv"}},
"mark": "bar",
"encoding": {
"x": {"timeUnit": "month", "field": "date", "type": "ordinal"},
"y": {"aggregate": "mean", "field": "precipitation", "type": "quantitative"}
},
"config": {"axisY": {"minExtent": 30}}
}





개념 


Vega-lite 소개 동영상을 보고 전반적으로 이해하자. 


좀 더 자세한 개념설명





사용예


Elastic Search에서는 Customizing Chart를 만들기 위해 Vega를 기능으로 추가하여 사용할 수도 있다.


Elastic Search에서 Vega 구현 예제 소스

Vega, Vega-lite, 또는 Vega Editor, Vega Voyager등은 Standalone library 형태로 애플리케이션에 포함하여 사용할 수 있다.




'Data Visualization > Vega' 카테고리의 다른 글

[Vega] Vega, Vega-lite 넌 뭐니  (0) 2018.10.17
posted by peter yun 윤영식
2018.09.14 17:31 React

실제 프로젝트에서 사용을 안하다보니 자꾸 처음 내용이 익숙해 지지 않은 상태에서 잊어버리고 만다. 다시 React + Typescript기반을 다시 시작해 본다. 



Install React with Typescript

React와 Typescript 환경을 만든다

// 2018.9 현재 LTS NodeJS 버전

$ nvm use 8.12.0

// typescript v3.0.3 으로 업데이트

$ npm i -g typescript 

$ npm i -g create-react-app (or yarn global add create-react-app)


// TYPESCRIPT-CSS 

$ create-react-app my-app --scrips-version=react-scripts-ts


package.json에 eject기능이 있어서 webpack config를 밖으로 추출하여 직접 핸들링할 수 있게 한다. 

$ cd my-app

$ npm run eject



SCSS 환경구축

css 환경을 scss 환경으로 바꿔준다. 

// scss loader 설치

$ yarn add node-sass sass-loader --dev


App.css와 index.css의 확장자를 .scss로 바꾸고, App.tsx, index.tsx의 import 문 확장자를 .scss로 바꾼다. 

import './App.scss';


config/webpack.config.dev.js 와 webpack.config.prod.js 파일안에 scss설정을 추가한다. 빨간 부분을 

      {

            test: /\.(css|scss)$/,

            use: [

              require.resolve('style-loader'),

              {

                loader: require.resolve('css-loader'),

                options: {

                  importLoaders: 1,

                },

              },

              {

                loader: require.resolve('postcss-loader'),

                options: {

                  // Necessary for external CSS imports to work

                  // https://github.com/facebookincubator/create-react-app/issues/2677

                  ident: 'postcss',

                  plugins: () => [

                    require('postcss-flexbugs-fixes'),

                    autoprefixer({

                      browsers: [

                        '>1%',

                        'last 4 versions',

                        'Firefox ESR',

                        'not ie < 9', // React doesn't support IE8 anyway

                      ],

                      flexbox: 'no-2009',

                    }),

                  ],

                },

              },

              {

                loader: require.resolve("sass-loader"),                

                options: { } 

              }

            ],

      },


기존 App.scss내용을 다음과 같이 바꾸어 확인해 본다. 

.App {

  text-align: center;

  &-logo {

    animation: App-logo-spin infinite 20s linear;

    height: 80px;

  }


  &-header {

    background-color: rgb(197, 40, 40);

    height: 150px;

    padding: 20px;

    color: white;

  }


  &-title {

    font-size: 1.5em;

  }


  &-intro {

    font-size: large;

  }

}

yarn start하여 점검!



Component LifeCycle


일반 컴포넌트

  constructor -> componentWillMount -> render -> componentDidMount -> componentWillUnmount


props, state 사용 컴포넌트

  componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

  - shouldComponentUpdate: true, false로 다음으로 이벤트를 넘길수도 안할수도 있음




Component Type

PureComponent

  shouldComponentUpdate에서 Shallow compare하므로 reference를 바꾸어 주어야 render가 호출됨. 


Functional Component (Stateless Function Component)

  const myComp: Reat.SFC<Props> = (props) => {...}

import * as React from“ react”

interface WelcomeProps {

  name: string,

}


const Welcome: React.SFC < WelcomeProps > = (props) => {

  return <h1 > Hello, {

    props.name

  } < /h1>;

}



Router for SPA

react-router v4

   BrowserRouter, Route, Link, NavLink, Redirect 사용

   BrowserRouter는 window.history.pushState() 로 동자하는 라우터

   RouteComponentProps: route되면서 url의 파라미터를 props로 받음. history, match 속성을 가짐.

<BrowserRouter>

   <Route exact={true} path="/" component={} or render={} or children={} >

      <Link to="/a" />

      <NavLink activeStyle={{ color: red }} to="/b" /> 

   </Route>

   <Redirect from="/a" to="/b" />

</BrowserRouter>


Switch로 감쌈

  <Switch>

    <Route ... />

    <Route ... /> 

    <Route ... />

 </Switch>



Redux

react-redux

  여러  action을 reducer를 통해 하나의 store를 만든다.

     - action 타입을 만들고 action 객체를 만드는 펑션을 (action creator) 정의한다.

     - action을 처리하는 reducer 펑션을 정의한다. (Pure function, immutable)

        reducer 펑션을 action별로 나눈 다음 사용시에는 combineReducers 로 합쳐서 사용한다. 

     - reducer를 createStore에 넣어주면 single Store가 만들어진다. 

        store에는 getState(), dispatch(액션), subscribe(리스너),  replaceReducer(다른리듀서) 4개 메소드가 있음

   redux를 react에 연결하기

      - componentDidMount: subscribe

      - componentWillUnMount: unsubscribe

      - Provider는 context에 store를 담아 모든 component에서 store를 사용할 수 있도록 한다. 

         Provider를 제공하는 react-redux를 사용한다.  

   connect를 통해 컴포넌트에 연결한다. 

      - App에 대한 High order component이다.

      - 전체 state의 모양과 action creator를 파라미터로 넣어준다.

$ yarn add redux react-redux @types/redux @types/react-redux


const mapStateToProps = (state: { age: number}) => {

  return {

     age: state.age

  }

}


const mapDispatchToProps = (dispatch: Function) => {

  return {

      onAddAge: () => { dispatch(addAge()); }

  };

}


interface AppProps {

  age: number;

  onAddAge: void;

}


connect(mapStateToProps, mapDispatchToProps)(App);


class App<{props: AppProps}> extends Component {

    return <div>{this.props.age}</div>

}


  dispatch안에서 async처리를 할 수 있다.   

  applyMiddleware는 dispatch 전후에 처리할 수 있다. 

  action이 async일 때 미들웨어인 redux-thunk를 이용한다.



<참조>

- 2017 Typescript Korea 강의 (유튜브)

- scss 적용하기

- scss loader 설정하기, Class 사용 in Velopert

- Typescript + React 환경 만들기 in Velopert

- React LifeCycle 설명

- Component Type - SFC 설명

- React Router in Velopert 소개





'React' 카테고리의 다른 글

[React] 다시 시작하기  (0) 2018.09.14
[React] Semantic-UI를 React 컴포넌트로 만들기 - 1  (0) 2015.08.23
[React] CSS Framework 선정하기  (0) 2015.08.15
[Flux] Flux 배우는 방법  (0) 2015.07.04
[React] AngularJS와 ReactJS 비교  (0) 2015.07.01
posted by peter yun 윤영식