React 사용사례

FBDG 2015

Created by Ironhee

Ediket

https://ediket.com

상황

구현로직

Backend < Frontend

스타트업

잦은 기획의 변경

개발팀

3명

목표

글로벌 플랫폼

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

기존 개발스택

Backbone + Marionette + Handlebars
mv*

DOM 직접 제어

View 복잡함

가독성 낮음

재사용성 낮음

협업 어려움

Require.js
Module Loader

AMD 전용 코드

Dependencies Hell

복잡함

Flask + Jinja2 + Babel
server-side template

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

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

Context Switching Cost

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

Flask
Server-Side Routing

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

팀의 핵심역량 = 프론트

Client-Side Routing 필요

Grunt
Task Runner

더 좋은 대안

Gulp

NPM scripts

ES7 Generator

현재 개발 스택

React + Flux(Reflux)
mv*

View 단순함

가독성 높음

재사용성 높음

협업 쉬움

Webpack
module 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'],
      },
    ],
  },
};

Babel
JS 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'];