Download as PDF, PPTX
![[141] react everywhere](https://cdn.slidesharecdn.com/ss_thumbnails/141react-everywhere-150914022631-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[115] clean fe development_윤지수](https://cdn.slidesharecdn.com/ss_thumbnails/115cleanfedevelopment-161023163916-thumbnail.jpg?width=640&height=640&fit=bounds)
![[112]rest에서 graph ql과 relay로 갈아타기 이정우](https://cdn.slidesharecdn.com/ss_thumbnails/112restgraphqlrelay-161023161032-thumbnail.jpg?width=640&height=640&fit=bounds)
![XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기](https://cdn.slidesharecdn.com/ss_thumbnails/react1-160404022032-thumbnail.jpg?width=640&height=640&fit=bounds)
![[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기](https://cdn.slidesharecdn.com/ss_thumbnails/wjkqukgsqgm2vger5dnt-signature-2cf736e9b897e2aaaa6315f9d31d6951ba19fae7560fe278cefb4644ac0753c6-poli-170428114140-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Codelab 2017] ReactJS 기초](https://cdn.slidesharecdn.com/ss_thumbnails/es6-171227074533-thumbnail.jpg?width=640&height=640&fit=bounds)
![[부스트캠프 Tech Talk]손정현_PUB/SUB를 적용한 Todo앱 만들기(순한맛)](https://cdn.slidesharecdn.com/ss_thumbnails/techtalk5-201012061138-thumbnail.jpg?width=640&height=640&fit=bounds)
![[토크아이티] 프런트엔드 개발 시작하기 저자 특강](https://cdn.slidesharecdn.com/ss_thumbnails/random-141024103422-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기](https://cdn.slidesharecdn.com/ss_thumbnails/toolcon2014-140602234750-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
다함께, FluxUtils 한바퀴!
- 1.
- 2. React를 사용해 진행했던 두프로젝트 AJAX : SuperAgent Pub/Sub : EventEmitter3 View: React Router: page.js
- 3. React를 사용해 진행했던 두프로젝트 AJAX : SuperAgent Pub/Sub : EventEmitter3 View: React Router: page.js 라이브러리만 조합해 협업할 때 발생하는 다양한 문제들 적당한 수준의 구조와 개발자 간 공통적으로 이해할 수 있는 규칙이나 철학 필요
- 4. React와 궁합이 좋은 Flux계열을 한번 살펴보자! “ ”
- 5. FluxUtils를 사용한 이유 약3개월 전 JSer.info를 통해 플럭스유틸즈에 관해 알게 됐다. 그리고 다음과 같은 고민을 하게 됐다.
- 7.
- 8.
- 9.
- 10. 클래스로 디자인 돼있다. 함수로 디자인 돼 있다. 메서드로 reduce를 제공한다. ReduxFluxUtils
- 11.
- 12. todo/complete 액션에 맞춰 상태를변경하고 반환한다. DELETE_TODO 액션에 따라 상태를 변경하고 반환한다. ReduxFluxUtils
- 13. ReduxFluxUtils “ ” 두 라이브러리는 닮은부분이 있다. 두 개발자는 웹 상에서 열정적으로 의견을 주고 받으며 서로에게 영향을 주고 있다. https://goo.gl/3PDL8X https://goo.gl/iww0V9&
- 14. FluxUtils 페이스북의 웹 개발자빌 피셔(Bill Fisher)가 개발해 제공하는 기본 유틸리티 클래스 집합 이벤트 중앙 허브 격인 「Dispatcher」만제공하는 처음과 달리 다양한 Store와 Container를 실체화해 제공
- 15. FluxStore FluxReduceStore FluxMapStoreFluxContainer
- 16. Store의 기반클래스, EventEmitter를의존하고 Dispatcher를 구독하여 Flux 아키텍처 흐름의 기본을 실현함“ ” FluxStore
- 17.
- 18.
- 19.
- 20.
- 21. (https://github.com/facebook/flux/blob/master/src/stores/FluxStore.js) #L15-L18 #L72-L82 생성자를 통해 Dispatcher의 인스턴스를주입받는다. Dispatcher와 EventEmitter의 인스턴스를 프로퍼티로 설정한다. FluxStore
- 22.
- 23.
- 24.
- 25. (https://github.com/facebook/flux/blob/master/src/stores/FluxStore.js) #L149-L155 #L28-L54 __onDispatch 메서드는 추상메서드다. EventEmitter의emit 메서드를 통해 자신의 상태 변화를 발행한다. FluxStore
- 26.
- 27.
- 28. (https://github.com/facebook/flux/blob/master/src/stores/FluxStore.js) #L130-L137 #L28-L54값이 변경되면 __emitChange메서드를 호출해 __changed 프로퍼티를 true로 설정한다. FluxStore
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. Store를 상속한 클래스 Redux와비슷한 reduce 메서드 지원“ ” FluxReduceStore
- 41.
- 42.
- 43.
- 44.
- 45. (https://github.com/facebook/flux/blob/master/src/stores/FluxReduceStore.js) #L22-L45 getInitialState는 추상 메서드로구체 클래스에서 정의해야한다. FluxReduceStore
- 46.
- 47.
- 48. (https://github.com/facebook/flux/blob/master/src/stores/FluxReduceStore.js) #L47-L94 Dispatcher의 액션을 전달받는 메서드가 재정의 돼 있다. FluxReduceStore
- 49.
- 50.
- 51.
- 52.
- 53. (https://github.com/facebook/flux/blob/master/src/stores/FluxReduceStore.js) #L47-L94 reduce 메소드 역시추상 메서드로 구체 클래스에서 정의해야한다. FluxReduceStore
- 54.
- 55.
- 56.
- 57.
- 58. (https://github.com/facebook/flux/blob/master/src/stores/FluxReduceStore.js) #L66-L71 다음과 같은 형태로정의될 수 있다. FluxReduceStore
- 59.
- 60.
- 61. (https://github.com/facebook/flux/blob/master/src/stores/FluxReduceStore.js) #L47-L94 기존의 상태 값과reduce의 결과 값 이 다른지 비교한다. FluxReduceStore
- 62.
- 63. (https://github.com/facebook/flux/blob/master/src/stores/FluxReduceStore.js) #L47-L94 다르다면 값을 변경한다. __emitChange메서드를 호출해 __changed 프로퍼티를 true로 변경한다. FluxReduceStore
- 64.
- 65. (https://github.com/facebook/flux/blob/master/src/stores/FluxReduceStore.js) #L47-L94 최종적으로 emit 하여상태 변화를 구독자 에게 알린다. FluxReduceStore
- 66. “ ” FluxMapStore ReduceStore를 상속한 클래스Store의 상태를 기본적으로 Immutable.Map 으로 선언하고 그와 관련한 몇 가지 메서드를 추가한 클래스
- 67.
- 68.
- 69. (https://github.com/facebook/flux/blob/master/src/stores/FluxMapStore.js) #L40-L44 #L59-L72 getInitialState 메서드가 정의돼있고 상태로 Immutable.Map을 반환한다. FluxMapStore
- 70.
- 71.
- 72.
- 73.
- 74.
- 75. (https://github.com/facebook/flux/blob/master/src/stores/FluxMapStore.js) #L26-L37 상태는 Immutable.Map 이므로관련 API를 사용해 값을 변경한다. FluxMapStore
- 76.
- 77.
- 78. “ ” FluxContainer 자체적으로 관리하는 State와Props 없이 Store와 Component의 중간 매개체 역할을 하는 단순한 컨테이너 클래스
- 79.
- 80.
- 81. (https://github.com/facebook/flux/blob/master/src/stores/FluxContainer.js) Container에서 관심있어 하는Store를 반환한다. FluxContainer
- 82.
- 83. (https://github.com/facebook/flux/blob/master/src/stores/FluxContainer.js) componentWillReceiveProps 라이프 사이클 메서드에서호출된다. Store의 값을 이용해 상태를 변경한다. FluxContainer
- 84.
- 85. (https://github.com/facebook/flux/blob/master/src/stores/FluxContainer.js) 설정된 상태를 하위컴포넌트에 전달한다. FluxContainer
- 86.
- 87.
- 88. (https://github.com/facebook/flux/blob/master/src/stores/FluxContainer.js) #L60-L75 #L92-L109 componentDidMount 라이플 사이클 메서드에서getStores 메서드를 통해 관계를 맺는 Store 리스트를 얻는다. FluxContainer
- 89.
- 90. (https://github.com/facebook/flux/blob/master/src/stores/FluxContainer.js) #L60-L75 #L92-L109 Store 리스트를 순회하며addListener 메서드를 호출해 상태 변화를 구독한다. FluxContainer
- 91.
- 92. (https://github.com/facebook/flux/blob/master/src/stores/FluxContainer.js) #L60-L75 #L92-L109 componentWillReceiveProps 라이프 사이클메서 드에서 calculateState 메서드를 호출하며 이 메서 드에서 반환되는 값을 setState 한다. FluxContainer
- 94. FluxUtils 기반으로 개발한 사내회의실 예약 웹 애플리케이션
- 95. 만들면서 느낀 몇가지 규칙을 정리
- 96. 규칙 1. Container에서 자체적으로상태를 다루거나 이벤트를 처리하지 않는다. Container는 Store를 구독하고 Store의 상태 값을 하위 컴포넌트에 전달하는 역할로만 적합하다.
- 99. 일반적인 방법으로 컴포넌트독자적인 상태를 선언했다.
- 100.
- 101.
- 102. undefined 기존 컴포넌트의 방식대로상태를 다룰 수 없다. setState()를 호출해도 예상대로 동작하지 않는다.
- 105. Container에서 이벤트를 처리하기 시작하면상태가 필요해지며 결국 Container의 구조가 깨져 관리하기 힘들어진다.
- 106. FluxStore Component FluxStore Component 구독 FluxContainer 전달 Container에서 이벤트를 처리하기 시작하면상태가 필요해지며 결국 Container의 구조가 깨져 관리하기 힘들어진다.
- 107. FluxStore Component FluxStore Component 구독 FluxContainer 전달 Container는 오로지 컴포넌트와 Store의중간 다리 역할로써 사용 한다. Container에서 이벤트를 처리하기 시작하면 상태가 필요해지며 결국 Container의 구조가 깨져 관리하기 힘들어진다.
- 108. 규칙 2. 특정 컴포넌트의상태를 다른 컴포넌트에서도 알아야 한다면 Store에 값 추가를 고려한다. 컴포넌트가 컴포넌트를 의존하는 기괴한 형태나 두 컴포넌트를 연결하기 위한 랩퍼 컴포넌트를 늘리지 않는다.
- 110.
- 111.
- 113.
- 116. AppStore 클래스를 생성하고 extended상태 값을 선언한다.
- 118. TOGGLE_EXTEND_MODE 액션이 전달되면 extended값을 반전하여 상태를 재설정한다.
- 121. Spliiter 컴포넌트의 클릭이벤트가 발생하면 TOGGLE_EXTEND_MODE 액션을 디스패치한다.
- 123. 상태 값이 변경되면리렌더링 되며 두 컴포넌트의 UI 상태가 변경된다.
- 124.
- 125.
- 126.
- 127.
- 128. ContentSidebar AppStore FluxContainer 두 컴포넌트를 잇는랩퍼 컴포넌트를 작성하다보면 랩퍼컴포넌트에책임이몰리거나경계가모호해지는 경향이 있고, 애플리케이션이 커질 수록 많은 랩퍼 컴포넌트가양상되는문제점도있다.
- 129. 규칙 3. AJAX나 이벤트에따른 Dispatch는 Action으로 추상화한다. 컴포넌트에서 Ajax를 직접 사용하면 컴포넌트의 독립성이 저하되고 재사용하기 힘들어진다.
- 130.
- 131. ReservationSection Splitter Time Details SidebarTimeline Dispatch & AJAX Dispatch & AJAX Dispatch & AJAX Dispatch & AJAX Dispatch & AJAX Dispatch & AJAX
- 132.
- 133. ReservationSection Splitter Time Details SidebarTimeline Dispatch Ajax Call Call Actions
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151. ActionCreators Utils 물리적으로 나눠놓은 두 개념의 관심사가 섞여 있다는 느낌 억지로 뜯어 놓은 느낌이 강하고 객체의 흐름을 복잡하게 한다.
- 152. ActionCreators Utils 그렇다면 두개념의 관심사를 다시 나눠보자.
- 153.
- 154. CheatMessaeActionCreators.js Utils에서 ActionCreators 객체를직접 호출하는게 아니라, ActionCreators에서 Dispatch와 관련한 모든 업무를 담당한다.
- 155.
- 156. ChatWebAPI.js Utils가 아니라 Ajax요청을 담당하는 미들웨어를 만들고 이 객체에서는 오로지 Ajax 요청만 담당한다.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163. 규칙 4. Store에서 AJAX를호출하지 않는다 Store는 비동기 로직을 작성하기 적합 하지 않다.
- 166. 클래스의 구현 로직,사용 예제를 살펴보면 Store는 비동기 로직을 고려해 디자인돼 있지 않다는 사실을 알 수 있다.
- 170. Actions 객체에서 AJAX를요청하고, AJAX 요청 결과를 액션을 통해 Store로 전달하는게 가장 자연스러운 형태다.
- 171. 규칙5. UI가 크게 변경되거나Container가 커진 다면 URL 디자인을 고려한다. 하나의 URL에 너무 많은 요소를 담을 때 Container는 거대해지고 관리하기힘들어 진다.
- 173. UI가 복잡해 짐에도하나의 URL로 모든 인터렉션을 처리하면 Container가 크게 복잡해진다.
- 174. return ( <div> <Header date={params.date}/> <Sidebardate={params.date} minimal={this.state.extended}/> <Content extend={this.state.extended}> <TimeGutter start={startTime} end={endTime}/> <Schedule> <RoomTypes rooms={roomList}/> <Timeline date={params.date} rooms={roomList} events={this.state.events} profile={this.state.profile} start={startTime} end={endTime} /> </Schedule> <Popover date={params.date} options={this.state.popover}/> </Content> <Preloader show={this.state.loading}/> <ModalReservation date={params.date} show={true} rooms={roomList} users={this.state.users} values={this.state.creating} start={startTime} end={endTime} /> </div> ); 예약 현황을 출력하는 컴포넌트 조합 회의실 예약 시 사용하는 예약 하기 모달 창
- 175.
- 179. URL을 잘 디자인하면Container의 책임을 적절히 나눌 수 있고, 가볍게 관리할 수 있다.
- 180.