React 사용사례

FBDG 2015

Created by Ironhee

안녕하세요 발표자 Ironhee(이철희) 라고 합니다. 이번 시간에는 React 사용 사례에 대해서 이야기 해보려 합니다.

Ediket

https://ediket.com

기술적인 내용을 이야기하기 전에, 저가 다니고 있는 스타트업에 대해 간단하게 소개드리겠습니다.

Ediket은 영어 첨삭이 필요한 고객과 첨삭이 가능한 원어민 에디터를 연결해주는 온라인 첨삭 플랫폼입니다. Ediket이 제공하는 기능들에 대해서 간단한 동영상을 보여드리겠습니다.

상황

먼저 저희 개발팀의 상황을 짚고 넘어가보겠습니다.

구현로직

Backend < Frontend

저희 서비스의 구현로직은 프론트엔드 작업에 집중된 형태입니다. 예를들자면

스타트업

잦은 기획의 변경

개발팀

3명

목표

글로벌 플랫폼

유연하고효율적이면서확장가능한 개발구조

기존 개발스택

Backbone + Marionette + Handlebarsmv*

DOM 직접 제어

View 복잡함

가독성 낮음

재사용성 낮음

협업 어려움

Require.jsModule Loader

AMD 전용 코드

Dependencies Hell

복잡함

Flask + Jinja2 + Babelserver-side template

프론트 개발자: 백엔드 코드를 작성

백엔드 개발자: 프론트 코드를 작성

Context Switching Cost

프론트와 백엔드의 역할 분리 X

FlaskServer-Side Routing

프론트 개발자: 백엔드의 구현에 의존

팀의 핵심역량 = 프론트

Client-Side Routing 필요

GruntTask Runner

더 좋은 대안

Gulp

NPM scripts

ES7 Generator

현재 개발 스택

React + Flux(Reflux)mv*

View 단순함

가독성 높음

재사용성 높음

협업 쉬움

Webpackmodule bundler

NPM 생태계

Chunk + Lazy Loading

Plugin + Loader (Babel, Sass, postCSS)

var _ = require('lodash');  // load node module
var path = require('path');  // load built-in module

function helloWorld() {
  console.log('hello world!');
}

module.exports = helloWorld;  // export like node module

/* webpack.config.js */
export default {
  // configs...
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: VERBOSE,
      },
    }),
  ],
  module: {
    loaders: [
      {
        test: /\.(js|es6)$/,
        include: path.join(__dirname, '../src'),
        loaders: [...DEBUG ? ['react-hot'] : [], 'babel'],
      },
      {
        test: /\.scss$/,
        include: path.join(__dirname, '../src'),
        loaders: ['style/useable', 'css', 'postcss', 'sass?sourceMap'],
      },
      {
        test: /\.css$/,
        loaders: ['style/useable', 'css', 'postcss'],
      },
    ],
  },
};

BabelJS compiler

ES6 / ES7

JSX

import _ from 'lodash';

const helloWorld = () => {
  console.log('hello world!');
}

const jsx = (

Hello world

); export default helloWorld;

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var helloWorld = function helloWorld() {
  console.log('hello world!');
};

var jsx = React.createElement(
  'div',
  null,
  React.createElement(
    'h1',
    null,
    'Hello world'
  )
);

exports['default'] = helloWorld;
module.exports = exports['default'];

React + React-Intl + Nunjucksclient-side template

프론트 개발자: 프론트 코드를 작성

백엔드 개발자: 백엔드 코드를 작성

단일 책임 원칙

React-RouterClient-Side Routing (SPA)

백엔드라우팅 의존성 제거

추가적 Refresh X

Chunk + Lazy Loading

ES7 GeneratorTask runner

Just Javascript

유연함

단순함

개발 시나리오

'쿠폰 생성 페이지가 필요해요!'

Run Webpack Devserver

Dummy Component 작성

Router 에 Component 추가

Header 에 CouponPage Link 추가

Browser 에서 구현 확인

Component UI 구현

Style 적용

Store 및 Action 구현

Component 에서 Store & Action 이용하도록 변경

Browser 에서 구현 확인

다국어 (Intl) 적용

서버와 연동 (REST API)

Web

http://ironhee.github.io/ironhee-frontend-boilerplate

Source

https://github.com/ironhee/ironhee-frontend-boilerplate

얻게된 것

단순함

유연함

재사용성

개발속도

가장 중요한 것

소통

신뢰

Thanks to

End

Event

https://ediket.com/coupon/

React 사용사례 FBDG 2015 Created by Ironhee 안녕하세요 발표자 Ironhee(이철희) 라고 합니다. 이번 시간에는 React 사용 사례에 대해서 이야기 해보려 합니다.

React 사용사례 – FBDG 2015 – Ediket

FBDG