자기소개

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

react.js를 실 서비스에

적용하면서 느꼈던 내용들을

공유하고자 합니다.

react.js?

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

대표적인 사용처

...and many more...

https://github.com/facebook/react/wiki/Sites-Using-React

첫 도입 시도

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

목표

개발은 끝냈지만..

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

그러나 제일 큰 문제는

눈물을 머금고 DROP

그러다 찾아온 두번째 기회

신규 프로젝트

Async Client Side Rendering

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

반복되는 화면 요소

Home

호텔 목록

호텔 상세

호텔을 못 찾겠다!

팀 개발자들의 요구사항

상식적이고 모던하게 개발하자
요새 좋은 도구들 많던데 우리도 좀 써보자
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분에 한번씩 PG 결제 직전까지 태우는 테스트를 돌림

테스트가 깨지면....

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

같은 컴포넌트에 CSS만

다르게 입힌 것

그외에 재사용된 Component

..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

React.js 실서비스

적용기