17.
tracer 시각화
나쁜 프로그래머는 코드에 대해 걱정하고,
좋은 프로그래머는 데이터 구조와 그들 사이의 관계를 걱정한다
리누스 토발즈
https://lwn.net/Articles/193245/
프로그램에서 주목할 것은 데이터의 흐름과 변화
18.
tracer 프로그래밍
처음에는 로직에 집착
어떻게 하면 코드를 순서도로 바꿀 수 있을까?
데이터를 생각
대부분의 ‘로직’은 값을 만들고 가공한다
데이터의 변화가 일어날때 이벤트를 걸어준다면?
19.
Python을 선택한 이유는 의사코드와 가장 유사하고,
C++나 Java와 같은 다른 언어에 비해 읽고 이해하기 쉬워서 이다.
마시모 디 피에로
파이썬으로 배우는 실전 알고리즘 中
간결한 문법, 연산자 오버로딩 지원, 데이터 처리에 유리
ipytracer Python
20.
처음 파이썬을 배운 사람들도 쉽게 적응 할 수 있게 하자
list의 연산자 및 메소드를 최대한 그대로 쓰게 하자
코드의 큰 변경 없이도 시각화 할 수 있게 하자
파이썬 코드 실행 결과를 웹으로 보여주자
ipytracer 목표
34.
ipywiget
시각화를 위한 JS/CSS파일을 읽고 올려야 하는데...
for loop 에서 값이 변할 때마다 HTML을 업데이트 하고 싶은데...
직접 통신은 어려운 일
Python, Web의 양방향 동기화 지원
Python 라이브러리와 JS라이브러리가 각각 있다
라이브러리를 만들 때는 둘 다 써서 작업해야 한다
35.
from ipywidgets import DOMWidget
from traitlets import Unicode, Int
class MyWidget(DOMWidget):
_view_module = Unicode('mywidget').tag(sync=True)
_view_name = Unicode('MyWidgetView').tag(sync=True)
count = Int().tag(sync=True)
ipywidget Python
Jupyter은 __repr__또는 display 함수를 실행해 보여준다
DOMWidget은 _ipython_display 함수로 미리 처리 되어 있음
나만의 Widget을 만드려면 DOMWidget을 상속해야 한다
보여줄 JS View 이름과 ViewModel 이름도 정의 해야 한다
36.
jupyter Json
당연히 Python Object를 JS Object로 직접 사용 불가
두 언어 모두 읽고 쓸 수 있는 JSON을 써서 동기화
즉 동기화할 데이터는 직렬화를 해줘야 함
37.
traitlets 소개
https://github.com/ipython/traitlets
파이썬을 위한 타입체킹, 변화 감지확인 라이브러리
값의 변화, 타입체킹등에 콜백함수 등록이 가능하다
DOMWidget에서는 tag(sync=True)함수를 콜백에 등록해 동기화
이후 값이 변하면 자동으로 view_model에 동기화
타입체킹 라이브러리임에 유의
예: ipytracer의 경우 어떤 index가 변했는지도 동기화 하는데 슬라이싱을 할 경우 [:5] 빈 index에는
None이 들어가 문제가 생김
38.
traitlets 발견한 문제점
Python 데이터가 변해도 가끔 동기화가 안된다
???
Immutable 한 변수는 문제 없음
Mutable 한 변수는 문제가 있음
저는 self.data = list(data) 처럼 해결
40.
import * as widgets from 'jupyter-js-widgets';
import * as _ from 'underscore';
export class TracerView extends widgets.DOMWidgetView {
render() {
super.render();
this.listenTo(this.model, 'change:data', this._data_change, this);
}
_data_change() {
this.el.textContent = this.model.get('data').length();
}
}
export var TracerModel = widgets.DOMWidgetModel.extend({
defaults: _.extend({}, widgets.DOMWidgetModel.prototype.defaults, {
_view_name: 'TracerView',
_model_name: 'TracerModel',
data: [],
})
});
ipywidget JavaScript
41.
ipywidget JavaScript
Backbone.js 기반
webpack으로 번들링(css, js, etc)
AMD형식으로 만들어야 한다
상속 후 render함수를 만들면 된다
데이터 변화는 listenTo 함수에서 확인
보여줄 HTML은 this.el 을 변형!
42.
ipywidget 개발
이걸 언제 다 설정하죠?
Cookie cutter가 있습니다.
https://github.com/jupyter-widgets/widget-cookiecutter
디버깅과 테스트는 어떻게 할까요?
Python은 column 에서 오류를 보여주고, JS는 개발자 도구를,
테스트는 ...
내가 원하는 시점에 widget을 보여주고 싶어요!
from ipython.core.display import display !
43.
정리
특별한 함수를 쓰지 않고 getter, setter를 수정
덕분에 기존코드와 큰 차이 없음
Print 함수를 display 함수로 변경하면 끝!
파이썬도 시각화도 놓칠수 없다면? Jupyter
데이터 교환과 그에 따른 시각화? Ipywidget
다만, 동기화 할 때 쓰이는 traitlets 라이브러리에 주의