Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
김태곤
ReactJS로 시작하는
멀티 플랫폼 개발하기
오늘 소개할 내용
• ReactJS
• Server-side rendering
• React Native
• Desktop Web App
• React Native Desktop
ReactJS
Chapter 1
, 0
페이스북, 인스타그램같은
크고 복잡한 애플리케이션 제작을 위한
라이브러리 필요
MVC는 어쩌고?
MVC는
적합하지 않음
복잡한 UI에
끊임없이 변하는
M, V ,C가 상호 의존적인 구조
과도하게 연결된 컨트롤러
어디서 변할 지 모르는 모델
어쩌냥..
아!
재사용 가능한
UI 컴포넌트를 만드는
뷰 전용 라이브러리를
개발하면 되겠고냥
※ 실제로 고양이가 만든 건 아닙니다
a 4
멋진 웹 사이트를
만든다고

생각해봅시다
멋진 웹 사이트를
만든다고

생각해봅시다
여러 개
필요한 부품을
웹 사이트마다
새로 만든다면?
그래서 부품을

미리 정의하고

조립해서

결과물을 만듭니다.
웹은 이미
많은 컴포넌트의
조합입니다.
웹은 이미
많은 컴포넌트의
조합입니다.
CSS
HTML
JS
웹은 이
많은 컴
조합입
HTML
일단 여기에 집중해 봅시다
jQuery UI 탭 패널을 위해 필요한 HTML 코드
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</...
웹은 이
많은 컴
조합입
HTMLjQuery UI 탭 패널을 만들 때 필요한 HTML 코드
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href...
웹은 이
많은 컴
조합입
HTML
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li>...
웹은 이
많은 컴
조합입
HTML
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li>...
웹은 이
많은 컴
조합입
HTML
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li>...
, 0
가상 DOM
JSX 문법
단방향 데이터 흐름
Virtual DOM
One-way data flow
가상 DOM JSX 문법 단방향 데이터 흐름
- 스토얀 스테파노프, Yahoo YSlow 아키텍트
“자바스크립트에서 DOM 접근은 가능한 최소화하라”
가상 DOM JSX 문법 단방향 데이터 흐름
• 메모리에 가상의 DOM 트리를 구축
가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
Before After
가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
Befor...
가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
• 임의의...
가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
• 임의의...
가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
• 임의의...
가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
• 임의의...
가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
• 임의의...
가상 DOM JSX 문법 단방향 데이터 흐름
• 자바스크립트 안에 XML을 표현하는 문법
var app = <Nav color="blur" />;
• 자바스크립트 코드로 변환해서 사용
var app = React.cre...
가상 DOM JSX 문법 단방향 데이터 흐름
• 데이터는 상위 컴포넌트에서 하위 컴포넌트로만 흐름
• 상위에서 전달받은 값(props)은 수정 불가(immutable)
• 상위 컴포넌트는 하위 컴포넌트의 이벤트를 전달받...
c
var React = require('react');
var ReactDOM = require('react-dom');
var App = React.createClass({
render: function(){
retur...
var React = require('react');
var ReactDOM = require('react-dom');
var App = React.createClass({
render: function(){
retur...
var React = require('react');
var ReactDOM = require('react-dom');
var App = React.createClass({
render: function(){
retur...
var React = require('react');
var ReactDOM = require('react-dom');
var App = React.createClass({
render: function(){
retur...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
...
보통 프론트엔드 도구를 사용해 미리 변환
var React = require('react');
var ReactDOM = require('react-dom');
var App = React.createClass({
render: function(){
retur...
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
retur...
c
var React = require('react');
var ReactDOM = require('react-dom');
var Link = React.createClass({
render: function() {
ret...
var React = require('react');
var ReactDOM = require('react-dom');
var Link = React.createClass({
render: function() {
ret...
ReactDOM.render(
  <App list={[1, 2, 3]} />,
  document.getElementById('example')
);
var React = require('react');
var Rea...
ReactDOM.render(
  <App list={[1, 2, 3]} />,
  document.getElementById('example')
var ReactDOM = require('react-dom');
var...
var Link = React.createClass({
render: function() {
return <a href={"/path/to/"+this.props.num}>Link</a>;
}.
});
var App =...
var Link = React.createClass({
render: function() {
return <a href={"/path/to/"+this.props.num}
onClick={this.props.onClic...
var Link = React.createClass({
render: function() {
return <a href={"/path/to/"+this.props.num}
onClick={this.props.onClic...
c4
?
이미 많은 서비스가 React 사용 중
심지어 페이스북은 알파 버전 사용 중!
참고자료
https://taegon.kim/archives/5288
Flux와 Redux
http://www.slideshare.net/jeokrang/facebook-react-55649927
Facebook은 Rea...
Server-side Rendering
Chapter 2
성능
페이지 로딩 + 자바스크립트 로딩 + 렌더링 =

초기 구동 속도가 느리다
검색 엔진 최적화
자바스크립트를 실행하지 못하는 크롤러는

페이지의 콘텐츠를 수집하지 못한다
클라이언트 렌더링의
성능

매번 전체 페이지를...
성능

페이지 로딩 + JS 로딩 + 렌더링 (+ 데이터 로딩)=

초기 구동 속도가 느림
검색 엔진 최적화

자바스크립트를 실행하지 못하는 크롤러는

페이지의 콘텐츠를 수집하지 못함
단점클라이언트 렌더링의
둘 다!
그래서 해답은?
+ 서버 렌더링클라이언트 렌더링
빈 페이지 App
HTML 문서 전송 JS 전송 후 렌더링빈
콘텐츠를 볼 수 없음
클라이언트 렌더링
App
+ 서버 렌더링
JS 전송 후
DOM에 붙음
HTML 문서 전송
렌더링된
콘텐츠는 볼 수 있지만,
인터랙션은 아직 동작 안함
R
사용자가 느끼는
웹 사이트 반응 속도는
콘텐츠를 처음 본 시간에
영향을 받는다
c
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
retur...
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
retur...
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App ex...
import ReactDOM from 'react-dom';
DOM 관련 부분만 별도 파일로 분리
import React, { Component } from 'react';
ReactDOM.render(
  <App l...
import ReactDOM from 'react-dom';
DOM 관련 부분만 별도 파일로 분리
import React, { Component } from 'react';
class App extends Compone...
import ReactServer from 'react-dom/server';
서버 렌더링은 react-dom/server 사용
import React, { Component } from 'react';
class Ap...
import ReactServer from 'react-dom/server';
결과물을 HTML 페이지에 출력
<body>
<div id="example">
{{result}}
</div>
</body>
var resu...
import ReactServer from 'react-dom/server';
결과물을 HTML 페이지에 출력
<body>
<div id="example">
{{result}}
</div>
</body>
var resu...
렌더링된 결과물이 서버에서 전송된 예제
Isomorphic JavaScript
서버와 클라이언트가 같은 코드를 공유하는 개발 방식같은 코드를 공유
Client Server
공통
코드
Isomorphic JavaScript
서버와 클라이언트가 같은 코드를 공유하는 개발 방식
Client Server
React
같은 코드를 공유
참고자료
https://taegon.kim/archives/5312
React 애플리케이션의 서버 렌더링
http://isomorphic.net/
React를 비롯한 Isomorphic JavaScript 라이브러리를 ...
React Native
chapter 3
Virtual DOM DOM
Virtual DOM의 결과물은 DOM이 될 수도 있지만
Virtual DOM DOM
SVG
Canvas
"string"
문자열, SVG, Canvas 등으로 확장 가능
예제: React ART
...
renderGraphic: function(rotation) {
return (
<Group
onMouseDown={this.handleMouseDown}
onMouseUp={this.h...
예제: React ART
Virtual DOM DOM
SVG
Canvas
"string"
문자열, SVG, Canvas 등으로 확장 가능
Virtual DOM
Native Component
네이티브 컴포넌트로 확장할 수도 있음
H 4
네이티브 컴포넌트
비동기 실행
Flexbox 레이아웃
폴리필(Polyfill)
간편한 네이티브 확장
네이티브 컴포넌트
비동기 실행
Flexbox 레이아웃
폴리필(Polyfill)
간편한 네이티브 확장
<header> <footer>,
<section> <div> <span>
<img> <a> <strong>
<em> ...
네이티브 컴포넌트
비동기 실행
Flexbox 레이아웃
폴리필(Polyfill)
간편한 네이티브 확장
• 자바스크립트는 네이티브보다 훨씬 느리기 때문에 동기 실행시
네이티브 UI와 자바스크립트 간의 병목 현상 발생
• 네...
비동기 실행
Flexbox 레이아웃
폴리필(Polyfill)
간편한 네이티브 확장
• CSS와 구조가 비슷한 StyleSheet 객체 사용
• CSS3 Flexbox와 비슷한 방식으로 레이아웃 스타일링
var React...
xbox 레이아웃
폴리필(Polyfill)
간편한 네이티브 확장
• XHR, requestAnimationFrame, navigator.geolocation 등
익숙한 자바스크립트 기능 제공
var GeoInfo = R...
리필(Polyfill)
간편한 네이티브 확장
• Java(Android), ObjectiveC/Swift (iOS)로 작성된

네이티브 모듈을 손쉽게 자바스크립트 모듈로 바인딩
// Java
public class My...
, . 1.
$ brew install node watchman
$ node install -g react-native-cli
필요한 패키지 설치 (Xcode 및 안드로이드 SDK 필수)
프로젝트 생성
$ react-native i...
React Playground
데모
• 기본 네이티브 컴포넌트만 사용
• React에 익숙하지 않은 상태에서

대략 20시간 소요
• 네이티브와 똑같은 무한 스크롤 성능
https://www.youtube.com/watch?v=fRaC9jECxCg
페이스북의 AdManager 개발 사례
• iOS 개발 후 안드로이드 버전 개발
• 각 플랫폼에 맞는 네이티브 룩앤필
• 전체 코드의 85% 가량을 재사용
• 두 플랫폼의 저장소 통합 관리
안 배워도 되겠네요?
이제 네이티브를
JS 모르고 jQuery만 알면 되던가요?
결국 네이티브라는 장애물을 넘어야 합니다.
물론 남이 삽질해주길 기다리는 방법도 있죠
삽질의 결과물은 react.parts에서...
참고자료
https://realm.io/kr/news/react-native/
리액트 네이티브로 시작하는 앱 개발 #1
http://react.parts/
React 네이티브 컴포넌트
https://rnplay.org/...
Desktop WebApp
Chapter 4
이미 거의 끝났습니다.
웹 앱이 완성됐다면 데스크톱 앱은
약간의 양념만 있으면 되쥬. 솨아~
은..
크로미움 엔진과 Node.js가 합쳐진 데스크톱 애플리케이션 런타임
은..
코드 하나로 맥, 리눅스, 윈도우 플랫폼과 32/64비트 모두 지원
</>
이미 많은 기업에서 사용 중
은..
최근 워드프레스는 Calypso라는 프로젝트를 통해
wordpress.com의 프론트엔드를 모두 대체
React + Node.js 서버를 사용한 Isomorphic JavaScript
동일한 코드를 Desktop App에도 사용
React 앱 패키징
$ npm install -g electron-packager

$ cd HelloWorld
$ electron-packager . HelloWorldApp --platform=all --arch=...
참고 자료
https://github.com/chentsulin/electron-react-boilerplate
Electron과 React를 사용한 데스크톱 앱 프로젝트 시작 틀
https://github.com/si...
React Native Desktop
Chapter 5
그래도 네이티브가 더 좋다면?
image from 이말년씨리즈
데스크톱 웹 앱 좋은 거 알겠는데
데스크톱 네이티브? 원한다면 주도록 하지
잘 찾아봐. GitHub에 두고 왔으니…
image from 원피스
React Native를
포크한 프로젝트라
사용법도 비슷합니다
예제 실행방법
$ git clone https://github.com/ptmt/react-native-desktop

$ cd react-native-des...
Hello World 앱 크기 비교
React Native Desktop
3.5MB
105.3MB
(OS X 빌드 기준)
하지만
image from 수퍼마리오
윈도우 버전도 없고 (OSX만 지원)
image from 수퍼마리오
기능도 적고 불안정합니다
image from 수퍼마리오
실무에는 절대로 사용하지 마세요!
개발 초기라 매우 불안정하니
Once,Write Run Anywhere
Once, WriteLearn Anywhere
한 번 배워 어디서나 개발하자
https://taegon.kim
@taggon
Thank You!
facebook.com/groups/react.ko
...and
Credits
Twitter and Wordpress icons are made by Freepik from www.flaticon.com
All images without any notes are published u...
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
Upcoming SlideShare
Loading in …5
×

ReactJS로 시작하는 멀티플랫폼 개발하기

24,525 views

Published on

React를 사용해 다양한 플랫폼에서 활용하는 방안을 "얕고 넓게" 다룹니다. 자세한 내용은 슬라이드에 있는 링크를 참고하세요. React, React Native, Electron, React Native Desktop 등이 소개되어 있습니다.

Published in: Engineering

ReactJS로 시작하는 멀티플랫폼 개발하기

  1. 1. 김태곤 ReactJS로 시작하는 멀티 플랫폼 개발하기
  2. 2. 오늘 소개할 내용 • ReactJS • Server-side rendering • React Native • Desktop Web App • React Native Desktop
  3. 3. ReactJS Chapter 1
  4. 4. , 0
  5. 5. 페이스북, 인스타그램같은 크고 복잡한 애플리케이션 제작을 위한 라이브러리 필요
  6. 6. MVC는 어쩌고?
  7. 7. MVC는 적합하지 않음 복잡한 UI에 끊임없이 변하는 M, V ,C가 상호 의존적인 구조 과도하게 연결된 컨트롤러 어디서 변할 지 모르는 모델
  8. 8. 어쩌냥.. 아! 재사용 가능한 UI 컴포넌트를 만드는 뷰 전용 라이브러리를 개발하면 되겠고냥 ※ 실제로 고양이가 만든 건 아닙니다
  9. 9. a 4
  10. 10. 멋진 웹 사이트를 만든다고
 생각해봅시다
  11. 11. 멋진 웹 사이트를 만든다고
 생각해봅시다 여러 개
  12. 12. 필요한 부품을 웹 사이트마다 새로 만든다면?
  13. 13. 그래서 부품을
 미리 정의하고
 조립해서
 결과물을 만듭니다.
  14. 14. 웹은 이미 많은 컴포넌트의 조합입니다.
  15. 15. 웹은 이미 많은 컴포넌트의 조합입니다. CSS HTML JS
  16. 16. 웹은 이 많은 컴 조합입 HTML 일단 여기에 집중해 봅시다
  17. 17. jQuery UI 탭 패널을 위해 필요한 HTML 코드 <div id="tabs"> <ul> <li><a href="#fragment-1">One</a></li> <li><a href="#fragment-2">Two</a></li> <li><a href="#fragment-3">Three</a></li> </ul> <div id="fragment-1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> 웹은 이 많은 컴 조합입 HTML 태그는 충분한가요?
  18. 18. 웹은 이 많은 컴 조합입 HTMLjQuery UI 탭 패널을 만들 때 필요한 HTML 코드 <div id="tabs"> <ul> <li><a href="#fragment-1">One</a></li> <li><a href="#fragment-2">Two</a></li> <li><a href="#fragment-3">Three</a></li> </ul> <div id="fragment-1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div>
  19. 19. 웹은 이 많은 컴 조합입 HTML <div id="tabs"> <ul> <li><a href="#fragment-1">One</a></li> <li><a href="#fragment-2">Two</a></li> <li><a href="#fragment-3">Three</a></li> </ul> <div id="fragment-1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> <li>< ListItem이지만 사실은 탭 <div Division이지만 사실은 탭 패널 의미가 맞지 않는 태그를 컴포넌트로 사용심지어 기능을 정의/사용하는 코드(JS)는 별도 파일에 작성
  20. 20. 웹은 이 많은 컴 조합입 HTML <div id="tabs"> <ul> <li><a href="#fragment-1">One</a></li> <li><a href="#fragment-2">Two</a></li> <li><a href="#fragment-3">Three</a></li> </ul> <div id="fragment-1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> <li>< ListItem이지만 사실은 탭 <div Division이지만 사실은 탭 패널 의미가 맞지 않는 태그를 컴포넌트로 사용 심지어 기능을 정의/사용하는 코드(JS)는 별도 파일에 작성
  21. 21. 웹은 이 많은 컴 조합입 HTML <div id="tabs"> <ul> <li><a href="#fragment-1">One</a></li> <li><a href="#fragment-2">Two</a></li> <li><a href="#fragment-3">Three</a></li> </ul> <div id="fragment-1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> <script> jQuery(function($) { $( "#tabs" ).tabs({ active: 1 }); }); </script> 의미가 더 명확한 쪽은? <Tabs selectedIndex={1}> <TabList> <Tab>One</Tab> <Tab>Two</Tab> <Tab>Three</Tab> </TabList> <TabPanel> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </TabPanel> <TabPanel> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </TabPanel> <TabPanel> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </TabPanel> </Tabs>
  22. 22. , 0
  23. 23. 가상 DOM JSX 문법 단방향 데이터 흐름 Virtual DOM One-way data flow
  24. 24. 가상 DOM JSX 문법 단방향 데이터 흐름 - 스토얀 스테파노프, Yahoo YSlow 아키텍트 “자바스크립트에서 DOM 접근은 가능한 최소화하라”
  25. 25. 가상 DOM JSX 문법 단방향 데이터 흐름 • 메모리에 가상의 DOM 트리를 구축
  26. 26. 가상 DOM JSX 문법 단방향 데이터 흐름 • 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교 • 메모리에 가상의 DOM 트리를 구축 Before After
  27. 27. 가상 DOM JSX 문법 단방향 데이터 흐름 • 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교 • 메모리에 가상의 DOM 트리를 구축 • 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영 Before After
  28. 28. 가상 DOM JSX 문법 단방향 데이터 흐름 • 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교 • 메모리에 가상의 DOM 트리를 구축 • 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영 • 임의의 두 트리를 비교하는 최소 횟수는 O(n^3),
 React에서는 같은 레벨의 트리만 비교하여 O(n)으로 최적화 Before After
  29. 29. 가상 DOM JSX 문법 단방향 데이터 흐름 • 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교 • 메모리에 가상의 DOM 트리를 구축 • 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영 • 임의의 두 트리를 비교하는 최소 횟수는 O(n^3),
 React에서는 같은 레벨의 트리만 비교하여 O(n)으로 최적화 • 그 밖에도 목록 항목의 키 비교, 컴포넌트 비교, 배치 잡, 
 자동 이벤트 위임, 선택적 하위 트리 렌더링 등을 통해
 노력 대비 꽤 나은 성능 보장 Before After
  30. 30. 가상 DOM JSX 문법 단방향 데이터 흐름 • 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교 • 메모리에 가상의 DOM 트리를 구축 • 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영 • 임의의 두 트리를 비교하는 최소 횟수는 O(n^3),
 React에서는 같은 레벨의 트리만 비교하여 O(n)으로 최적화 • 그 밖에도 목록 항목의 키 비교, 컴포넌트 비교, 배치 잡, 
 자동 이벤트 위임, 선택적 하위 트리 렌더링 등을 통해
 노력 대비 꽤 나은 성능 보장 React.js Conf 2015 - Hype! | http://youtu.be/z5e7kWSHWTg?t=4m10s Angular ReactEmber
  31. 31. 가상 DOM JSX 문법 단방향 데이터 흐름 • 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교 • 메모리에 가상의 DOM 트리를 구축 • 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영 • 임의의 두 트리를 비교하는 최소 횟수는 O(n^3),
 React에서는 같은 레벨의 트리만 비교하여 O(n)으로 최적화 • 그 밖에도 목록 항목의 키 비교, 컴포넌트 비교, 배치 잡, 
 자동 이벤트 위임, 선택적 하위 트리 렌더링 등을 통해
 노력 대비 꽤 나은 성능 보장 • Google은 2015년 7월에 Incremental DOM이라는 
 Virtual DOM 라이브러리 발표 • Ember는 Glimmer라는 Virtual DOM 기술 적용 Virtual DOM != Silver Bullet Angular 2 alpha 버전은 Virtual DOM 없이 더 나은 성능을 구현 그래도 꽤 나은 선택 http://goo.gl/k4pYbH
  32. 32. 가상 DOM JSX 문법 단방향 데이터 흐름 • 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교 • 메모리에 가상의 DOM 트리를 구축 • 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영 • 임의의 두 트리를 비교하는 최소 횟수는 O(n^3),
 React에서는 같은 레벨의 트리만 비교하여 O(n)으로 최적화 • 그 밖에도 목록 항목의 키 비교, 컴포넌트 비교, 배치 잡, 
 자동 이벤트 위임, 선택적 하위 트리 렌더링 등을 통해
 노력 대비 꽤 나은 성능 보장
  33. 33. 가상 DOM JSX 문법 단방향 데이터 흐름 • 자바스크립트 안에 XML을 표현하는 문법 var app = <Nav color="blur" />; • 자바스크립트 코드로 변환해서 사용 var app = React.createElement(Nav, {color:"blue"}); • 속성 표현을 통해 문자열은 물론 자바스크립트 값을 그대로 전달 var app = <Nav color="blur" checked={true} name={name||"!"} />; • 필수는 아니지만 거의 모든 React 프로젝트가 사용 중
  34. 34. 가상 DOM JSX 문법 단방향 데이터 흐름 • 데이터는 상위 컴포넌트에서 하위 컴포넌트로만 흐름 • 상위에서 전달받은 값(props)은 수정 불가(immutable) • 상위 컴포넌트는 하위 컴포넌트의 이벤트를 전달받아 업데이트 • 컴포넌트 내부의 상태는 스테이트(state)에 저장 • Flux: 애플리케이션 수준에서 적용한 단방향 데이터 흐름
  35. 35. c
  36. 36. var React = require('react'); var ReactDOM = require('react-dom'); var App = React.createClass({ render: function(){ return <h1>Hello, world!</h1>; } }); ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') );
  37. 37. var React = require('react'); var ReactDOM = require('react-dom'); var App = React.createClass({ render: function(){ return <h1>Hello, world!</h1>; } }); ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); require('react') require('react-dom') Node.js와 같은 CommonJS 방식 사용
  38. 38. var React = require('react'); var ReactDOM = require('react-dom'); var App = React.createClass({ render: function(){ return <h1>Hello, world!</h1>; } }); ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); <h1>Hello, world!</h1> JS에 XML을 바로 쓰는 JSX 문법
  39. 39. var React = require('react'); var ReactDOM = require('react-dom'); var App = React.createClass({ render: function(){ return <h1>Hello, world!</h1>; } }); ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); <App list={[1, 2, 3]} />, 컴포넌트에 프로퍼티 전달(객체도 가능)
  40. 40. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="libs/babel-core/5.8.23/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var App = React.createClass({ render: function(){ return <h1>Hello, world!</h1>; } }); ReactDOM.render( <App list={[1, 2, 3]} />, document.getElementById('example') ); </script> </body> </html> 브라우저에서 해석하게 할 수도 있지만… 번거롭고 불러오는 파일 많고 성능 안 좋고…
  41. 41. 보통 프론트엔드 도구를 사용해 미리 변환
  42. 42. var React = require('react'); var ReactDOM = require('react-dom'); var App = React.createClass({ render: function(){ return <h1>Hello, world!</h1>; } }); ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); 프론트엔드 도구를 사용하면
  43. 43. import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render() { return <h1>Hello, world!</h1>; } } ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); ES2015도 이렇게 쓸 수 있습니다
  44. 44. c
  45. 45. var React = require('react'); var ReactDOM = require('react-dom'); var Link = React.createClass({ render: function() { return <a href={"/path/to/"+this.props.num}>Link</a>; } }); var App = React.createClass({ render: function(){ return ( <div> <h1>Hello, world!</h1> <Link num={this.props.list[1]} /> </div> ); } }); ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') );
  46. 46. var React = require('react'); var ReactDOM = require('react-dom'); var Link = React.createClass({ render: function() { return <a href={"/path/to/"+this.props.num}>Link</a>; } }); var App = React.createClass({ render: function(){ return ( <div> <h1>Hello, world!</h1> <Link num={this.props.list[1]} /> </div> ); } }); ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); <App list={[1, 2, 3]} /> <Link num={this.props.list[1]} /> this.props.num 데이터는 위에서 아래로 흐른다.
  47. 47. ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); var React = require('react'); var ReactDOM = require('react-dom'); var Link = React.createClass({ render: function() { return <a href={"/path/to/"+this.props.num}>Link</a>; }. }); var App = React.createClass({ render: function(){ return ( <div> <h1>Hello, world!</h1> <Link num={this.props.list[1]} /> </div> ); }. });
  48. 48. ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') var ReactDOM = require('react-dom'); var Link = React.createClass({ render: function() { return <a href={"/path/to/"+this.props.num}>Link</a>; }. }); var App = React.createClass({ render: function(){ return ( <div> <h1>Hello, world!</h1> <Link num={this.props.list[1]} /> </div> ); }. });
  49. 49. var Link = React.createClass({ render: function() { return <a href={"/path/to/"+this.props.num}>Link</a>; }. }); var App = React.createClass({var App = React.createClass({ handleClick: function(event) { this.setState({clickedElement: event.target}); }, render: function(){ return ( <div> <h1>Hello, world!</h1> <Link num={this.props.list[1]} onClick={this.handleClick} /> </div> ); } });
  50. 50. var Link = React.createClass({ render: function() { return <a href={"/path/to/"+this.props.num} onClick={this.props.onClick}>Link</a>; }. }); var App = React.createClass({ handleClick: function(event) { this.setState({clickedElement: event.target}); }, render: function(){ return ( <div> <h1>Hello, world!</h1> <Link num={this.props.list[1]} onClick={this.handleClick} /> </div> ); } });
  51. 51. var Link = React.createClass({ render: function() { return <a href={"/path/to/"+this.props.num} onClick={this.props.onClick}>Link</a>; }. }); var App = React.createClass({ handleClick: function(event) { this.setState({clickedElement: event.target}); }, render: function(){ return ( <div> <h1>Hello, world!</h1> <Link num={this.props.list[1]} onClick={this.handleClick} /> </div> ); } }); onClick={this.props.onClick} onClick={this.handleClick} handleClick: function(event) { this.setState({clickedElement: event.target}); }, 이벤트를 통해 하위 컴포넌트가 상위 컴포넌트에 값을 전달할 수 있다
  52. 52. c4 ?
  53. 53. 이미 많은 서비스가 React 사용 중
  54. 54. 심지어 페이스북은 알파 버전 사용 중!
  55. 55. 참고자료 https://taegon.kim/archives/5288 Flux와 Redux http://www.slideshare.net/jeokrang/facebook-react-55649927 Facebook은 React를 왜 만들었을까? http://webframeworks.kr/tutorials/react/es2015-react/ ES2015와 React http://webframeworks.kr/tutorials/react/getting-started/ React 시작하기
  56. 56. Server-side Rendering Chapter 2
  57. 57. 성능 페이지 로딩 + 자바스크립트 로딩 + 렌더링 =
 초기 구동 속도가 느리다 검색 엔진 최적화 자바스크립트를 실행하지 못하는 크롤러는
 페이지의 콘텐츠를 수집하지 못한다 클라이언트 렌더링의 성능
 매번 전체 페이지를 다시 읽는 것보다 빠름 사용자 경험
 자연스럽게 연결되는 사용자 경험 가능 코드의 일관성
 렌더링 책임은 한 쪽에만 주는 편이 일관성 유지가 쉬움 장점 단점
  58. 58. 성능
 페이지 로딩 + JS 로딩 + 렌더링 (+ 데이터 로딩)=
 초기 구동 속도가 느림 검색 엔진 최적화
 자바스크립트를 실행하지 못하는 크롤러는
 페이지의 콘텐츠를 수집하지 못함 단점클라이언트 렌더링의
  59. 59. 둘 다! 그래서 해답은?
  60. 60. + 서버 렌더링클라이언트 렌더링 빈 페이지 App HTML 문서 전송 JS 전송 후 렌더링빈 콘텐츠를 볼 수 없음
  61. 61. 클라이언트 렌더링 App + 서버 렌더링 JS 전송 후 DOM에 붙음 HTML 문서 전송 렌더링된 콘텐츠는 볼 수 있지만, 인터랙션은 아직 동작 안함
  62. 62. R
  63. 63. 사용자가 느끼는 웹 사이트 반응 속도는 콘텐츠를 처음 본 시간에 영향을 받는다
  64. 64. c
  65. 65. import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render() { return <h1>Hello, world!</h1>; } } ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); 앞서 살펴 본 클라이언트 코드
  66. 66. import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render() { return <h1>Hello, world!</h1>; } } ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); ReactDOM은 브라우저 환경에만 해당 import ReactDOM from 'react-dom'; ReactDOM.render
  67. 67. import ReactDOM from 'react-dom'; import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render() { return <h1>Hello, world!</h1>; } } ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); DOM 관련 부분만 별도 파일로 분리 import ReactDOM from 'react-dom'; ReactDOM.render import React, { Component } from 'react'; ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); class App extends Component { render() { return <h1>Hello, world!</h1>; } }
  68. 68. import ReactDOM from 'react-dom'; DOM 관련 부분만 별도 파일로 분리 import React, { Component } from 'react'; ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); export default App; import App from './App'; browser.js App.js class App extends Component { render() { return <h1>Hello, world!</h1>; } }
  69. 69. import ReactDOM from 'react-dom'; DOM 관련 부분만 별도 파일로 분리 import React, { Component } from 'react'; class App extends Component { render() { return <h1>Hello, world!</h1>; } } ReactDOM.render(   <App list={[1, 2, 3]} />,   document.getElementById('example') ); export default App; import App from './App'; browser.js App.js
  70. 70. import ReactServer from 'react-dom/server'; 서버 렌더링은 react-dom/server 사용 import React, { Component } from 'react'; class App extends Component { render() { return <h1>Hello, world!</h1>; } } var result = ReactServer.renderToString(   <App list={[1, 2, 3]} /> ); export default App; import App from './App'; server.js App.js
  71. 71. import ReactServer from 'react-dom/server'; 결과물을 HTML 페이지에 출력 <body> <div id="example"> {{result}} </div> </body> var result = ReactServer.renderToString(   <App list={[1, 2, 3]} /> ); import App from './App'; server.js index.html
  72. 72. import ReactServer from 'react-dom/server'; 결과물을 HTML 페이지에 출력 <body> <div id="example"> {{result}} </div> </body> var result = ReactServer.renderToString(   <App list={[1, 2, 3]} /> ); import App from './App'; server.js index.html {{result}} result
  73. 73. 렌더링된 결과물이 서버에서 전송된 예제
  74. 74. Isomorphic JavaScript 서버와 클라이언트가 같은 코드를 공유하는 개발 방식같은 코드를 공유 Client Server 공통 코드
  75. 75. Isomorphic JavaScript 서버와 클라이언트가 같은 코드를 공유하는 개발 방식 Client Server React 같은 코드를 공유
  76. 76. 참고자료 https://taegon.kim/archives/5312 React 애플리케이션의 서버 렌더링 http://isomorphic.net/ React를 비롯한 Isomorphic JavaScript 라이브러리를 소개하는 곳 http://augustl.com/blog/2014/jdk8_react_rendering_on_server/ JDK8(Clojure)에서 React 렌더링하는 법 (영문) http://www.phpied.com/server-side-react-with-php/ PHP 서버에서 React 렌더링하는 법 (영문)
  77. 77. React Native chapter 3
  78. 78. Virtual DOM DOM Virtual DOM의 결과물은 DOM이 될 수도 있지만
  79. 79. Virtual DOM DOM SVG Canvas "string" 문자열, SVG, Canvas 등으로 확장 가능
  80. 80. 예제: React ART ... renderGraphic: function(rotation) { return ( <Group onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> <Group x={210} y={135}> <Shape fill="rgba(0,0,0,0.1)" d={BORDER_PATH} /> <Shape fill="#7BC7BA" d={BG_PATH} /> <Shape fill="#DCDCDC" d={BAR_PATH} /> <Shape fill="#D97B76" d={RED_DOT_PATH} /> <Shape fill="#DBBB79" d={YELLOW_DOT_PATH} /> <Shape fill="#A6BD8A" d={GREEN_DOT_PATH} /> <Group x={55} y={29}> <Group rotation={rotation} originX={84} originY={89}> <Shape fill="#FFFFFF" d={CENTER_DOT_PATH} /> <Group> <Shape d={RING_ONE_PATH} stroke="#FFFFFF" strokeWidth={8} /> <Shape d={RING_TWO_PATH} transform={RING_TWO_ROTATE} stroke="#FFFFFF" strokeWidth={8} /> <Shape d={RING_THREE_PATH} transform={RING_THREE_ROTATE} stroke="#FFFFFF" strokeWidth={8} /> </Group> </Group> </Group> </Group> </Group> ); } ...
  81. 81. 예제: React ART
  82. 82. Virtual DOM DOM SVG Canvas "string" 문자열, SVG, Canvas 등으로 확장 가능
  83. 83. Virtual DOM Native Component 네이티브 컴포넌트로 확장할 수도 있음
  84. 84. H 4
  85. 85. 네이티브 컴포넌트 비동기 실행 Flexbox 레이아웃 폴리필(Polyfill) 간편한 네이티브 확장
  86. 86. 네이티브 컴포넌트 비동기 실행 Flexbox 레이아웃 폴리필(Polyfill) 간편한 네이티브 확장 <header> <footer>, <section> <div> <span> <img> <a> <strong> <em> <form> <select> <input> <textarea> <button> ... <View> <Text> <Image> <ScrollView> <ListView> <WebView> <PickerIOS> <NavigatorIOS> <ActivityIndicatorIOS> <ProgressViewIOS> <SwitchIOS>... <View> <Text> <Image> <ScrollView> <ListView> <WebView> <DrawerLayoutAndroid> <ProgressBarAndroid> <SwitchAndroid> <ViewPagerAndroid> ...
  87. 87. 네이티브 컴포넌트 비동기 실행 Flexbox 레이아웃 폴리필(Polyfill) 간편한 네이티브 확장 • 자바스크립트는 네이티브보다 훨씬 느리기 때문에 동기 실행시 네이티브 UI와 자바스크립트 간의 병목 현상 발생 • 네이티브와 자바스크립트 사이에 메시지 큐를 두어 비동기 실행 JS VM Native Java/C++/ObjC/Switft
  88. 88. 비동기 실행 Flexbox 레이아웃 폴리필(Polyfill) 간편한 네이티브 확장 • CSS와 구조가 비슷한 StyleSheet 객체 사용 • CSS3 Flexbox와 비슷한 방식으로 레이아웃 스타일링 var ReactNative = React.createClass({ render: function() { return ( <View style={styles.row}> <View style={styles.text}> <Text style={styles.title}>React Native</Text> <Text style={styles.subtitle}>Build mobile apps using React</Text> </View> </View> ); }, }); var styles = StyleSheet.create({ row: { flexDirection: 'row', margin: 40 }, text: { flex: 1, justifyContent: 'center'}, title: { fontSize: 11, fontWeight: 'bold' }, subtitle: { fontSize: 10 }, });
  89. 89. xbox 레이아웃 폴리필(Polyfill) 간편한 네이티브 확장 • XHR, requestAnimationFrame, navigator.geolocation 등 익숙한 자바스크립트 기능 제공 var GeoInfo = React.createClass({ getInitialState: function() { return { position: 'unknown' }; }, componentDidMount: function() { navigator.geolocation.getCurrentPosition( (position) => this.setState({position}), (error) => console.error(error) ); }, render: function() { return ( <Text> Position: {JSON.stringify(this.state.position)} </Text> ); }, });
  90. 90. 리필(Polyfill) 간편한 네이티브 확장 • Java(Android), ObjectiveC/Swift (iOS)로 작성된
 네이티브 모듈을 손쉽게 자바스크립트 모듈로 바인딩 // Java public class MyCustomModule extends ReactContextBaseJavaModule { // Available as NativeModules.MyCustomModule.processString @ReactMethod public void processString(String input, Callback callback) { callback.invoke(input.replace("Goodbye", "Hello")); } } // JavaScript ... componentDidMount() { NativeModules.MyCustomModule.processString(this.state.text, (text) => { this.setState({text}); }); }, ...
  91. 91. , . 1.
  92. 92. $ brew install node watchman $ node install -g react-native-cli 필요한 패키지 설치 (Xcode 및 안드로이드 SDK 필수) 프로젝트 생성 $ react-native init HelloWorld 프로젝트 오픈 후 컴파일 $ cd HellWorld $ open ios/HelloWorld.xcodeproj (iOS) $ react-native run-android (Android) 코드는 index.{ios, android}.js 파일 수정
  93. 93. React Playground
  94. 94. 데모 • 기본 네이티브 컴포넌트만 사용 • React에 익숙하지 않은 상태에서
 대략 20시간 소요 • 네이티브와 똑같은 무한 스크롤 성능 https://www.youtube.com/watch?v=fRaC9jECxCg
  95. 95. 페이스북의 AdManager 개발 사례 • iOS 개발 후 안드로이드 버전 개발 • 각 플랫폼에 맞는 네이티브 룩앤필 • 전체 코드의 85% 가량을 재사용 • 두 플랫폼의 저장소 통합 관리
  96. 96. 안 배워도 되겠네요? 이제 네이티브를
  97. 97. JS 모르고 jQuery만 알면 되던가요? 결국 네이티브라는 장애물을 넘어야 합니다.
  98. 98. 물론 남이 삽질해주길 기다리는 방법도 있죠
  99. 99. 삽질의 결과물은 react.parts에서...
  100. 100. 참고자료 https://realm.io/kr/news/react-native/ 리액트 네이티브로 시작하는 앱 개발 #1 http://react.parts/ React 네이티브 컴포넌트 https://rnplay.org/ React Native Playground
  101. 101. Desktop WebApp Chapter 4
  102. 102. 이미 거의 끝났습니다. 웹 앱이 완성됐다면 데스크톱 앱은
  103. 103. 약간의 양념만 있으면 되쥬. 솨아~
  104. 104. 은.. 크로미움 엔진과 Node.js가 합쳐진 데스크톱 애플리케이션 런타임
  105. 105. 은.. 코드 하나로 맥, 리눅스, 윈도우 플랫폼과 32/64비트 모두 지원 </>
  106. 106. 이미 많은 기업에서 사용 중 은..
  107. 107. 최근 워드프레스는 Calypso라는 프로젝트를 통해 wordpress.com의 프론트엔드를 모두 대체
  108. 108. React + Node.js 서버를 사용한 Isomorphic JavaScript 동일한 코드를 Desktop App에도 사용
  109. 109. React 앱 패키징 $ npm install -g electron-packager
 $ cd HelloWorld $ electron-packager . HelloWorldApp --platform=all --arch=x64 --version=0.35.4 HelloWorld ├─ package.json └┬ src ├─ index.html ├─ main.js ├─ other.js └─ style.css 폴더 구조를 왼쪽과 같이 작성한 후... 단, OS X / Linux에서 Windows 앱을 빌드하려면 wine 필요wine
  110. 110. 참고 자료 https://github.com/chentsulin/electron-react-boilerplate Electron과 React를 사용한 데스크톱 앱 프로젝트 시작 틀 https://github.com/sindresorhus/awesome-electron Electron 관련 정보를 모아 둔 페이지 https://github.com/gabrielbull/react-desktop 데스크톱 환경에 사용할 수 있는 React UI 컴포넌트 모음
  111. 111. React Native Desktop Chapter 5
  112. 112. 그래도 네이티브가 더 좋다면? image from 이말년씨리즈 데스크톱 웹 앱 좋은 거 알겠는데
  113. 113. 데스크톱 네이티브? 원한다면 주도록 하지 잘 찾아봐. GitHub에 두고 왔으니… image from 원피스
  114. 114. React Native를 포크한 프로젝트라 사용법도 비슷합니다 예제 실행방법 $ git clone https://github.com/ptmt/react-native-desktop
 $ cd react-native-desktop && npm install Examples 아래의 원하는 폴더로 가서 .xcodeproj 파일을 XCode에서 열고 컴파일
  115. 115. Hello World 앱 크기 비교 React Native Desktop 3.5MB 105.3MB (OS X 빌드 기준)
  116. 116. 하지만 image from 수퍼마리오
  117. 117. 윈도우 버전도 없고 (OSX만 지원) image from 수퍼마리오
  118. 118. 기능도 적고 불안정합니다 image from 수퍼마리오
  119. 119. 실무에는 절대로 사용하지 마세요! 개발 초기라 매우 불안정하니
  120. 120. Once,Write Run Anywhere
  121. 121. Once, WriteLearn Anywhere 한 번 배워 어디서나 개발하자
  122. 122. https://taegon.kim @taggon Thank You! facebook.com/groups/react.ko ...and
  123. 123. Credits Twitter and Wordpress icons are made by Freepik from www.flaticon.com All images without any notes are published under Creative Commons zero. All videos are published under Creative Commons zero.

×