블로그 이미지
Peter Note
Web & LLM FullStacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

'todos'에 해당되는 글 1

  1. 2013.06.01 [Meteor] Todos 예제 리팩토링 및 Reactive 이해하기
2013. 6. 1. 12:05 Meteor

미티어의 중요 개념중 하나인 Reactive Programming을 이해하자. 



1. 개념

  - 위키피디아

In computingreactive programming is a programming paradigm oriented around data flows and the propagation of change. This means that it should be possible to express static or dynamic data flows with ease in the programming languages used, and that the underlying execution model will automatically propagate changes through the data flow.


프로그램에서 쉽게 동적 데이터 흐름을 만들어서 데이터가 변하면 자동으로 전파되게 하는 기술. 예로 서버에서 데이터가 변하면 모든 클라이언트쪽으로 변경 데이터를 Push 하여 준다.


  - 백본에서 이야기하는 개념도 

    오른쪽 클라이언트<->서버간의 흐름에서 

    + Output : reactive ( == push )

    + Input : interactive ( == polling )

 

  - 미티어의 Reactive 개념

    + 미티어서 reactive가 동작하는 코드영역

       > Template

       > Meteor.render 또는 Meteor.renderList : DOM 동적으로 다시 그리기  

       > Deps.autorun : 의존관계 변경시 자동 재수행 - reactive computation을 수행한다 (Deps maybe is Dependency)



2. Todos 예제 리팩토링하기 

  - 예제 보기 

  

  - 예제 설치 및 실행 (참조)

$ meteor create --example todos

$ cd todos

$ meteor


  - 파일 쪼개기 

미티어는 client, server 폴더 밑으로 자유롭게 폴더를 만들 수 있다. 즉, 미티어가 실행되면 client, server디렉토리를 스캔하여 자동 로딩한다. 또한 파일간의 참조 관계에 대한 환경 설정 필요없이 name기반으로 자동 연결한다. 마치 WAS(예로 JBoss같은)가 lib를 스캐닝하여 자동 로딩하고  *.war파일을 인식하여 애플리케이션 컨텍스트를 만들어 주는 것과 같다. 이렇게 본다면 미티어는 서비스 개발을 위한 미들웨어 스택이라 생각해도 무방하지 않을까 한다. 

    + todos.html 파일의 Template 영역을 쪼갠다 : partials 디렉토리 만들기 -> list.html, tag_filter.html, todo.html, todo_item.html 로 쪼개기

    

   

    + todos.js  파일 쪼개기 : js 디렉토리 만들기 -> list.js, tag_filter.js, todo.js 로 쪼갠다

      > 주의 : Meteor.*에 관련된 코드가 있는 것은 그대로 놓는다.

      > todos.js 안에 var listHandle 의 var를 제거 

      > todos.js 안에 var todosHandle 의 var를 제거 

    


      > todos.js 에서 두개의 펑션을 짜른다 -> 루트에 lib 디렉토리 생성 -> common.js 안에 붙인다.

        okCancelEvents, activateInput앞의 var를 제거한다.

    


  - 쪼갠 파일을 인식하는 순서 (참조)

  • Files in the lib directory at the root of your application are loaded first. Files that match main.* are loaded after everything else.   (애플리케이션 루트에 lib를 만들고 그곳에 .js를 만들면 가장 먼저 인식 - WAS의 lib와 유사)

  • Files in subdirectories are loaded before files in parent directories, so that files in the deepest subdirectory are loaded first (after lib), and files in the root directory are loaded last (other than main.*). (부모 디렉토리가 먼저 인식된 다음 하위 자식 디렉토리가 그 인식됨) 

  • Within a directory, files are loaded in alphabetical order by filename. (같은 디렉토리는 파일 알파벳 순서 인식)

These rules stack, so that within lib, for example, files are still loaded in alphabetical order; and if there are multiple files named main.js, the ones in subdirectories are loaded earlier.


  - 짜잔 : 할일을 넣으면 바로 MongoDB로 insert 된다

  



3. Todos의 Reactive 이해하기 

  - 서버에서 publish -> 클라이언트에서 subscribe 한다.

  - 서버 영역의 publish 

    + server/publish.js 안에 Meteor.publish 등록

      > MongoDB 의 데이터가 업데이트 되면 자동 인식하여 subscribe 한 곳으로 publish 해 준다

      > lists는 MongoDB의 컬렉션이다  

    

     > mongo shell 에서 강제로 넣어보면 클라이언트 UI 단이 자동 live reloading 된다

$ meteor mongo

MongoDB shell version: 2.4.3

connecting to: 127.0.0.1:3002/meteor

> show collections

lists

system.indexes

todos

> db.lists.find();

{ "name" : "Meteor Principles", "_id" : "fEwuoo7Ja5quzPwa4" }

{ "name" : "Languages", "_id" : "fBtKCjyJxLTdMWXet" }

{ "name" : "Favorite Scientists", "_id" : "Jnr3u6gSNh26uRseH" }

> db.lists.insert({ name: 'Dowon todo' });


// 몽고 쉘에서 insert 하는 순간 "Dowon todo"가 들어간다


// 또는 클라이언트 브라우져에서 (크롬 DevTool에서 직접 insert 하기)

// DevTool콘솔에서 insert 를 하면 좌측 메뉴가 자동으로 업데이트되어 나온다 

  

  - 클라이언트 영역의 subscribe

    + 'lists' 컬렉션에 대한 subscribe를 등록하고 데이터 변경으로 서버에서 publish를 하여주면 등록한 callback function을 수행한다

    + Meteor.subscribe('lists', <CallBack Function>)

  

   + 쪼갠 list.js 소스 파악 : Template.lists.loading시에 listsHandle.ready() 를 수행하여 좌측 메뉴를 보여준다 

  



<참조>

  - 파일을 인식하는 순서에 대한 글(필독)

  - 미티어 Reactive 소스 처리에 대한 이해

  - 미티어 채팅(Chatting) 예제

  - todos 쪼갠 프로젝트 파일 다운로드 

todos.tar


posted by Peter Note
prev 1 next