iron-router와 blaze 조합의 사용에서 flow-router와 react로의 조합으로 변경해본 사용기입니다.

1. iron-router / blaze 에서
flow-router / React 로
Meteor Default 패키지 말고 다른거 써보자
김현동
Tuesday, August 25, 2015 Meteor Seoul Meetup

2. 목차
• 사전 조사
• 왜 React로?
• Router는 또 왜?
• Meteor에서 React 사용하기 Tip
• 새 버전에서 변화될 React 사용 Tip
• 결론

3. 사전 조사
• 2015년 2월부터 Blaze 대체를 목적으로 reviets, Vue.js,
React 등 View만 담당하는 라이브러리들을 조사
• Blaze 2 얘기도 봄
• Vue.js 만든 개발자인 Evan You가 Google에서 Meteor
팀으로 합류
• React 메인 커미터 중 한명인
Ben Newman(benjamn)이 Facebook 에서
Meteor 팀으로 합류

4. 왜 React로?
• 개인적인 취향이 있는 문제겠지만 Blaze(+handlebars) 자체가
표현력이 부족하다고 생각했음
단순 비교문 조차 template registerHelper로 작성해야 작업할
수 있다는 것과 변수를 생성을 원할 시 helpers에 등록해줘야만
값이 넘어간다는 것이 생산성을 떨어뜨리게 만든다고 생각
• 그래서 생각한게 angular 혹은 비슷한 view 라이브러리.
angular는 제외한게 framework라 meteor의 많은 부분과 중복
된다고 생각하여 제외
• React는 view만 담당하는 라이브러리고 server side rendering
및 React Native 등 view 추상화를 통한 이득이 있어 도입 결정

5. 도입 전 테스트
• 알아본건 2월부터였으나 프로덕션 레벨로 쓰기엔
Meteor + React 생태계가 너무 미약해서 포기
• http://atmospherejs.com 에 대한 배신감(?)
• 4월 경 flow-router-react-example 이라는 프로젝트가
나와서 테스트를 먼저 해봄
• 데모 시연

6. React SSR 최근 지원현황
• 이쪽은 Arunoda Susiripala(arunoda)이
주도중이심
• flow-router 대신 kadira:flow-router-ssr 설치,
kadira:react-layout 도 함께 설치
• https://github.com/arunoda/hello-react-meteor
데모 시연
• http://kadira.io 도 이미...

7. Router 변경은 왜?
• 발단은 5월 14일 생일 날 코딩하다가 iron-router 의 뭔
가 의도대로 잘 안되고 막 복잡하고...
내가 왜 생일 날 이런 스트레스를 받아야되나 싶고...
• 4월 밋업에서 iron-router 이대로 좋은가 토론 때 flow-
router가 쉽고 괜찮다는 얘기 해주신 분이 계셔서 React
적용도 할 참에 바로 진행
• 총 34개 라우트를 iron-router -> flow-router 변경 작
업하는데 1시간 30분 가량 소모

8. Router 변경 후기
• 라우터 특성 상 기능이 대동소이하기 때문에 변경에 특이사항이 없음
• view 라이브러리 변경에 비해 아주 Low Risk
• 리스크가 적은데 비해 사용하기가 쉽고 간결해 이득
iron-router flow-router
download 347.1K 2.6K
github start 1,677 418
github issue 281 17
2015/8/21

9. React 도입 전에
• autoform 같은걸 좋아하는데 제약을 많이 느낌
Collection의 특정 필드들만 업데이트 하고 싶은데
Schema validation을 전체 필드 대상으로 하기 때문에
required 필드들에 대해 처리가 힘들어 난감 ㅜㅜ
type=“hidden” 으로 {{autoform}} 내에 넣으면 되긴 하
지만... 복잡한 뷰에선 이걸 적용할 수 없는 상황들이...
• 개발하다보면 템플릿 내에서 수많은 조건식들을 작성하
게 되는데 조건식 기억이 안나 raix:Handlebar-helpers
레파지토리를 매번 들락거림 ㅜㅜ

