AI Convergence

하루종일 회의를 하고나니 진이 빠진다. 저녁 미티어 스쿨 모임장소 가는길에 연회원 등록한 박찬호 21이라 피트니스 클럽이 있다. 

$ meteor create waggleChat

$ meteor remove autopublish

$ meteor remove insecure

$ meteor add twbs:bootstrap

$ meteor add accounts-ui

$ meteor add accounts-password : Accounts 객체를 사용할 수 있다.

$ meteor list

accounts-ui      1.1.5  Simple templates to add login widgets to an app

meteor-platform  1.2.2  Include a standard set of Meteor packages in your app

twbs:bootstrap   3.3.5  The most popular front-end framework for developing responsive, mobile fir...

lib/collection.js  : 컬렉션은 lib에 넣어서 최초에 new를 하게 하자. 

server/fixture.js : 테스트 데이터를 만든다. 

client/account.js: Accounts UI에 configuration 한다. 

waggleChat에 loginButton 넣기 

pub/sub 을 roomList로 등록한다. : 서버에 publish, 클라이언트의 템플릿의 onCreated에서 subscribe를 한다. subscribe를 하면 DDP를 통해 서버로 부터 데이터를 받고 ready를 날려준다.

insert failed: Access denied : 채팅방 만들때 에러가 발생하므로 서버에서 allow를 구현한다. allow.js

roomList.helpers의 list가 바뀌면 computation되어 template의 each로 가서 computation이 되어 최종 화면에 추가한 방목록이 나온다. 

Rooms.find({...}) 의 결과는 cursor 이다.  cursor.observer({ added: function(document) { ...} }); 으로 cursor의 변화에 대하여 observing 할 수 있다. observer는 서버에서도 사용할 수 있다. 컬렉션의 cursor는 Reactive DataSource 이다. 

검색은 fastophere.meteor.com

페북 미티어 스쿨의 박승현님이 스마트링크 멤버를 위해 미티어 중급강좌를 시작했다. 첫회에는 Reactivity, 선언적 프로그래밍, Meteor Way, 발행/구독 (Pub/Sub), DDP, Template/Blaze 등에 대한 기초적인 부분을  집고 넘어갔다.  

한번 훑기

- 패키지 설치하면 .meteor안에 심볼릭 링크 (npm -g 의 폴더에 실제 설치됨)

- Live Hot Push(Reload) : CSS는 hot push 이지만 소스 변경은 hot reloading으로 두가지 다 일어난다

- Pub/Sub, Method Call : WebSocket 이 기반이다. 파일 업로드(Method Call 사용)

- WebApp 기본 패키지를 이용해서 RESTful 가능

- 서버 클라이언트간 싱크에 대한 이벤트 체크 API가 존재한다. 예) ready()

- 미니몽고 - 클라이언트 자바스크립트로 구현

- 퓨전페신져 : https://www.phusionpassenger.com/ 웹서버를 사용 stick session 으로 scale out 가능하게 해 줌 

- 로보몽고 또는 몽고쉐프를 사용해라

- 폴더

  + lib > client, server, private, public 즉, lib가 가장 먼저 로드된다. 

  + private은 Assets API를 통해 : 미리 fixture로 데이터를 등록할 때 사용한다. 

  + packages폴더 : 공통 컴포넌트들

Reactivity 

엑셀의 예를 생각 하면된다. 위키의 Reactive Programming을 봐도 엑셀에 대한 예로 설명되어 있다. 엑셀에서 데이터를 넣은 셀을 미티어에서는 Reactive Data Source라고 하고 엑셀의 더하기 sum(c1, c2)를 적용한 셀을 Reactive Computation이라 한다. 

  - Reactive Computation : 쉘의 펑션 sum(c1, c2)

  - Reactive Data Source : 쉘의 밸류  c1, c2

이것을 도형으로 그리면 다음과 같이 Reactive Data Source를 Reactive Computation이 감싸서 감시를하고 변경 발생시 변경을 알리게 된다. 변경은 또한 변경을 감지하는 Reactive Computation으로 전파(Transition)되어 변경을 반영한다. 예로 하위의 Reactive Data Source를 하위 Reactive Computation에서 감지하고 다시 Template에서 변경을 감지하고 DOM을 변경한다. 

미티어에서 이야기하는 Reactive Data Source와 Reactive Computation에 대한 대표적인 예를 보면 Reactive Data Source는 Reactive Computation에 감쌓여 있어야 반응을 한다는 것이다. 

미티어에서의 Reactive Data Source/Computation의 종류 

- Reactive Computation

  + Templates

  + Tracker.autorun

  + Blaze.render, Blaze.renderWithData

- Reactive Data Source 

  + Session variables

  + Database queries on Collections

  + Meteor.status

  + ready() method on a subscription handle

  + Meteor.user

  + Meteor.userId

  + Meteor.loggingIn

- mini-mongo (data source) <-> template.helpers list (list도 computation 이고) -> blaze의 {{#each list}} (list의 computation이 전이되어 each computation으로 와서 변경이 이루어진다)

- 필요악 : session, mini-mongo cursor, pub/sub의 ready() 는 전부 computation이 이루어 진다.

- 데이터 소스를 직접 만들기는 ReactiveVar 를 사용한다. Computation은 Tracker.autorun으로 구현 

템플릿

미티어에서 Blaze는 기본 템플릿 엔진이지만 템플릿이 모두 컴포넌트로 바뀐다. 단순 템플릿 스트링 이기 보다. React처럼 템플릿이 인스턴스로 변환이 되고 OnCreated, OnDestroyed, OnRendered가 인스턴스별로 호출이된다. 그러나 Template.<templateName>.helpers / events / rendered : 안에서 this는 Template 이므로 주의를 한다. 

  - Blaze : 서버의 데이터 변경에 따른 화면의 변경을 보여주기 

  - {{> }} 의 > 은 인스턴스를 만드는 것이다. 

  - 템플릿 레벨에서 라우팅을 하는 것으로 패턴이 바뀜 

  - Computation의 전이(Transition)를 통해 다이나믹하게 화면을 변경할 수 있다. 

참조 

Meteor의 Reactive의 해부

중급반 샘플 사이트 공개 
http://wagglechat.meteor.com/