Contenu connexe Similaire à 다함께, FluxUtils 한바퀴! Similaire à 다함께, FluxUtils 한바퀴! (20) 다함께, FluxUtils 한바퀴!2. React를 사용해
진행했던 두 프로젝트
AJAX : SuperAgent
Pub/Sub : EventEmitter3
View: React
Router: page.js
3. React를 사용해
진행했던 두 프로젝트
AJAX : SuperAgent
Pub/Sub : EventEmitter3
View: React
Router: page.js
라이브러리만 조합해 협업할 때
발생하는 다양한 문제들
적당한 수준의 구조와
개발자 간 공통적으로 이해할 수
있는 규칙이나 철학 필요
10. 클래스로 디자인 돼 있다. 함수로 디자인 돼 있다.
메서드로 reduce를 제공한다.
ReduxFluxUtils
14. FluxUtils
페이스북의 웹 개발자 빌 피셔(Bill Fisher)가
개발해 제공하는 기본 유틸리티 클래스 집합
이벤트 중앙 허브 격인 「Dispatcher」만제공하는
처음과 달리 다양한 Store와 Container를
실체화해 제공
108. 규칙 2.
특정 컴포넌트의 상태를 다른
컴포넌트에서도 알아야 한다면
Store에 값 추가를 고려한다.
컴포넌트가 컴포넌트를 의존하는
기괴한 형태나 두 컴포넌트를 연결하기
위한 랩퍼 컴포넌트를 늘리지 않는다.
129. 규칙 3.
AJAX나 이벤트에 따른 Dispatch는
Action으로 추상화한다.
컴포넌트에서 Ajax를 직접 사용하면
컴포넌트의 독립성이 저하되고 재사용하기
힘들어진다.
166. 클래스의 구현 로직, 사용 예제를 살펴보면
Store는 비동기 로직을 고려해 디자인돼
있지 않다는 사실을 알 수 있다.
171. 규칙5.
UI가 크게 변경되거나 Container가 커진
다면 URL 디자인을 고려한다.
하나의 URL에 너무 많은 요소를 담을 때
Container는 거대해지고 관리하기힘들어
진다.
173. UI가 복잡해 짐에도 하나의 URL로 모든
인터렉션을 처리하면 Container가 크게 복잡해진다.
174. return (
<div>
<Header date={params.date}/>
<Sidebar date={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>
);
예약 현황을 출력하는
컴포넌트 조합
회의실 예약 시 사용하는
예약 하기 모달 창