Web 응용 프로그램은 대화하는 속도로 개발하자 ~ React과 BFF에서 빠르게 프로토 타이핑 기술 - 2

BFF에서 모의 ​​API를 만들자

　UI에 표시 할 데이터는 무엇입니까? 백엔드를 모두 갖추고 프런트 엔드를 개발하는 방법, 프로토 타이핑에서 요구되는 속도에 도달 할 수없는 것입니다.

　이것을 해결하는 방법 중 하나가 모의 API입니다. 모의 (mock)는 '모방적인 "이라는 뜻으로, 모의 API는 RDBMS 등의 백엔드 서비스를 호출하지 않고 HTTP 요청에 대한 고정적인 더미 JSON을주고받습니다. 중요한 부분 이외 모의 API를 사용하여 신속하게 프런트 엔드 형태로 가치를 평가 해 봅시다.

K5 Playground에서 모의 ​​API를 만들

　K5 Playground에서 모의 ​​API를 만드는 것은 간단합니다. 기존의 API 논리와 하늘의 API 로직 (Empty Logic)을 교환하여 모의 데이터를 쓸뿐입니다. 구체적인 단계를 살펴 보자.

1. 먼저 중앙에있는 API 논리를 ×을 클릭하여 삭제합니다.
2. 다음 마우스 오른쪽 메뉴의 Custom에있는 "Empty Logic '을 중앙에 드래그 앤 드롭합니다.
3. 마지막으로 Empty Logic의 next()메소드의 인수에 모의 객체를 전달합니다.

　여기에 정적 객체를 next()전달했을뿐입니다 만, 조건에 따라 동적으로 객체를 생성하면 고급 모의 API를 만들 수 있습니다. HTTP 요청의 내용에 따라 응답을 분기시키고 싶은 경우는 HTTP 요청의 개체 req를 참조합니다. 예를 들어 URL의 쿼리 문자열라면 req.query.KEY_NAME에서 볼 수 있습니다. HTTP 요청 개체 req의 자세한 내용은 K5 Playground의 BFF도 이용하고있는 Node.js의 Web 어플리케이션 프레임 워크 express 문서를 참조하십시오.

API의 설계를 향상시키기위한 모의 API

　모의 API의 또 다른 장점은 작동하도록 설계 인 것입니다.

　API 단체로는 좋을 것 같은 디자인 이어도 프런트 엔드 설계를 생각하고 디자인을 생각하면 "페이지 당 트랜잭션 수가 많다"며 "응답 JSON의 구조와 형태가 취급하기 힘든"는 불만이 나오고 오는 것은 드문 일이 아니다. 조기에 모의 API를 작성하여 프론트 엔드의 동작을 고려하여 개선점을 밝혀내어 API의 설계를 수정할 수 있습니다. 모의 API 단계에서 다양한 API 이용자의 목소리를 듣고 질을 높이는 것이 중요합니다.

　또한 BFF가없는 아키텍처의 경우 기술적으로 모의 API 자체를 쉽게 수정할 수 있지만 정품 백엔드는 조직이나 비용 측면에서 해결이 어려운 경우가 많이 있습니다. K5 Playground는 BFF가 있기 때문에 백엔드와 거리를두고 프런트 엔드와 친 화성이 높은 API를 BFF에서 제공합니다.

Flux에서 모의 ​​Action Creator와 모의 Store를 만들려고 (1)

　개발의 속도를 더욱 추구하려는 경우 데이터의 생성 지점을 모의 API 대신 프런트 엔드의 내부로 이동시킬 수 있습니다. API를 호출 한 후 더미 데이터를 생성하는 것이 아니라, API를 호출하지 않고 프런트 엔드 내부에 더미 데이터를 생성하는 방법입니다.

　일반적으로 Single Page Application (SPA)는 백엔드에서 취득한 데이터 등 프런트 엔드 "상태 (state)"을 어떤 방법으로 관리하여 UI에 표시됩니다. React과 Flux의 경우 "Store"라는 Flux의 구성 요소가이 state를 관리하는 역할을 담당합니다. state를 다양한 방법으로 모의 화 프런트 엔드에서 더미 데이터를 생성하여 애플리케이션을 빠르게 개발할 수 있습니다.

　우선 state 관리에 중요한 Flux 아키텍처를 살펴 보자.

Flux 아키텍처 개요

　Flux 는 Facebook이 제창 한 프런트 엔드를위한 아키텍처입니다. 프런트 엔드 "상태"의 관리에 중점을두고 있습니다. React와 친 화성이 높은뿐만 아니라 JavaScrip 이외의 언어와 프레임 워크의 프론트 엔드에 적용 할 수있는 구조입니다.

　Flux 아키텍처는 View, Action / Action Creator, Dispatcher, Store에서 구성됩니다.

