React.js 실서비스 적용기

Coupang

Bali 팀

김태희

자기소개

• 이름은 부끄럽게도... 김태희
• JSP, Spring으로 웹 개발에 입문
• 요즘은 node.js를 비롯한 javascript 를 파는 중...
• coupang에서 bali 라는 팀에서
  여행 관련 서비스를 개발하고 있습니다.

react.js를 실 서비스에 적용하면서 느꼈던 내용들을 공유하고자 합니다.

react.js?

• facebook이 만든 view engine
• MVC 패턴에서 V만 담당
• JSX
• Component Base

대표적인 사용처

 첫 도입 시도

• API 규격이 바뀜
• 기존 Server Side 기반의 화면을 Client Side 기반으로 변경(레이턴시 이슈)
• Component 단위로 만들어서 재사용가능하도록 만드는 것이 목적

목표

개발은 끝냈지만..

• 환경적인 문제
• 개발시의 문제점
  • 별도의 gulp watch를 실행해야하고
  • gulp를 통한 rebuild가 너무 오래 걸렸음
    (대략 8초)
• deploy process 문제
• 그외 자잘한 문제들

그러나 제일 큰 문제는

눈물을 머금고 DROP

그러다 찾아온 두번째 기회

신규 프로젝트

Async Client Side Rendering

• 서비스 특성 상 외부 연동을 통한 API 호출이 많음
• 데이터 조회 속도 때문에 ajax를 통한
  client side rendering이 필요해짐

반복되는 화면 요소

팀 개발자들의 요구사항

• 상식적이고 모던하게 개발하자
• 요새 좋은 도구들 많던데 우리도 좀 써보자
• IE 7 드랍좀....

PO 님의 요구사항

• 뭘 쓰던 좋으니까 빨리 만들어라

Front End Tools

• jsx transpiling 목적
• ecma 2015의 적극적인 사용
  • class
  • arrow function
  • block scope variable
  • string template

• ecma 2015의 import 키워드를 통해 js, css bundling + minify
• 의존성 추적이 되서 js 패키지 리팩토링을 겁없이 할 수 있었음

webpack-dev-server

• local에서 개발할 때만 사용
• gulp watch를 대체
• hot loader 지원
  • 파일 변경 감지해서 자동으로 현재 화면에 반영
  • 새로고침 주도 개발 일부 탈피

and dummy server

• 별도의 tomcat 서버 없이 webpack-dev-server만 띄워서 개발할 수 있게 만드려는 게 목적
• node.js의 express를 통해 url end point 및 api proxy, api mocking

• selenium driver 기반의 e2e test tool
• build / deploy에 대한 제약이 아닌 최소한의 보호장치로 사용
• jenkins를 이용해 30분에 한번씩 주문 직전까지 태우는 테스트를 돌림

테스트가 깨지면....

React Developer Tools

• Chrome, Firefox 지원
• React Component 기준으로 DOM Tree를 볼 수 있음
• 특정 Component의 현재 state 및 props를 볼 수 있고, state를 직접 수정할 수도 있다.
• 데이터 흐름 추적에 큰 도움

esdoc

jenkins build를 통해 생성

• jsx 지원
• 일관된 코딩 스타일 유지를 위함
• 일부 에러 사전 방지 효과

Architecture

Rendering Flow

프로젝트 분리

• 기존엔 spring mvc project 아래에 위치해있던 client resource들을 모두 별도의 프로젝트로 분리
• 사내 nexus에 npm publish 해서 다른 프로젝트에서도 npm install을 통해 쓸 수 있는 구조
• client와 server가 완전히 분리됨으로써 java외 서버로도 서비스 가능해짐

개발 시에는...

• webpack-dev-server를 통해 bundle.js, bundle.css를 제공 받음

배포 시에는...

• 빌드에 gradle을 사용 중
• 서버 환경은 spring + tomcat
• webpack build를 통해 spring project의 WEB-INF 안에 bundle file들을 생성함
• 빌드 시 gradle task를 통해 npm build 명령어를 수행

Server Side

• Spring MVC로 url end point 처리
• 초기 rendering에 필요한 데이터를 model에 적재해서 사용