10. React 도입 후에
• Blaze 쓸 때는 내가 Blaze에 맞춰서 작성해준다는 느낌이
강했는데 React는 내가 React를 컨트롤 한다는 느낌
• autoform 같은 특정 기능들이 동작하게 하려면 템플릿에
종속될 수 밖에 없었는데 React는 mixin 조합과 생명주
기 사용으로 많은 부분들이 컨트롤됨
autoform 처럼 입력 시 자동으로 Schema validation 하
는 부분들을 직접 만들어서 컨트롤 할 수 있음
부분 스키마 체크도 역시 가능!

11. React 도입 삽질기
• 도입 당시 React-Meteor 패키지가 중구난방이었어서 선택이 어려웠음
• React에서 제공하는 reactjs:react 패키지가 있으나 버전도 낮았고 benjamn
이 Meteor로 이직한지 얼마 안되서 적응하고 일하고 하느라 관리를 못함
(https://github.com/reactjs/react-meteor/issues/28)
• 데모에서 사용된 패키지가 grove:react 였어서 이걸 적용. 얼마전까지만 해
도 이걸 사용했는데 7월 27일 드디어 Meteor official 패키지가 생김
• grove 사용 시 타이밍 문제로 setTimeout 사용하거나 mixin 내
subscription 관리가 제대로 안되던 문제가 official 패키지에선 하나도 없
음..! ㅜㅜ 감동!
• Blaze -> React 전환 작업 시간은?

12. React 도입 삽질기
• 이젠
$ meteor add react
이걸로 설치 끝
• http://react-in-meteor.readthedocs.org/en/latest/
이걸 꼭 보세요.
• $ meteor add react-meteor-data
이것도 꼭 설치하세요.
• reactive 데이터는 죄다 getMeteorData() 내에 집어넣어주면
됩니다.

13. React 컴포넌트 변수 관리
• Blaze 쓸 때는 없었던 문제인 전역변수 관리 문제가 생김
• Blaze는 html 파일들 다 읽어서 <template
name=“players"> 이걸 Template.players 처럼
Template 전역변수에 넣어주기 때문에 Template만 외
부로 노출됨

14. React 컴포넌트 변수 관리
• 그런데 Meteor + React 예제들을 보면 하나같이

15. React 컴포넌트 변수 관리
• 모든 컴포넌트 하나 하나를 다 전역변수로 빼라는건가...
ㄷㄷ 당연히 안티패턴인데;;
• Package Only App Structure With Mediator Pattern
(http://www.manuel-schoebel.com/blog/meteorjs-
package-only-app-structure-with-mediator-pattern)
• 모든걸 다 패키지화 하면 좋지만 namespace만 해줘도
충분

16. React 컴포넌트 변수 관리
local package for namespaces
package.js
namespaces.coffee

17. React 컴포넌트 변수 관리
package에서 노출한 ReactView 오브젝트에 선언

18. React + Meteor 결과물
http://gamestage.co

19. Meteor 1.2 이후에서의 변화
• server side, client side 모두 babel 통해서 ECMA 2015
기본 적용
• babel은 jsx 다이렉트로 지원
• 새로운 컴파일러가 추가됨에 따라 새로운 방식으로의 이
용이 가능해짐

20. Meteor 1.2 이후에서의 변화
• rocket:module 통해서 ES6의 모듈로더 사용 가능!

21. • Meteor만의 개발 방식에서 javascript 생태계가 가는 방향으
로 동참하게 됨
• javascript 안티패턴인 var 없이 전역변수로 선언하는 방법을
버리게 됨으로 개발자들이 갖는 Meteor에 대한 심리적 저항
감(?) 혹은 거부감 또한 없어져 Meteor 적극 추천 가능
• benjamn이 Meteor를 trendy하게 만들기 위해 굉장히 많은
부분에 변화를 주고 있음
• Meteor.call 등이 Promise 기반으로 변화하는 것도 같은 맥락

22. Thank you!