Flux의  구성 요소	요약	K5 Playground에서의  파일 위치
View	React Component와 Container	frontend/app/components
ActionCreator	이벤트를 처리하고 결과를 Action 형식으로하는 Dispatcher에 전달 메소드	frontend/app/actions
Action	이벤트의 처리 결과 (API 응답 등)	frontend/app/actions
Dispatcher	Action를 Store에 제출하는 허브 기능	frontend/app/dispatcher
Store	상태를 관리하는 비 영구 데이터 저장소	frontend/app/store

　Flux 아키텍처를 Facebook의 Flux 라이브러리 를 이용한 샘플 코드를 통해 설명합니다.

　우선 View 인 React Component를 기점으로합니다. 사용자가 React Component에서 마우스 클릭 등의 이벤트를 발생 시키면 이벤트 핸들러가 호출됩니다. Button의 React Component를 사용하는 예입니다. 클릭하면 같은 React Component에 정의 된 handleClick메소드를 호출합니다.

 <Button onClick = { this . handleClick } title = "Update" />  

　이벤트 핸들러는 Action Creator를 호출합니다.

 handleClick = () => ActionCreator . updateOrder ();   

　Action Creator의 기본 형식입니다. 이벤트에 대한 처리를하고 결과를 Action이라는 객체하여 Dispatcher의 dispatch()메소드에 전달합니다. 이벤트에 대한 처리의 예는 API 호출이나 DB 호출 업무 로직의 실행 등 백엔드가 관련되는 프런트 엔드 내부에 닫힌 것까지 다양합니다. dispatch()전달 된 Action 그때 Store에 제출됩니다.

// 여러 Action Creator의 집합 const ActionCreators = { // Action Creator 
 updateOrder : () => { // 1. API를 호출 
   api . get ( url ) then ( body => { // 2. API 응답 로부터 Action을 생성 할 const action = { 
       type : 'order / update' // Aciton의 종류를 나타내는 식별자 
       data : body   // 이벤트의 결과 } // 3. Dispatcher를 통해 Store에 Action를 보낼 Dispatcher . dispatch ( action
   
    
    
     
        
     
     
     ); }) } }
   
 

　위의 설명으로 설명했지만 더 간결하게 작성할 수 있습니다.

 updateOrder : () => api . get ( url ) then ( body => Dispatcher . dispatch ({ type : 'order / update' , data : body }))    

　Store에서 ActionCreator이 Dispatcher로 전달 Action를 받고 새로운 상태 (state)를 만들어냅니다. Store는 getInitialState()과 reduce ()의 두 가지 방법이 있습니다. getInitialState()반환 값은 Store의 초기 값을 설정합니다. reduce()는 현재의 state와받은 action때문에 새로운 state을 만듭니다.

import { ReduceStore } from 'flux / utils' ; // ReduceStore을 사용하는 것이 기본입니다. import AppDispatcher from '../dispatcher/AppDispatcher' ;      
   

class OrderStore extends ReduceStore { // Store의 초기 state를 반환 필수 메소드입니다. 
 getInitialState () { return {}; // 초기 state를 정의합니다. } // 현재의 state와 action을 받고 새로운 state를 반환 필수 메소드입니다. 
 reduce ( state , action ) { switch ( action . type ) { // action의 type에 의해 Store의 state를 만드는 방법을 분기시킵니다. case 'order / update' : { // 주문 업데이트의 예 return action . data ; //받은 action을 그대로 새로운 state하는 예입니다. }    
  
     
 
  
      
        
        
     
     case 'order / delete' : { // 주문 삭제 예 return {}; // 빈 객체를 새로운 state를하는 예입니다. } default : { return state ; } } } } export default new OrderStore ( AppDispatcher );   
         
     
      
       
     
   
 

   

　Store의 내용이 업데이트되면 그것을 자동으로 Container를받습니다. Container는 다음을 포함 Store에서 데이터를받을 만의 특별한 React Component입니다. Container가 Store의 내용을 받으면 부하의 React Component에 전달합니다.

import React , { Component } from 'react' ; import { render } from 'react-dom' ; import { Container } from 'flux / utils' ; // 샘플 (Reduce) Store입니다. import OrderStore from './stores/OrderStore' ; import RecommendationStore from './stores/RecommendationStore' ;      
   
     

   
   

class OrderContainer extends Component { static getStores () { return [ OrderStore , RecommendStore ]; // state 싶어 ReduceStore을 정의합니다. }    
  
      
 

 static calculateState () { return { // 취득한 state 여기에 정의 된 형식으로 볼 수 있습니다. 
     order : OrderStore . getState (), 
     recommendation : RecommendationStore . getState () }; } 
       
   
 

 render () { // Store에서 취득한 state를 부하의 React Component에 전달합니다. < OrderPage 
     order = { this . state . order } 
     recommendation = { this . state . recommendation } /> } } 
   
   
   
 


export default Container . create ( OrderContainer );  

　View에서 시작하여 ActionCreator, Dispatcher, Store를 통해 다시 View로 돌아 왔습니다. 본 페이지 시작 부분의 그림과 같이 데이터를 일방 통행으로 흘려 단순화하는 것이 특징입니다.

　다음 페이지에서 Flux 아키텍처에서 모의을 실현하는 방법을 두 가지 소개합니다.