@RequestMapping({"/hotels/{productId}", "/overseas/hotels/{productId}"})
@CoupangWebLayoutEnable
public String hotelDetail(@PathVariable Long productId,
		Model model) {

    HotelDto hotelDto = overseasHotelService.findOverSeasHotel(productId);
    if (hotelDto == null) {
        return "pages/pc/hotel/overseas/hotelNotFound";
    }

    model.addAttribute("hotel", hotelDto);

    createMetaInfo(model, hotelDto);

    return "pages/pc/hotel/overseas/hotelDetail";
}

Server Side

• server side handlebars로 초기 rendering
• OG 태그를 위한 meta tag 처리
• Spring model에 넣은 JSON을 rendering

{{#partial "head"}}
  {{#unless hotLoaderEnable}}
    {{assetStyle "bundles/pc.overseas.tdp.HotelDetailController.bundle.css"}}
  {{/unless}}
{{/partial}}
 
{{!-- 메뉴별 바디 영역 --}}
{{#partial "body"}}
  {{!-- 해당 영역 아래에 react를 통한 client side rendering이 이루어진다. --}}
  <div id="booking-contents" class="booking-main-wrapper"></div>
{{/partial}}
 
{{#partial "script-page"}}
  {{!-- 서버에서 spring의 model에 넣어준 값들을 application/json 형식으로 미리 렌더링하여 가져다 쓰는 구조 --}}
  <script id="hotel" type="application/json">{{json hotel}}</script>
  <script id="user" type="application/json">{{json user}}</script>
  {{#if hotLoaderEnable}}
    {{assetScript "devModeChecker.js"}}
    <script src="http://{{serverName}}:3001/bundles/pc.overseas.tdp.HotelDetailController.bundle.js"
            type="application/javascript"
            onerror="handleDevModeScriptLoadingFail()"></script>
  {{else}}
    {{assetScript "bundles/pc.overseas.tdp.HotelDetailController.bundle.js"}}
  {{/if}}
{{/partial}}

multi entry point

• SPA 방식이 아닌, 각 화면별로 webpack entry point 를 분리
• ~Controller라는 접미사를 붙여서 사용
• 초기 데이터 로딩 및 주요 state 관리, 최초 렌더링을 담당

import React from 'react';
import ReactDOM from 'react-dom';

import JSONLoader from 'utils/JSONLoader';
  
export default class HotelDetailController extends React.Component {
  ... controller react component 구현
  
  state = {    
    hotel: JSONLoader.load('hotel') 
  };
  
  componentDidMount () {
    // 컴포넌트가 렌더링된 이후에 1회 실행
    // ajax를 통해 비동기로 데이터를 가져오는 코드도 보통 이곳에 들어옴
  }

  render () {
    // rendering code
    return (
      <div>hello bali!</div>
    );
  }

  // 이벤트 핸들러들
  handleXXX() = (e) => {
  };
}
  
// 실질적인 렌더링은 여기서 일어남
try {
    ReactDOM.render(<HomeController />, document.getElementById('booking-contents'));  
} catch (e) {
    console.error('[Home rendering error]', e);
}

Ajax Pattern

• Root Component 에서 ajax 처리를 모두 담당하고, 실제 데이터가 필요한 하위 Component까진 props로 넘기는 구조
• props 로 넘기는 노가다가 있지만, 나중에 데이터 흐름 파악하기가 쉽다.
• http://andrewhfarmer.com/react-ajax-best-practices/

무엇이 좋아졌나?

Client와 Server의 완전한 분리

• Server Side에 의존적이지 않은 Client 구조
• 개발된 UI Component를 다른 페이지, 다른 프로젝트에 재사용하기가 매우 좋아짐

Component Tree

• 실제 그리는 영역별로 Component가 쪼개져 있기 때문에 고쳐야 하는 부분이 명확해짐
• 쪼개진 Component 별로 재사용이 수월

propTypes

• propTypes 를 통한 props의 데이터 형 정의를 통해 잘못된 데이터 흐름을 미연에 방지
• 소스코드 가독성도 좋아지는 효과

재사용 가능한 Component

<PCQuickSearch />

같은 컴포넌트에 CSS만

다르게 입힌 것

그외에 재사용된 Component

<StaticGoogleMap />

<HotelStars />

<PriceText />

<HotelDecriptionText />

<Breadcrumb />

..and many more...

프로젝트 완료 후,

팀원들에게 물어봤습니다.

좋아진 점

• state와 props를 통해서만 Component 간의 데이터가 흐르므로 데이터 흐름 파악이 용이해서 좋았다.
• propTypes를 통한 type checking 
• 일관된 this context
• state update시 알아서 화면이 바뀌므로 rendering에 신경 쓸 부분이 줄어듦
• 자연스럽게 팀 내 코딩 컨벤션이 생김
• 코드 퀄리티가 전체적으로 좋아짐
• 팀 내 다른 개발자가 작성한 Component를 가져다 쓰기가 매우 쉬워서 좋았다.

아쉽거나 개선되어야 할 점

• 익혀야 할 기술이 많고, 개념 전환이 어려웠다.
• 개발할 때 서버를 두대 띄워야 한다.
• 간단한 DOM 조작으로 해결될 문제도 복잡하게 처리해야 하는 경우가 생김
• input 처리
• 0.14 기준 react가 자동으로 만들어주는 span의 문제
  => 공용 css 등에 span 자체에 걸려있는 css가 있다면 자연스럽게 side effect 생김
• build에 사용된 npm modules의 완성도가 떨어져 삽질을 했던 경우도.
  • 어느날 갑자기 빌드가 안 되는 경우도 있었다.
• windows 7 문제

Tips

windows 7 개발 환경 문제

• npm 2.x.x를 쓸 경우 node_modules 의존성의 긴 경로명이 문제를 일으키기 때문에 반드시 npm 3.x.x를 써야함.
• 그럼에도 불구하고 일부 module은 windows 7에서 정상동작을 안 하는 경우가 있다.
• 전체적으로 watch 성능이 떨어지는 느낌적인 느낌

Client Side Rendering의 숙명

• 그것은 화면 깜빡임
• server side rendering하는 곳에서 wire frame이라도 잡아두는 것이 좋다.

<div id="booking-contents">
  <div class="live-search-section clearFix">
    <div class="dummy-block" style="margin-bottom:5px;height:48px"></div>
    <div style="background-color:#eaf6ff;height:59px;margin-bottom:10px;"></div>
    <div class="filter">
      <div class="dummy-block" style="background-color:#fff6d2;width:240px;height:340px;"></div>
      <div class="dummy-block" style="width:240px;margin-top:10px;height:358px;"></div>
    </div>
    <div class="booking-hotel-list">
      <div class="live-list">
      <div class="dummy-block" style="background-color:#fff;margin-top:35px;height:30px;"></div>

      <div class="dummy-block" style="background-color:#fff;height:202px;margin-top:8px;">
        <div style="float:left;width:198px;height:200px;border-right:1px solid #ccc;"></div>
      </div>
      <div class="dummy-block" style="background-color:#fff;height:202px;margin-top:8px;">
        <div style="float:left;width:198px;height:200px;border-right:1px solid #ccc;"></div>
      </div>
      <div class="dummy-block" style="background-color:#fff;height:202px;margin-top:8px;">
        <div style="float:left;width:198px;height:200px;border-right:1px solid #ccc;"></div>
      </div>
      <div class="dummy-block" style="background-color:#fff;height:202px;margin-top:8px;">
        <div style="float:left;width:198px;height:200px;border-right:1px solid #ccc;"></div>
      </div>
      <div class="dummy-block" style="background-color:#fff;height:202px;margin-top:8px;">
        <div style="float:left;width:198px;height:200px;border-right:1px solid #ccc;"></div>
      </div>
      </div>
    </div>
  </div>
</div>

 Dummy Markup 처리

Ajax Control

• 실시간 해외호텔 예약 서비스의 경우 ajax 요청이 빈번하게 일어남
• chrome 기준 http 동시에 맺을 수 있는 갯수는 6개

• 직접 Queue 처리하거나 bluebird.js로 처리함
  • Promise.map과 concurrency 옵션 이용

우리의 숙적 Legacy IE

• react.js 0.14 버전은IE 8부터 지원
• 차기 버전인 15 버전 부터는 IE 9부터 지원
• 힘냅시다 여러분...

Q & A

많이 써주세요...

http://travel.coupang.com

감사합니다!