iron-router / blaze 에서flow-router / React 로

Meteor Default 패키지 말고 다른거 써보자

김현동

Tuesday, August 25, 2015 Meteor Seoul Meetup

목차

• 사전 조사

• 왜 React로?

• Router는 또 왜?

• Meteor에서 React 사용하기 Tip

• 새 버전에서 변화될 React 사용 Tip

• 결론

사전 조사

• 2015년 2월부터 Blaze 대체를 목적으로 reviets, Vue.js, React 등 View만 담당하는 라이브러리들을 조사

• Blaze 2 얘기도 봄

• Vue.js 만든 개발자인 Evan You가 Google에서 Meteor 팀으로 합류

• React 메인 커미터 중 한명인Ben Newman(benjamn)이 Facebook 에서 Meteor 팀으로 합류

왜 React로?

• 개인적인 취향이 있는 문제겠지만 Blaze(+handlebars) 자체가 표현력이 부족하다고 생각했음단순 비교문 조차 template registerHelper로 작성해야 작업할 수 있다는 것과 변수를 생성을 원할 시 helpers에 등록해줘야만 값이 넘어간다는 것이 생산성을 떨어뜨리게 만든다고 생각

• 그래서 생각한게 angular 혹은 비슷한 view 라이브러리.angular는 제외한게 framework라 meteor의 많은 부분과 중복된다고 생각하여 제외

• React는 view만 담당하는 라이브러리고 server side rendering 및 React Native 등 view 추상화를 통한 이득이 있어 도입 결정

도입 전 테스트

• 알아본건 2월부터였으나 프로덕션 레벨로 쓰기엔 Meteor + React 생태계가 너무 미약해서 포기

• http://atmospherejs.com 에 대한 배신감(?)

• 4월 경 flow-router-react-example 이라는 프로젝트가 나와서 테스트를 먼저 해봄

• 데모 시연

React SSR 최근 지원현황

• 이쪽은 Arunoda Susiripala(arunoda)이주도중이심

• flow-router 대신 kadira:flow-router-ssr 설치, kadira:react-layout 도 함께 설치

• https://github.com/arunoda/hello-react-meteor 데모 시연

• http://kadira.io 도 이미...

Router 변경은 왜?

• 발단은 5월 14일 생일 날 코딩하다가 iron-router 의 뭔가 의도대로 잘 안되고 막 복잡하고...내가 왜 생일 날 이런 스트레스를 받아야되나 싶고...

• 4월 밋업에서 iron-router 이대로 좋은가 토론 때 flow-router가 쉽고 괜찮다는 얘기 해주신 분이 계셔서 React 적용도 할 참에 바로 진행

• 총 34개 라우트를 iron-router -> flow-router 변경 작업하는데 1시간 30분 가량 소모

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

React 도입 전에

• autoform 같은걸 좋아하는데 제약을 많이 느낌 Collection의 특정 필드들만 업데이트 하고 싶은데 Schema validation을 전체 필드 대상으로 하기 때문에 required 필드들에 대해 처리가 힘들어 난감 ㅜㅜ type=“hidden” 으로 {{autoform}} 내에 넣으면 되긴 하지만... 복잡한 뷰에선 이걸 적용할 수 없는 상황들이...

• 개발하다보면 템플릿 내에서 수많은 조건식들을 작성하게 되는데 조건식 기억이 안나 raix:Handlebar-helpers 레파지토리를 매번 들락거림 ㅜㅜ

React 도입 후에

• Blaze 쓸 때는 내가 Blaze에 맞춰서 작성해준다는 느낌이 강했는데 React는 내가 React를 컨트롤 한다는 느낌

• autoform 같은 특정 기능들이 동작하게 하려면 템플릿에 종속될 수 밖에 없었는데 React는 mixin 조합과 생명주기 사용으로 많은 부분들이 컨트롤됨 autoform 처럼 입력 시 자동으로 Schema validation 하는 부분들을 직접 만들어서 컨트롤 할 수 있음 부분 스키마 체크도 역시 가능!

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 전환 작업 시간은?

React 도입 삽질기

• 이젠$ meteor add react이걸로 설치 끝

• http://react-in-meteor.readthedocs.org/en/latest/ 이걸 꼭 보세요.

• $ meteor add react-meteor-data 이것도 꼭 설치하세요.

• reactive 데이터는 죄다 getMeteorData() 내에 집어넣어주면 됩니다.

React 컴포넌트 변수 관리

• Blaze 쓸 때는 없었던 문제인 전역변수 관리 문제가 생김

• Blaze는 html 파일들 다 읽어서 <template name=“players"> 이걸 Template.players 처럼 Template 전역변수에 넣어주기 때문에 Template만 외부로 노출됨

React 컴포넌트 변수 관리

• 그런데 Meteor + React 예제들을 보면 하나같이

React 컴포넌트 변수 관리

• 모든 컴포넌트 하나 하나를 다 전역변수로 빼라는건가...ㄷㄷ 당연히 안티패턴인데;;

• Package Only App Structure With Mediator Pattern(http://www.manuel-schoebel.com/blog/meteorjs-package-only-app-structure-with-mediator-pattern)

• 모든걸 다 패키지화 하면 좋지만 namespace만 해줘도 충분

React 컴포넌트 변수 관리local package for namespaces

package.js

namespaces.coffee

React 컴포넌트 변수 관리

package에서 노출한 ReactView 오브젝트에 선언

React + Meteor 결과물

http://gamestage.co

Meteor 1.2 이후에서의 변화

• server side, client side 모두 babel 통해서 ECMA 2015 기본 적용

• babel은 jsx 다이렉트로 지원

• 새로운 컴파일러가 추가됨에 따라 새로운 방식으로의 이용이 가능해짐

Meteor 1.2 이후에서의 변화

• rocket:module 통해서 ES6의 모듈로더 사용 가능!

• Meteor만의 개발 방식에서 javascript 생태계가 가는 방향으로 동참하게 됨

• javascript 안티패턴인 var 없이 전역변수로 선언하는 방법을 버리게 됨으로 개발자들이 갖는 Meteor에 대한 심리적 저항감(?) 혹은 거부감 또한 없어져 Meteor 적극 추천 가능

• benjamn이 Meteor를 trendy하게 만들기 위해 굉장히 많은 부분에 변화를 주고 있음

• Meteor.call 등이 Promise 기반으로 변화하는 것도 같은 맥락

Thank you!