![ES6 ES6 New Features
Arrow Functions
• Function 표현식을 대체함. “=>”
• 우변이 표현식인 경우 해당 값을 반환
• Block으로 된 경우 return 필요함.
• Scope의 this 를 사용함.
// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));
// Statement bodies
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
});
// Lexical this
var bob = {
_name: "Bob",
_friends: [],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
}](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-80-2048.jpg)
![ES6 ES6 New Features
Classes
• 객체지향 패러다임 지원. Prototype 기반의 상속 모델
• 상속 받은 클래스에서 부모 객체에 접근할 수 있는 super 객체 제공
• 생성자 메서드 constructor 지원.
• static 정적 메서드 지원
class SkinnedMesh extends THREE.Mesh {
constructor(geometry, materials) {
super(geometry, materials);
this.idMatrix = SkinnedMesh.defaultMatrix();
this.bones = [];
this.boneMatrices = [];
//...
}
update(camera) {
//...
super.update();
}
get boneCount() {
return this.bones.length;
}
set matrixType(matrixType) {
this.idMatrix = SkinnedMesh[matrixType]();
}
static defaultMatrix() {
return new THREE.Matrix4();
}
}](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-81-2048.jpg)
![ES6 ES6 New Features
Enhanced Object Literals
• Object 상수 생성 시에 Prototype 설정 가능.
• Short-hand 지원 (“{foo: foo}” -> “{foo}”).
• 메서드와 Super 호출 가능
var obj = {
// __proto__
__proto__: theProtoObj,
// Shorthand for ‘handler: handler’
handler,
// Methods
toString() {
// Super calls
return "d " + super.toString();
},
// Computed (dynamic) property names
[ 'prop_' + (() => 42)() ]: 42
};](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-82-2048.jpg)
![ES6 ES6 New Features
Destructuring
• List Matching
• Object Matching
• Object Matching Shorthand
• In Parameter Position
• Fail-soft destructuring
// list matching
var [a, ,b] = [1,2,3];
a === 1;
b === 3;
// object matching
var { op: a, lhs: { op: b }, rhs: c }
= getASTNode()
// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()
// Can be used in parameter position
function g({name: x}) {
console.log(x);
}
g({name: 5})
// Fail-soft destructuring
var [a] = [];
a === undefined;
// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;
// Destructuring + defaults arguments
function r({x, y, w = 10, h = 10}) {
return x + y + w + h;
}
r({x:1, y:2}) === 23](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-84-2048.jpg)
![ES6 ES6 New Features
Default + Rest + Spread
• 함수 선언 시 인자의 기본값을 설정 가능.
• 값이 배열이나 개수를 예상할 수 없는 인자 지원.
function f(x, y=12) {
// y is 12 if not passed (or passed as undefined)
return x + y;
}
f(3) == 15
function f(x, ...y) {
// y is an Array
return x * y.length;
}
f(3, "hello", true) == 6
function f(x, y, z) {
return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-85-2048.jpg)
![ES6 ES6 New Features
Generators
• Iterator-authoring 간소화
• function* 은 Generator 인스턴스를 반환.
• Generator 는 Iterator 의 서브클래스. next 와 throw 메서드가 추가.
• for of 구문 지원
var fibonacci = {
[Symbol.iterator]: function*() {
var pre = 0, cur = 1;
for (;;) {
var temp = pre;
pre = cur;
cur += temp;
yield cur;
}
}
}
for (var n of fibonacci) {
// truncate the sequence at 1000
if (n > 1000)
break;
console.log(n);
}
* Can also be used to enable ‘await’-like async programming, see also ES7 await proposal.](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-87-2048.jpg)
![ES6 ES6 New Features
Unicode
• 공백 유니코드를 지원. (“_”)
• 정규식에서 유니코드를 지원함. (문자열 처리를 21bit 코드)
• 다국어 지원 어플리케이션 지원
// same as ES5.1
"𠮷".length == 2
// new RegExp behaviour, opt-in ‘u’
"𠮷".match(/./u)[0].length == 2
// new form
"u{20BB7}" == "𠮷" == "uD842uDFB7"
// new String ops
"𠮷".codePointAt(0) == 0x20BB7
// for-of iterates code points
for(var c of "𠮷") {
console.log(c);
}](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-88-2048.jpg)
![ES6 ES6 New Features
Symbols
• 일반적인 알고리즘을 위한 효과 적인 데이터 구조 지원
• WeakMap
(function() {
// module scoped symbol
var key = Symbol("key");
function MyClass(privateData) {
this[key] = privateData;
}
MyClass.prototype = {
doStuff: function() {
... this[key] ...
}
};
// Limited support from Babel, full support requires native implementation.
typeof key === "symbol"
})();
var c = new MyClass("hello")
c["key"] === undefined](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-93-2048.jpg)
![ES6 ES6 New Features
Subclassable Built-ins
• Array, Date 나 Dom Element 와 같은 클래스 상속 지원.
// User code of Array subclass
class MyArray extends Array {
constructor(...args) { super(...args); }
}
var arr = new MyArray();
arr[1] = 12;
arr.length == 2](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-94-2048.jpg)
![ES6 ES6 New Features
Math Number String Object APIs
• Array, Date 나 Dom Element 와 같은 클래스 상속 지원.
Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll("*")) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"
Object.assign(Point, { origin: new Point(0,0) })](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-95-2048.jpg)
![ES6 ES6 New Features
Promises
• Promises 추가
function timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration);
})
}
var p = timeout(1000).then(() => {
return timeout(2000);
}).then(() => {
throw new Error("hmm");
}).catch(err => {
return Promise.all([timeout(100), timeout(200)]);
})](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-97-2048.jpg)
![ES6 ES6 New Features
Reflect API
• 런타임 수준의 메타 작업을 객체에 표시합니다.
• 사실상 Proxy API의 반대.
• 프록시 트랩과 동일한 메타 작업에 해당하는 호출을 허용합니다. 프록시 구현에 특히 유용합니다.
var O = {a: 1};
Object.defineProperty(O, 'b', {value: 2});
O[Symbol('c')] = 3;
Reflect.ownKeys(O); // ['a', 'b', Symbol(c)]
function C(a, b){
this.c = a + b;
}
var instance = Reflect.construct(C, [20, 22]);
instance.c; // 42](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-98-2048.jpg)
![React Native Basics Style
Style
• 뷰 Style 지정을 위한 JavaScript Object.
• Android 와 iOS 등 여러 모바일 뷰의 Style 지정을 위하여 JavaScript Object 로 표현.
• Inline Style을 사용하는 경우 “…”의 string 방식이 아니라 Object 형식.(Camel Case)
• StyleSheet.create 명령으로 생성함.
• 자바 스크립트를 사용하여 애플리케이션의 스타일을 정의.
• 모든 핵심 구성 요소에는 스타일이라는 Prop이 적용됨.
• 일반적으로 CSS가 웹에서 작동하는 방식과 일치함. 단, 이름은 camel 케이스를 사용. (예 : 배경색이 아닌 backgroundColor).
• 스타일 prop는 JavaScript 객체. 스타일의 배열을 전달할 수도 있습니다. 배열의 마지막 스타일이 우선 순위를 가짐
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-
native';
class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue,
then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then
bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
AppRegistry.registerComponent('LotsOfStyles', () =>
LotsOfStyles);](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-105-2048.jpg)
![React Native Basics Using a ListView
Using a ListView
• ListView 구성 요소는 비슷하게 구조화 된 데이터의 목록을 표시함.
• ListView는 시간이 지남에 따라 항목 수가 늘어날 수 있는 긴 데이터 목록에 적합함.
• ScrollView와 달리 ListView는 화면에 표시되는 요소만 렌더링함.
• dataSource 및 renderRow라는 두 개의 prop이 필요함.
• dataSource는 목록 데이터 소스.
• renderRow는 소스에서 하나의 항목에 대한 렌더링하여 반환.
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-
native';
class ListViewBasics extends Component {
// Initialize the hardcoded data
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1,
r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson',
'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('ListViewBasics', () =>
ListViewBasics);](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-112-2048.jpg)
![Advanced Debugging
In-app Errors and Warnings
개발 빌드의 경우 오류 및 경고 메시지가 앱 내에 표시됨.
• Errors
앱에 오류가 있는 경우 앱 내부가 빨간색 배경의 전체 화면 경고로 표시.
이 화면을 Red-Box 라고 하며 console.error()를 사용하여 수동으로 호출 할 수 있음.
• Warnings
경고는 노란색 배경의 화면에 표시. 이러한 경고를 Yellow-Box라고 함.
알림을 클릭하면 더 많은 정보를 보거나 해제 할 수 있음.
console.warn ()을 사용하여 수동으로 호출 할 수 있음.
console.disableYellowBox = true 를 사용하여 비활성화.
Xcode에서 Yellow-Box 는 IS_TESTING 환경 변수를 설정하여 비활성화.
console.ignoredYellowBox = [ 'Warning : ...'];
• Red-Box 와 Yellow-Box는 릴리즈 (프로덕션) 빌드에서 자동으로 비활성화됨](https://image.slidesharecdn.com/reactnativedevelopmentv1-190317104009/75/React-native-development-143-2048.jpg)
![[H3 2012] 앱(APP) 중심으로 생각하기 - DevOps와 자동화](https://cdn.slidesharecdn.com/ss_thumbnails/c4-devops2012102902pdf-121105214403-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Td 2015]알아두면 핵 이득! vc++로 안드로이드 개발하기(김성엽)](https://cdn.slidesharecdn.com/ss_thumbnails/td2015vc-151104052852-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DataUs]클라우드 입문자를 위한 보안 가이드](https://cdn.slidesharecdn.com/ss_thumbnails/securit-210319073708-thumbnail.jpg?width=640&height=640&fit=bounds)
![[TD 2015] windows server에서 만나보는 docker와 windows container(최한홍)](https://cdn.slidesharecdn.com/ss_thumbnails/td2015windowsserverdockerwindowscontainer-151116073947-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[H3 2012] Bridge over troubled water : make plug-in for Appspresso](https://cdn.slidesharecdn.com/ss_thumbnails/d4-bridgeovertroubledwaternomovie-121105220008-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민](https://cdn.slidesharecdn.com/ss_thumbnails/125react24-161023163921-thumbnail.jpg?width=640&height=640&fit=bounds)
![[TECHCON 2019: MOBILE - Android]3.안드로이드 개발자 로드맵](https://cdn.slidesharecdn.com/ss_thumbnails/3-190712072110-thumbnail.jpg?width=640&height=640&fit=bounds)
React native development
- 1. 고성능 하이브리드 모바일앱 개발 Leonardo Park React Native
- 2. 강의 순서 Intro Whatis React Native Setup ES 6 React Native Basics React Native Development Advanced
- 3.
- 4. Intro 강의 개요 강의목표 • React Native에 대한 이해를 통해 고성능의 하이브리드 모바일 앱 개발 역량을 갖춘다. • iOS, Android Native 영역에 대한 광범위한 범위를 다루기 때문에 강의의 효율을 위해 강의 범위를 선택과 집중한다. • iOS, Android Cross Platform Framework 을 기반으로 하는 강의 특성 상 Mac 환경에서의 개발 만을 다룬다. • 강의 기간 중에는 React Native Component들의 사용 방법에 대해서는 학습 하지 않는다. • 강의를 통해 React Native의 학습에 대한 방향성을 갖게 되어 학습 연속성을 가진다.
- 5. What is ReactNative 모바일 개발의 분류 iOS Architecture Android Architecture Hybrid Architecture React Native
- 6. What is ReactNative 모바일 개발의 분류 모바일 개발의 분류 • 개발 방식에 따라 크게 웹 앱, 하이브리드 앱, 네이티브 앱 개발로 나뉘어짐. • 웹 앱 방식 이나 하이브리드 앱 개발 방식은 HTML5, JavaScript 기술을 이용하여 앱을 개발. • 원칙적으로 웹 앱의 경우는 디바이스의 API 사용 불가. • Native 앱 같은 경우는 OS에서 제공되는 SDK를 통해 개발. • 하이브리드 및 네이티브 앱은 패키징을 통하여 앱스토어 배포.
- 7. What is ReactNative 모바일 개발의 분류 모바일 개발의 분류 • 하이브리드 방식에는 네이티브 컨테이너 안에 웹코드와 네이티브 코드가 같이 들어가는 구성을 가질 수 있음. • 보통 플러그인 방식으로 네이티브 코드가 추가됨. • UI/UX 적인 부분에서 최적의 효과를 내기위해 네이티브 컨테이너를 직접 구성하는 방식도 있음. 메뉴나 중요한 컴퍼넌트 들은 네이티브로 구현하고 자주 바뀌는 동적 컨텐츠는 웹코드로 구현.
- 8. What is ReactNative 모바일 개발의 분류 모바일 개발의 분류 • 하이브리드 방식은 독립 실행형 앱, 다중 앱 관리 방식의 앱, 웹 – 네이티브 혼합 방식으로 세부적으로 나뉠 수 있다. • 하이브리드 방식과는 다르게 크로스 플랫폼 네이티브 방식도 존재한다. • 클로스 플랫폼 네이티브 방식은 C, C++과 같은 언어로 짜여진 라이브러리를 제공하여 하나의 언어로 개발하게 된다. • Android NDK : C++, iOS Objective : C, C++ • Cocos2d-x 와 같은 게임 개발 프레임워크.
- 9. What is ReactNative iOS Architecture iOS Architecture Layer
- 10. What is ReactNative iOS Architecture iOS Architecture Layer Cocoa Touch • iOS 운영 체제에서 실행되는 애플리케이션을 작성하기위한 UI 프레임 워크. • 매우 빠른 속도로 실행되도록 컴파일 된 객체 지향 언어 인 Objective-C로 구현 된 클래스를 주로 포함. • 고유한 유연성을 제공하는 진정한 동적 런타임을 사용함. • Objective-C는 C의 상위 집합이기 때문에 C와 C ++를 Cocoa Touch 응용 프로그램에 쉽게 혼합. • 멀티 태스킹, 터치 기반 입력, 푸시 알림 및 많은 고급 시스템 서비스에 대한 앱 인프라와 지원을 제공. Cocoa Touch ✓ Storyboards ✓ Documents ✓ Gesturing ✓ Multitasking ✓ Notifications ✓ UIKit Framework
- 11. What is ReactNative iOS Architecture iOS Architecture Layer Media Layer • 멀티미디어 경험을 구현하는 데 사용하는 그래픽, 오디오 및 비디오 기술이 포함되어 있음. • 이 레이어의 기술을 통해 멋지게 보이는 훌륭한 앱을 쉽게 만들 수 있음. Media Layer ✓ Graphic Technologies ✓ Audio Technologies ✓ Video Technologies ✓ AirPlay
- 12. What is ReactNative iOS Architecture iOS Architecture Layer Core Services Layer • 앱에 필요한 기본 시스템 서비스가 포함되어 있음. • Core Foundation 및 Core Framework가 핵심 서비스로, 모든 앱에서 사용하는 기본 유형을 정의하고 Location, iCloud, 소셜 미디어 및 네트워킹과 같은 기능을 지원하는 기술도 제공. Core Services Layer ✓ iCloud ✓ In-App purchase ✓ SQLite ✓ Core Data ✓ Core Location
- 13. What is ReactNative iOS Architecture iOS Architecture Layer Core OS Layer • 다른 고급 기능의 기반이 되는 하위 수준 기능이 포함. • 비록 우리가 이 기능을 응용 프로그램에서 직접 사용하지는 않지만 프레임 워크에서 사용함. • 보안 기능을 구현하거나 외부 하드웨어 액세서리와 통신해야 할 때 이러한 기능을 사용. Core OS Layer ✓ Bluetooth ✓ External Accessories ✓ Accelerator Framework
- 14. What is ReactNative iOS Architecture iOS Application Lifecycle 홈버튼을 눌렀을 때, 전화가 왔을 때와 같이 앱이 화면상에서 보이지 않는 background 상태, 화면에 올라와 있는 상태인 foreground 등과 같은 상태들에 대한 정의. State • Not Running: 앱이 실행되지 않은 상태 • Inactive와 Active 상태를 합쳐서 Foreground 라고 함 • Inactive: 앱이 실행중인 상태 그러나 아무런 이벤트를 받지 않는 상태 • Active: 앱이 실행 중이며 이벤트가 발생한 상태 • Background: 앱이 백그라운드에 있는 상태 그러나 실행되는 코드가 있는 상태 • Suspended: 앱이 백그라운드에 있고 실행되는 코드가 없는 상태
- 15. What is ReactNative iOS Architecture iOS Application Lifecycle Call Back Method • application(_:didFinishLaunching:) - 앱이 처음 시작될 때 실행 • applicationWillResignActive: - 앱이 active 에서 inactive로 이동될 때 실행 • applicationDidEnterBackground: - 앱이 background 상태일 때 실행 • applicationWillEnterForeground: - 앱이 background에서 foreground로 이동 될때 실행 (아직 foreground에서 실행중이진 않음) • applicationDidBecomeActive: - 앱이 active상태가 되어 실행 중일 때 • applicationWillTerminate: - 앱이 종료될 때 실행
- 16. What is ReactNative iOS Architecture iOS ViewController Lifecycle 여러개의 뷰 컨트롤러가 있는 앱이라고 한다면 각각의 뷰 컨트롤러는 자신만의 생명주기를 가집니다. 그래서 화면상에 등장 할 때, 사라질 때 등 상황에 맞춰서 함수들이 호출됩니다. 뷰 컨트롤러 생명주기의 대표적인 함수들은 아래와 같습니다. • viewDidLoad - 해당 뷰컨트롤러 클래스가 생성될 때 (viewWillAppear전에 실행) 실행됩니다. Low memory와같은 특별한 경우가 아니라면 딱 한번만 실행되기 때문에 초기화 할 때 사용 할 수 있습니다. • viewWillAppear - 뷰 컨트롤러가 화면에 나타나기 직전에 실행됩니다. 뷰 컨트롤러가 나타나기 직전에 항상 실행되기 때문에 해당 뷰 컨트롤러가 나타나기 직전마다 일어나는 작업들을 여기에 배치 시킬 수 있습니다. • viewDidAppear - 뷰 컨트롤러가 화면에 나타난 직후에 실행됩니다. 화면에 적용될 애니메이션을 그리거나 API로 부터 정보를 받아와 화면을 업데이트 할 때 이곳에 로직을 위치시키면 좋습니다. 왜냐하면 지나치게 빨리 애니메이션을 그리거나 API에서 정보를 받아와 뷰 컨트롤러를 업데이트 할 경우 화면에 반영되지 않습니다. • viewWillDidDisappear - 뷰 컨트롤러가 화면에 나타난 직전/직후에 실행됩니다.
- 17. What is ReactNative iOS Architecture iOS MVC Pattern • MVC 패턴은 사용자에게 보여지는 측면을 담당하는 View 와 데이터에 관한 Model, 그리고 그것들을 관리하는 Controller에 관한 패턴. • Server Side Application 에서도 많이 사용하지만 UI 계층에서도 자주 사용하는 패턴. • 개선된 많은 패턴 있음. (MVVM, FLUX 등) • 애플 iOS 프로그래밍에서 사용하는 MVC 패턴은 View의 수명주기에 깊게 관여하기 때문에 많은 View Controller를 작성하도록 권장함. • 비즈니스 로직과 데이터 변환을 Controller 에서 담당하며, View에 작업량을 줄이는 데는 효과 없음. • 컨트롤러는 View의 로직을 위임 받아 Model 과 View 간의 데이터 전송을 담당. View Controller Model Notifies Owns and Updates View Life Cycle UIView UIViewController
- 18. What is ReactNative Android Architecture Android Platform Architecture 다양한 기기와 폼 팩터에 사용할 수 있도록 제작된 Linux 기반의 오픈 소스 소프트웨어. Get Source : https://source.android.com/ Linux Kernel • Linux 커널을 기반으로 함. • Android 런타임은 스레딩 및 하위 수준의 메모리 관리 기능에 Linux 커널을 사용함. • Linux 커널의 주요 보안 기능을 활용하고, 제조업체가 드라이버를 개발하기 용이함. HAL(Hardware Abstract Layer) • 상위 수준의 Java API 프레임워크에 하드웨어 표준 인터페이스를 제공 • 여러 라이브러리 모듈로 구성되어 있으며, 카메라 또는 블루투스 모듈과 같은 특정 유형의 하드웨어 구성 요소를 위한 인터페이스 구현. • 프레임워크 API가 하드웨어 액세스를 위해 호출하면, 시스템이 해당 하드웨어 구성 요소에 대한 라이브러리를 로드함.
- 19. What is ReactNative Android Architecture Android Platform Architecture Android 런타임 • Android 버전 5.0(API 레벨 21) 이상을 실행하는 기기의 경우, ART(Android 런타임) 인스턴스로 실행. • ART는 DEX 파일을 실행하여 저용량 메모리 기기에서 여러 가상 머신에서 실행하도록 작성됨. • DEX 파일은 Android용으로 특별히 설계된 바이트코드 형식. 네이티브 C/C++ 라이브러리 • ART 및 HAL 등의 많은 핵심 Android 시스템 구성 요소와 서비스가 C 및 C++로 작성된 네이티브 코드를 기반으로 빌드. • 플랫폼은 Java 프레임워크 API를 제공하여 이러한 일부 네이티브 라이브러리의 기능을 앱에 노출함. • 프레임워크의 Java OpenGL API를 통해 OpenGL ES에 액세스하여 앱에서 2D 및 3D 그래픽을 그리고 조작할 수 있는 지원 기능 등을 추가 할 수 있음. • C 또는 C++ 코드가 필요한 앱을 개발하는 경우에는 Android NDK를 사용하여 네이티브 코드에서 직접 이러한 몇몇 네이티브 플랫폼 라이브러리에 액세스할 수 있음.
- 20. What is ReactNative Android Architecture Android Platform Architecture Java API 프레임워크 • Android OS의 전체 기능 세트는 Java 언어로 작성된 API를 통해 액세스할 수 있음. • 핵심 모듈식 시스템 구성 요소 및 서비스 재활용을 단순화하여 Android 앱을 제작하는 데 필요한 빌딩 블록을 구성. 기능이 풍부한 확장 가능한 뷰 시스템 : 목록, 그리드, 텍스트 상자, 버튼 및 삽입 가능한 웹 브라우저를 포함하여 앱의 UI를 빌드하는 데 사용 가능 Resource Manager : 다국어 문자열, 그래픽 및 레이아웃 파일과 같은 코드가 아닌 리소스에 대한 액세스 제공 Notification Manager : 모든 앱이 상태 표시줄에 사용자 지정 알림을 표시할 수 있도록 지원 Activity Manager : 앱의 수명 주기를 관리하고 공통 Navigation 백 스택 제공 Contents Provider : 앱이 주소록 앱과 같은 다른 앱의 데이터에 액세스하거나 자신의 데이터를 공유할 수 있도록 지원 • 개발자는 Android 시스템 앱이 사용하는 것과 동일한 프레임워크 API에 대하여 전체 액세스 권한을 가짐 시스템 앱 • Android는 이메일, SMS 메시징, 캘린더, 인터넷 검색, 주소록 등의 주요 앱 세트와 함께 제공. • 기본적으로 포함된 앱과 사용자가 설치한 앱을 구별되는 특별한 상태가 없음. • 타사 앱이 사용자의 기본 웹 브라우저, SMS 메시징 또는 기본 키보드가 될 수 있음. (단, 시스템의 설정 앱 등 몇 가지 예외가 적용될 수 있음). • 시스템 앱은 사용자를 위한 앱으로도 작동하고 개발자가 자신의 앱에서 액세스할 수 있는 용도로도 작동.
- 21. What is ReactNative Android Architecture Android Activity Lifecycle • Activity 인스턴스 수명 주기의 특정 단계에 부합하는 Call Back 메서드를 호출하여 해당 인스턴스 내 코드를 실행함. • 액티비티를 시작하는 순차적인 Call Back 메서드가 있으며, 액티비티를 소멸시키는 순차적인 Call Back 메서드가 있음. • 액티비티 수명 주기에 맞는 적절한 Call Back 메서드를 구현하여 앱이 제대로 동작하도록 보장하게 함. 사용자가 앱을 사용하는 도중에 전화가 걸려오거나 다른 앱으로 전환할 때 충돌하지 않도록 해야함. 사용자가 앱을 활발하게 사용하지 않는 경우, 소중한 시스템 리소스를 소비하지 않도록 해야 함. 사용자가 앱에서 나갔다가 나중에 돌아왔을 때 사용자의 진행 상태를 손실하지 않도록 해야 함. 화면이 가로 방향과 세로 방향 간에 회전할 경우, 충돌하거나 사용자의 진행 상태를 손실하지 않도록 해야함.
- 22. What is ReactNative Android Architecture Android Activity Lifecycle 메서드 설명 onCreate() • 액티비티가 처음 생성되었을 때 호출. • 일반적인 설정을 모두 수행. (뷰 생성, 목록에 데이터 바인딩하기 등.) • 액티비티의 이전 상태를 포함한 번들 객체가 전달됨. • 뒤에는 항상 onStart()가 호출됨. onRestart() • 액티비티가 중단되었다가 다시 시작되기 직전에 호출. • 뒤에는 항상 onStart()가 호출됨. onStart() • 액티비티가 사용자에게 표시되기 직전에 호출됨. • 액티비티가 전경으로 나오면 onResume()이 뒤에 호출, • 액티비티가 숨겨지면 onStop()이 뒤에 호출됨 onResume() • 액티비티가 시작되고 사용자와 상호작용하기 직전에 호출. • 이 시점에서 액티비티는 스택의 맨 위에 있으며, 사용자가 정보를 확인. • 이 뒤에는 항상 onPause()가 호출됨. onPause() • 시스템이 다른 액티비티를 재개하기 직전 호출됨. • 일반적으로 데이터를 유지하기 위해 저장되지 않은 변경 사항을 커밋함. • CPU를 소모하는 작업을 중단하는 등의 여러 가지 용도에 사용됨. • 무슨 일을 하든 매우 빨리 끝내야 함. • 액티비티가 다시 전경으로 돌아오면 onResume()이 뒤에 호출됨. • 액티비티가 사용자에게 보이지 않게 되면 onStop()이 뒤에 호출됨. onStop() • 액티비티가 더 이상 사용자에게 표시되지 않게 되면 호출됨. • 액티비티가 소멸되거나, 다른 액티비티가 재개되어 덮고 있음. • 액티비티가 다시 사용자와 상호작용하면 onRestart()가 뒤에 호출됨. • 액티비티가 사라지면 onDestroy()가 뒤에 호출됨. onDestroy() • 액티비티가 소멸되기 전에 호출됨. • 액티비티가 받는 마지막 호출. • 액티비티가 완료되는 중이기 때문(누군가가 여기에 finish()를 호출해서)일 수도 있 고, 시스템이 공간을 절약하기 위해 액티비티의 이 인스턴스를 일시적으로 소멸시 키는 중이기 때문.
- 23. What is ReactNative Android Architecture Lifecycle 비교 onCreate onStart onResume viewWillAppear viewDidLoad onPause onStop onDestroy viewWillDisapear viewDidUnload dealloc onRestartRunning Running Activity start, Xml layout loading. Activity visible to user Partially visible Activity no longer visible Activity is destroyed View loaded from nib file View appear to user View disappear to user View release from memory Android iOS
- 24. What is ReactNative Hybrid Architecture Hybrid Architecture • 네이티브 모바일 애플리케이션 컨테이너 안에 WebView. • WebView 로딩 될 오프라인 HTML 기반의 웹 애플리케이션 을 로딩. • 웹 애플리케이션은 전통적인 웹 개발 방식을 사용하며, Cordova JavaScript Library를 적재함. • Hot Code Push 라는 방식으로 웹 애플리케이션에 대한 부분 을 네트워크를 통해 업데이트 가능 함. Hardware Operating System (iOS, Android) Cordova Library (libs/cordova-*.jar) Custom Library (libs/*.jar) Native Code (src/*.java) Native Mobile Application WebView (HTML Rendering Engine) Web App (assets/www/index.htm, *.css, *.js) HTML, CSS, Resources JavaScript Cordova JavaScript Interface (assets/www/cordova.js) Direct JavaScript API Cordova JavaScript API Cordova Native API OS API
- 25. What is ReactNative Hybrid Architecture
- 26. What is ReactNative React Native 네이티브 기반의 앱 개발의 어려움 • Different stacks of technologies • No knowledge and code sharing • Slow iteration speed • Hard to scale
- 27. What is ReactNative React Native 웹앱~~~ • Different stacks of technologies • No knowledge and code sharing • Slow iteration speed • Hard to scale HTML / CSS /JS Same code and tech F5 / ⌘ + R React
- 28. What is ReactNative React Native HTML 기반의 웹 앱의 문제 • Very hard to provide smooth experiences • Not designed for complex interactions • Impossible to embed native components
- 29. What is ReactNative React Native React • Facebook 에서 개발한 Web UI 라이브러리. • Virtual DOM 이란 개념을 도입. • JSX 문법을 이용하여 개발 • UI 에 대한 부분만 처리함. • 단방향 데이터 흐름 • MVC 의 대안으로 FLUX 패턴을 도입 • Facebook, Airbnb, Alipay, Atlassian, Coursera, Docker, Udemy, Yahoo, Wordpress 등이 React를 기반으로 웹사이트 개발 • https://code.facebook.com/projects/ • https://github.com/facebook/react/wiki/sites-using-react
- 30. What is ReactNative React Native React Native • Facebook 에서 개발한 Hybrid 모바일 프레임워크. • React 를 기반으로 개발. • JSX 문법을 이용하여 개발 • Facebook, Instagram, Airbnb, Baidu, QQ 앱이 React Native 로 개발 • 동적 리로딩으로 개발 시간 단축. • Native 코드의 모듈화로 개발 용이. • Not Webkit base. • https://facebook.github.io/react-native/
- 31. What is ReactNative React Native React Native Code Example • Java 문법인가? JavaScript문법인가? • HTML코드가 인라인에 들어 있네… • What..!?!@?? import React, { Component } from 'react'; import { Image, ScrollView, Text } from 'react-native'; class AwkwardScrollingImageWithText extends Component { render() { return ( <ScrollView> <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} /> <Text> On iOS, a React Native ScrollView uses a native UIScrollView. On Android, it uses a native ScrollView. On iOS, a React Native Image uses a native UIImageView. On Android, it uses a native ImageView. React Native wraps the fundamental native components, giving you the performance of a native app, plus the clean design of React. </Text> </ScrollView> ); } }
- 32. What is ReactNative React Native JavaScript 와 Native Code • 전통적인 Hybrid Framework 는 Webkit 기반으로 Javascript 와 HTML 코드를 이용하여 개발. • WebKit Architecture 는 다음과 같음. • 결국은 JavaScript 와 Native Code 를 연결하는 Bindings 에서 병목이 발생함.
- 33. What is ReactNative React Native JavaScript 와 Native Code • 전통적인 Hybrid Framework 는 Webkit 기반으로 Javascript 와 HTML 코드를 이용하여 개발. • WebKit Architecture 는 다음과 같음. • 결국은 JavaScript 와 Native Code 를 연결하는 Bindings 에서 병목이 발생함.
- 34. What is ReactNative React Native React Native Idea Asynchronous Batch Communication Serializable Message Communication
- 35. What is ReactNative React Native 동기적인 통신 Native Method JavaScript Waiting… Time
- 36. What is ReactNative React Native 복잡한 동기적인 통신 Native Method JavaScript Waiting… Time
- 37. What is ReactNative React Native 비동기적인 통신 Native Method JavaScript Time
- 38. What is ReactNative React Native 비동기적인 통신 Native Method JavaScript Time Batch
- 39. What is ReactNative React Native Shared mutable data JavaScript Object Native Object
- 40. What is ReactNative React Native Exchange serializable messages JavaScript Object Native Object
- 41. What is ReactNative React Native React Native Bridge
- 42. What is ReactNative React Native JS is event -driven
- 43. What is ReactNative React Native React Native Counter Process Example
- 44. What is ReactNative React Native React Native Counter Process Example
- 45. What is ReactNative React Native React Native Counter Process Example
- 46. What is ReactNative React Native React Native Counter Process Example
- 47. What is ReactNative React Native React Native Counter Process Example
- 48. What is ReactNative React Native React Native Counter Process Example
- 49. What is ReactNative React Native React Native Counter Process Example
- 50. What is ReactNative React Native Responder System
- 51. What is ReactNative React Native React Native Counter Process Example
- 52. What is ReactNative React Native React Native Counter Process Example
- 53. What is ReactNative React Native React Native Counter Process Example
- 54. What is ReactNative React Native React Native Counter Process Example
- 55. What is ReactNative React Native React Native Counter Process Example
- 56. What is ReactNative React Native React Native Counter Process Example
- 57. What is ReactNative React Native Native Modules
- 58. What is ReactNative React Native Native Modules
- 59. What is ReactNative React Native React Native Architecture
- 60. What is ReactNative React Native React Native Architecture
- 61. What is ReactNative React Native React Native Architecture
- 62.
- 63. Setup Native tools XCODE •iOS, Mac 애플리케이션 개발 툴 • 애플 개발자 계정 생성. • 개발자 프로그램을 등록할 필요는 없음. • Download 사이트를 통해 툴 다운로드 후 설치 • http://developer.apple.com
- 64. Setup Native tools AndroidStudio • android 애플리케이션 개발 툴 • 구글 플레이 스토어 개발자 계정 생성. • 개발자 프로그램을 등록할 필요는 없음. • Download 사이트를 통해 툴 다운로드 후 설치 • https://developer.android.com/studio/index.html
- 65. Setup Tools Homebrew /usr/bin/ruby-e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" • OpenSource MacOS 패키지 관리자 • Ruby 기반으로 개발됨 • Ruby Script 를 통해 설치 함 • https://brew.sh/index_ko.html Homebrew
- 66. Setup Tools nodejs brewinstall node npm • Chrome JS Engine V8 기반 • Server Side JavaScript Framework • Brew 를 통해 최신버전 설치 • https://nodejs.org NodeJs
- 67. Setup Tools Atom •Hackable Text Editor. • Electron 프레임워크 기반. • apm 패키지 관리 툴 제공 • https://atom.io Atom
- 68. Setup Tools nuclide apminstall nuclide • Atom 개발 플러그인 • React Native, iOS, Web 개발툴 • Facebook에서 개발. • https://atom.io Nuclide
- 69. Setup Tools ReactNative brew install node brew install yarn brew install watchman npm install -g react-native-cli • React Native Framework React Native Framework
- 70. Setup React Native ReactNative Command Line Tool • Start • Run-ios • Run-android • New-library • Bundle • Link • Upgrade • Log-android • Log-ios
- 71.
- 72.
- 73.
- 74. ES6 What is ECMAScript ES6New Features
- 75. ES6 What isECMAScript About ECMAScript • ECMAScript 프로그래밍 언어 표준 기구 이름 • ECMAScript, JavaScript, Jscript • 1996년 넷스케이프 JavaScript 탑재 • Microsoft JavaScript와 호환되는 Jscript • ECMAScript 는 ECMA-262 에서 표준화된 언어 명. • JavaScript, Jscript 는 ECMA Script 호환을 목적으로 함
- 76. ES6 What isECMAScript ECMAScript Release Release Date Difference 1 1997년 6월 초판 2 1998년 6월 ISO/IEC 16262 국제 표준과 완전히 동일한 규격을 적용하기 위한 변경. 3 1999년 12월 강력한 정규 표현식, 향상된 문자열 처리, 새로운 제어문 , try/catch 예외 처리, 엄격한 오류 정의, 수치형 출력의 포매팅 등. 4 버려짐 4번째 판은 언어에 얽힌 정치적 차이로 인해 버려졌다. 이 판을 작업 가운데 일부는 5번째 판을 이루는 기 본이 되고 다른 일부는 ECMA스크립트의 기본을 이루고 있다. 5 2009년 12월 더 철저한 오류 검사를 제공하고 오류 경향이 있는 구조를 피하는 하부집합인 "strict mode"를 추가한다. 3번째 판의 규격에 있던 수많은 애매한 부분을 명확히 한다. 5.1 2011년 6월 ECMA스크립트 표준의 제 5.1판은 ISO/IEC 16262:2011 국제 표준 제3판과 함께 한다. 6 2015년 6월 6판에는 클래스와 모듈 같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가되었다. 하지만 이 러한 문법의 의미는 5판의 strict mode와 같은 방법으로 정의된다. 이 판은 "ECMAScript Harmony" 혹은 "ES6 Harmony" 등으로 불리기도 한다. 7 작업 중 6판에 이어서 새로운 언어 기능이 추가될 예정이다.
- 77. ES6 What isECMAScript ES6 Playgrond https://es6console.com/
- 78. ES6 What isECMAScript ES6 & ES7 Features • ES6 Features • ES6 = ES2015 • 대규모 수정 • http://es6-features.org • ES7 Features • 버그 수정 • Array.prototype.includes • 거듭제곱 연산자 (**)
- 79. ES6 ES6 NewFeatures ES6 New Features • Arrow Functions • Classes • Enhanced Object Literals • Template Strings • Destructuring (Pattern Matching) • Default, Rest, Spread Parameters • Let, Const • Iterator, For-Of • Generators • Unicode • Promises • Modules • Module Loaders • Map, Set, Weak Map, Weak Set • Symbols • Math, Number, String, Arrays, Object APIs • Proxy, Reflect • ETC
- 80. ES6 ES6 NewFeatures Arrow Functions • Function 표현식을 대체함. “=>” • 우변이 표현식인 경우 해당 값을 반환 • Block으로 된 경우 return 필요함. • Scope의 this 를 사용함. // Expression bodies var odds = evens.map(v => v + 1); var nums = evens.map((v, i) => v + i); var pairs = evens.map(v => ({even: v, odd: v + 1})); // Statement bodies nums.forEach(v => { if (v % 5 === 0) fives.push(v); }); // Lexical this var bob = { _name: "Bob", _friends: [], printFriends() { this._friends.forEach(f => console.log(this._name + " knows " + f)); } }
- 81. ES6 ES6 NewFeatures Classes • 객체지향 패러다임 지원. Prototype 기반의 상속 모델 • 상속 받은 클래스에서 부모 객체에 접근할 수 있는 super 객체 제공 • 생성자 메서드 constructor 지원. • static 정적 메서드 지원 class SkinnedMesh extends THREE.Mesh { constructor(geometry, materials) { super(geometry, materials); this.idMatrix = SkinnedMesh.defaultMatrix(); this.bones = []; this.boneMatrices = []; //... } update(camera) { //... super.update(); } get boneCount() { return this.bones.length; } set matrixType(matrixType) { this.idMatrix = SkinnedMesh[matrixType](); } static defaultMatrix() { return new THREE.Matrix4(); } }
- 82. ES6 ES6 NewFeatures Enhanced Object Literals • Object 상수 생성 시에 Prototype 설정 가능. • Short-hand 지원 (“{foo: foo}” -> “{foo}”). • 메서드와 Super 호출 가능 var obj = { // __proto__ __proto__: theProtoObj, // Shorthand for ‘handler: handler’ handler, // Methods toString() { // Super calls return "d " + super.toString(); }, // Computed (dynamic) property names [ 'prop_' + (() => 42)() ]: 42 };
- 83. ES6 ES6 NewFeatures Template Strings • Multi line String 지원. • Interpolation 지원 . // Basic literal string creation `In JavaScript 'n' is a line-feed.` // Multiline strings `In JavaScript this is not legal.` // String interpolation var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?` // Construct an HTTP request prefix is used to interpret the replacements and construction GET`http://foo.org/bar?a=${a}&b=${b} Content-Type: application/json X-Credentials: ${credentials} { "foo": ${foo}, "bar": ${bar}}`(myOnReadyStateChangeHandler);
- 84. ES6 ES6 NewFeatures Destructuring • List Matching • Object Matching • Object Matching Shorthand • In Parameter Position • Fail-soft destructuring // list matching var [a, ,b] = [1,2,3]; a === 1; b === 3; // object matching var { op: a, lhs: { op: b }, rhs: c } = getASTNode() // object matching shorthand // binds `op`, `lhs` and `rhs` in scope var {op, lhs, rhs} = getASTNode() // Can be used in parameter position function g({name: x}) { console.log(x); } g({name: 5}) // Fail-soft destructuring var [a] = []; a === undefined; // Fail-soft destructuring with defaults var [a = 1] = []; a === 1; // Destructuring + defaults arguments function r({x, y, w = 10, h = 10}) { return x + y + w + h; } r({x:1, y:2}) === 23
- 85. ES6 ES6 NewFeatures Default + Rest + Spread • 함수 선언 시 인자의 기본값을 설정 가능. • 값이 배열이나 개수를 예상할 수 없는 인자 지원. function f(x, y=12) { // y is 12 if not passed (or passed as undefined) return x + y; } f(3) == 15 function f(x, ...y) { // y is an Array return x * y.length; } f(3, "hello", true) == 6 function f(x, y, z) { return x + y + z; } // Pass each elem of array as argument f(...[1,2,3]) == 6
- 86. ES6 ES6 NewFeatures Let + Const • Block Scope 변수 선언 let • Block Scope 상수 선언 const function f() { { let x; { // okay, block scoped name const x = "sneaky"; // error, const x = "foo"; } // error, already declared in block let x = "inner"; } }
- 87. ES6 ES6 NewFeatures Generators • Iterator-authoring 간소화 • function* 은 Generator 인스턴스를 반환. • Generator 는 Iterator 의 서브클래스. next 와 throw 메서드가 추가. • for of 구문 지원 var fibonacci = { [Symbol.iterator]: function*() { var pre = 0, cur = 1; for (;;) { var temp = pre; pre = cur; cur += temp; yield cur; } } } for (var n of fibonacci) { // truncate the sequence at 1000 if (n > 1000) break; console.log(n); } * Can also be used to enable ‘await’-like async programming, see also ES7 await proposal.
- 88. ES6 ES6 NewFeatures Unicode • 공백 유니코드를 지원. (“_”) • 정규식에서 유니코드를 지원함. (문자열 처리를 21bit 코드) • 다국어 지원 어플리케이션 지원 // same as ES5.1 "𠮷".length == 2 // new RegExp behaviour, opt-in ‘u’ "𠮷".match(/./u)[0].length == 2 // new form "u{20BB7}" == "𠮷" == "uD842uDFB7" // new String ops "𠮷".codePointAt(0) == 0x20BB7 // for-of iterates code points for(var c of "𠮷") { console.log(c); }
- 89. ES6 ES6 NewFeatures Modules • 언어 차원의 모듈화 지원 • export default , export * • Import // lib/math.js export function sum(x, y) { return x + y; } export var pi = 3.141593; // app.js import * as math from "lib/math"; console.log("2π = " + math.sum(math.pi, math.pi)); // otherApp.js import {sum, pi} from "lib/math"; console.log("2π = " + sum(pi, pi)); // lib/mathplusplus.js export * from "lib/math"; export var e = 2.71828182846; export default function(x) { return Math.exp(x); } // app.js import exp, {pi, e} from "lib/mathplusplus"; console.log("e^π = " + exp(pi));
- 90. ES6 ES6 NewFeatures Module Loaders • Dynamic loading • State isolation • Global namespace isolation • Compilation hooks • Nasted virtualization // Dynamic loading – ‘System’ is default loader System.import('lib/math').then(function(m) { alert("2π = " + m.sum(m.pi, m.pi)); }); // Create execution sandboxes – new Loaders var loader = new Loader({ global: fixup(window) // replace ‘console.log’ }); loader.eval("console.log('hello world!');"); // Directly manipulate module cache System.get('jquery'); System.set('jquery', Module({$: $})); // WARNING: not yet finalized
- 91. ES6 ES6 NewFeatures Map Set WeakMap WeakSet • 일반적인 알고리즘을 위한 효과 적인 데이터 구조 지원 • WeakMap // Sets var s = new Set(); s.add("hello").add("goodbye").add("hello"); s.size === 2; s.has("hello") === true; // Maps var m = new Map(); m.set("hello", 42); m.set(s, 34); m.get(s) == 34; // Weak Maps var wm = new WeakMap(); wm.set(s, { extra: 42 }); wm.size === undefined // Weak Sets var ws = new WeakSet(); ws.add({ data: 42 }); // Because the added object has no other references, it will not be held in the set
- 92. ES6 ES6 NewFeatures Proxies • 일반적인 알고리즘을 위한 효과 적인 데이터 구조 지원 • WeakMap // Proxying a normal object var target = {}; var handler = { get: function (receiver, name) { return `Hello, ${name}!`; } }; var p = new Proxy(target, handler); p.world === "Hello, world!"; // Proxying a function object var target = function () { return "I am the target"; }; var handler = { apply: function (receiver, ...args) { return "I am the proxy"; } }; var p = new Proxy(target, handler); p() === "I am the proxy"; var handler = { // target.prop get: ..., // target.prop = value set: ..., // 'prop' in target has: ..., // delete target.prop deleteProperty: ..., // target(...args) apply: ..., // new target(...args) construct: ..., // Object.getOwnPropertyDescriptor(target, 'prop') getOwnPropertyDescriptor: ..., // Object.defineProperty(target, 'prop', descriptor) defineProperty: ..., // Object.getPrototypeOf(target), Reflect.getPrototypeOf(target), // target.__proto__, object.isPrototypeOf(target), object instanceof target getPrototypeOf: ..., // Object.setPrototypeOf(target), Reflect.setPrototypeOf(target) setPrototypeOf: ..., // for (let i in target) {} enumerate: ..., // Object.keys(target) ownKeys: ..., // Object.preventExtensions(target) preventExtensions: ..., // Object.isExtensible(target) isExtensible :... }
- 93. ES6 ES6 NewFeatures Symbols • 일반적인 알고리즘을 위한 효과 적인 데이터 구조 지원 • WeakMap (function() { // module scoped symbol var key = Symbol("key"); function MyClass(privateData) { this[key] = privateData; } MyClass.prototype = { doStuff: function() { ... this[key] ... } }; // Limited support from Babel, full support requires native implementation. typeof key === "symbol" })(); var c = new MyClass("hello") c["key"] === undefined
- 94. ES6 ES6 NewFeatures Subclassable Built-ins • Array, Date 나 Dom Element 와 같은 클래스 상속 지원. // User code of Array subclass class MyArray extends Array { constructor(...args) { super(...args); } } var arr = new MyArray(); arr[1] = 12; arr.length == 2
- 95. ES6 ES6 NewFeatures Math Number String Object APIs • Array, Date 나 Dom Element 와 같은 클래스 상속 지원. Number.EPSILON Number.isInteger(Infinity) // false Number.isNaN("NaN") // false Math.acosh(3) // 1.762747174039086 Math.hypot(3, 4) // 5 Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2 "abcde".includes("cd") // true "abc".repeat(3) // "abcabcabc" Array.from(document.querySelectorAll("*")) // Returns a real Array Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior [0, 0, 0].fill(7, 1) // [0,7,7] [1,2,3].findIndex(x => x == 2) // 1 ["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"] ["a", "b", "c"].keys() // iterator 0, 1, 2 ["a", "b", "c"].values() // iterator "a", "b", "c" Object.assign(Point, { origin: new Point(0,0) })
- 96. ES6 ES6 NewFeatures Binary and Octal Literals • 2진수 구분자 추가 • 8진수 구분자 추가 0b111110111 === 503 // true 0o767 === 503 // true
- 97. ES6 ES6 NewFeatures Promises • Promises 추가 function timeout(duration = 0) { return new Promise((resolve, reject) => { setTimeout(resolve, duration); }) } var p = timeout(1000).then(() => { return timeout(2000); }).then(() => { throw new Error("hmm"); }).catch(err => { return Promise.all([timeout(100), timeout(200)]); })
- 98. ES6 ES6 NewFeatures Reflect API • 런타임 수준의 메타 작업을 객체에 표시합니다. • 사실상 Proxy API의 반대. • 프록시 트랩과 동일한 메타 작업에 해당하는 호출을 허용합니다. 프록시 구현에 특히 유용합니다. var O = {a: 1}; Object.defineProperty(O, 'b', {value: 2}); O[Symbol('c')] = 3; Reflect.ownKeys(O); // ['a', 'b', Symbol(c)] function C(a, b){ this.c = a + b; } var instance = Reflect.construct(C, [20, 22]); instance.c; // 42
- 99. ES6 ES6 NewFeatures Tail Calls • 꼬리 위치에 있는 호출은 무한대로 스택을 늘리지 않습니다. • 무한 입력에도 불구하고 재귀 알고리즘을 안전하게 만듭니다. function factorial(n, acc = 1) { "use strict"; if (n <= 1) return acc; return factorial(n - 1, n * acc); } // Stack overflow in most implementations today, // but safe on arbitrary inputs in ES2015 factorial(100000)
- 100. React Native Basics JSX Props State Style Height& Width Layout & Flexbox Scroll & List Network
- 101. React Native BasicsJSX JSX • XML-LIKE SYNTAX EXTENSION TO ECMASCRIPT • ECMA Script 기본 표현을 상속 받음. • JavaScript XML • Required Compile So Fast. • Type Safe, (정의된 연산에 대해서만 작동) 컴파일시에 에러 감지. • React 프레임워크의 UI 표현. Also React Native • “…” 로 감싸지 않음 • (…) 를 사용하지 않아도 되지만 코드의 가독성을 위하여 사용한다. var dropdown = (<Dropdown> A dropdown list <Menu> <MenuItem>Do Something</MenuItem> <MenuItem>Do Something Fun!</MenuItem> <MenuItem>Do Something Else</MenuItem> </Menu> </Dropdown>); render(dropdown);
- 102. React Native BasicsJSX JSX • ECMAScript 6th Edition (ECMA-262)의 기본 표현식을 상속 받음. • Nested Element • 최 상위 Element는 하나의 Element 로 감싸주어야 함. • JSX 안의 JavaScript 표현식은 { }로 표현 해준다. • Inline Style을 사용하는 경우 “…”의 string 방식이 아니라 Object 형식.(Camel Case) • 주석은 /* … */ 를 사용 • https://jsx.github.io/ • https://jsx.github.io/try-on-web/ let style = { color: 'aqua', backgroundColor: 'black' }; render() { let text = "Hello React.js"; return ( <div> {text} <div> ); }
- 103. React Native BasicsProps Props • 부모 Component로 부여 받게 되는 불변성 데이터. • Component 내부에서는 this.props 를 통해 접근. • Component는 Props를 참조하여 Rendering. • React API를 통해 런타임에서 타입체크가 가능. 오류 식별 용이. • props.children을 통해 자식 ReactElelment를 제어. var MyComponent = React.createClass({ render: function(){ return ( <h1>Hello, {this.props.name}!</h1> ); } }); ReactDOM.render(<MyComponent name="Handsome" />, document.getElementById('myDiv'));
- 104. React Native BasicsState State • 구성 요소를 제어하는 두 가지 유형의 데이터가 있습니다 : Prop, State • Props은 부모에 의해 설정되며 구성 요소의 수명 내내 고정됨. 변경 되어야 하는 데이터에 대해서는 State를 사용. • 일반적으로 생성자에서 상태를 초기화. 그 후에 변경하려는 경우 setState를 호출해야 함. • 아래와 같이, 항상 깜박이는 텍스트를 만들어야 하는 경우, 깜박이는 구성 요소가 만들어지면 텍스트 자체가 한 번 설정되므로 텍스트 자체는 Prop. 텍스트가 현재 켜져 있는지 또는 꺼져 있는지는 시간이 지남에 따라 바뀌므로 State로 유지. • State는 React에서와 같은 방식으로 작동하므로 상태 처리에 대한 자세한 내용은 React.Component API를 참조. import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-native'; class Blink extends Component { constructor(props) { super(props); this.state = {showText: true}; // Toggle the state every second setInterval(() => { this.setState({ showText: !this.state.showText }); }, 1000); } render() { let display = this.state.showText ? this.props.text : ' '; return ( <Text>{display}</Text> ); } } class BlinkApp extends Component { render() { return ( <View> <Blink text='I love to blink' /> <Blink text='Yes blinking is so great' /> <Blink text='Why did they ever take this out of HTML' /> <Blink text='Look at me look at me look at me' /> </View> ); } } AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
- 105. React Native BasicsStyle Style • 뷰 Style 지정을 위한 JavaScript Object. • Android 와 iOS 등 여러 모바일 뷰의 Style 지정을 위하여 JavaScript Object 로 표현. • Inline Style을 사용하는 경우 “…”의 string 방식이 아니라 Object 형식.(Camel Case) • StyleSheet.create 명령으로 생성함. • 자바 스크립트를 사용하여 애플리케이션의 스타일을 정의. • 모든 핵심 구성 요소에는 스타일이라는 Prop이 적용됨. • 일반적으로 CSS가 웹에서 작동하는 방식과 일치함. 단, 이름은 camel 케이스를 사용. (예 : 배경색이 아닌 backgroundColor). • 스타일 prop는 JavaScript 객체. 스타일의 배열을 전달할 수도 있습니다. 배열의 마지막 스타일이 우선 순위를 가짐 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react- native'; class LotsOfStyles extends Component { render() { return ( <View> <Text style={styles.red}>just red</Text> <Text style={styles.bigblue}>just bigblue</Text> <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text> <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text> </View> ); } } const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, }); AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);
- 106. React Native BasicsHeight and Width Fixed Dimensions • 구성 요소의 크기를 설정하는 가장 간단한 방법은 고정 너비와 높이를 스타일에 추가하는 것임. • React Native의 모든 치수는 단위가 없으며 밀도와 무관 한 픽셀을 나타냄. • 화면 크기에 관계없이 항상 정확히 동일한 크기로 렌더링. • 구성 요소는 flexbox 알고리즘을 사용하여 하위 요소의 레이아웃을 지정함. • Flexbox는 다양한 화면 크기에서 일관된 레이아웃을 제공하도록 설계됨. • 일반적으로 flexDirection, alignItems 및 justifyContent의 조합을 사용하여 적절한 레이아웃을 획득함. import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FixedDimensionsBasics extends Component { render() { return ( <View> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} /> <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
- 107. React Native BasicsLayout with Flexbox Flex Direction • 구성 요소의 스타일에 flexDirection을 추가하면 레이아웃의 방향 기준을 설정함. • Child 객체의 수평 (행) 또는 수직 (칼럼)으로 구성함. 기본값은 column. import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FlexDirectionBasics extends Component { render() { return ( // Try setting `flexDirection` to `column`. <View style={{flex: 1, flexDirection: 'row'}}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
- 108. React Native BasicsLayout with Flexbox Justify Content • 컴퍼넌트의 스타일에 justifyContent를 추가하면, 주축에 따른 아이의 배포가 결정됨. • Child 객체의 시작, 중앙, 끝 또는 균등 한 간격으로 배부되어야 하는가? 사용 가능한 옵션은 flex-start, center, flex-end, space- around, space-between. import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class JustifyContentBasics extends Component { render() { return ( // Try setting `justifyContent` to `center`. // Try setting `flexDirection` to `row`. <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-between', }}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
- 109. React Native BasicsLayout with Flexbox Align Items • 보조 축을 따라 자식 객체를 정렬함 (기본 축이 행이면 보조 요소는 colum이고 그 반대의 경우도 마찬가지 임). • Child 객체들을 시작, 중심, 끝, 또는 펴기 정렬. flex-start, center, flex-end, stretch • 스트레치가 효과를 가지기 위해서는 보조 축을 따라 고정 된 치수를 가져야 함. • 다음 예제에서 alignItems : stretch 설정은 width : 50이 자식에서 제거 될 때까지 아무 작업도 수행하지 않음. import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class AlignItemsBasics extends Component { render() { return ( // Try setting `alignItems` to 'flex-start' // Try setting `justifyContent` to `flex-end`. // Try setting `flexDirection` to `row`. <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
- 110. React Native BasicsHandling Text Input Handling Text Input • TextInput은 사용자가 텍스트를 입력 할 수 있는 기본 구성 요소. • 텍스트가 변경 될 때마다 호출되는 함수로서 onChangeText prop과 텍스트가 제출 될 때 호출되는 함수를 사용하는 onSubmitEditing prop가 있음. • 이 예제에서는 텍스트가 시간이 지남에 따라 변경되기 때문에 State에 저장함. import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react- native'; class PizzaTranslator extends Component { constructor(props) { super(props); this.state = {text: ''}; } render() { return ( <View style={{padding: 10}}> <TextInput style={{height: 40}} placeholder="Type here to translate!" onChangeText={(text) => this.setState({text})} /> <Text style={{padding: 10, fontSize: 42}}> {this.state.text.split(' ').map((word) => word && '🍕').join(' ')} </Text> </View> ); } } AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
- 111. React Native BasicsUsing a ScrollView Using a ScrollView • ScrollView는 하위 구성 요소 혹은 뷰들을 가질 수 있는 스크롤 컨테이너. • 스크롤 가능한 항목은 동일하지 않아도 되며 가로 속성을 설정하여 세로 및 가로로 스크롤 할 수 있음. • 이 예제는 이미지와 텍스트가 함께 혼합 된 수직 ScrollView. • ScrollView는 제한된 크기의 작은 양을 표현하는 데 가장 적합. • ScrollView의 모든 요소와 뷰는 현재 화면에 표시되지 않은 경우에도 렌더링됨. • 항목이 많으면 ListView를 사용해야함. import React, { Component } from 'react'; import { AppRegistry, ScrollView, Image, Text } from 'react- native' class IScrolledDownAndWhatHappenedNextShockedMe extends Component { render() { return ( <ScrollView> <Text style={{fontSize:96}}>Scroll me plz</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>If you like</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>Scrolling down</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>What's the best</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>Framework around?</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:80}}>React Native</Text> </ScrollView> ); } } AppRegistry.registerComponent( 'IScrolledDownAndWhatHappenedNextShockedMe', () => IScrolledDownAndWhatHappenedNextShockedMe);
- 112. React Native BasicsUsing a ListView Using a ListView • ListView 구성 요소는 비슷하게 구조화 된 데이터의 목록을 표시함. • ListView는 시간이 지남에 따라 항목 수가 늘어날 수 있는 긴 데이터 목록에 적합함. • ScrollView와 달리 ListView는 화면에 표시되는 요소만 렌더링함. • dataSource 및 renderRow라는 두 개의 prop이 필요함. • dataSource는 목록 데이터 소스. • renderRow는 소스에서 하나의 항목에 대한 렌더링하여 반환. import React, { Component } from 'react'; import { AppRegistry, ListView, Text, View } from 'react- native'; class ListViewBasics extends Component { // Initialize the hardcoded data constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin' ]) }; } render() { return ( <View style={{flex: 1, paddingTop: 22}}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} /> </View> ); } } // App registration and rendering AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);
- 113. React Native BasicsNetworking Using a Fetch • 많은 모바일 앱은 원격 URL에서 리소스를로드해야합니다. REST API에 대한 POST 요청을 작성하거나 다른 서버에서 정적 컨텐츠 • Fetch API는 이전에 XMLHttpRequest 또는 다른 네트워킹 API를 사용하는 것처럼 익숙하게 사용할 수 있음. fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) }) fetch('https://mywebsite.com/mydata.json')
- 114. React Native BasicsNetworking Using a Fetch • 응답 처리 • 네트워킹은 본질적으로 비동기식. • fetch 메소드는 비동기 방식으로 작동하는 코드를 작성하는 Promise를 반환함. • 주의 사항 • 오류처리!! 그렇지 않으면 자동으로 삭제. • 기본적으로 iOS는 SSL을 사용하여 암호화되지 않은 요청을 차단함. function getMoviesFromApiAsync() { return fetch('https://facebook.github.io/react- native/movies.json') .then((response) => response.json()) .then((responseJson) => { return responseJson.movies; }) .catch((error) => { console.error(error); }); }
- 115. React Native BasicsNetworking Using Other Networking Libraries • XMLHttpRequest API는 React Native에 내장되어 있음. • Frisbee, axios와 같은 제 3 자 라이브러리를 사용할 수 있으며, 원하는 경우 직접 XMLHttpRequest API를 사용할 수 있음. • XMLHttpRequest의 보안 모델은 CORS 개념이 없음. var request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; } if (request.status === 200) { console.log('success', request.responseText); } else { console.warn('error'); } }; request.open('GET', 'https://mywebsite.com/endpoint/'); request.send();
- 116. React Native BasicsNetworking WebSocket Support • 단일 TCP 연결을 통해 Full duplex 통신 채널을 제공하는 프로토콜인 WebSockets도 지원함. var ws = new WebSocket('ws://host.com/path'); ws.onopen = () => { // connection opened ws.send('something'); // send a message }; ws.onmessage = (e) => { // a message was received console.log(e.data); }; ws.onerror = (e) => { // an error occurred console.log(e.message); }; ws.onclose = (e) => { // connection closed console.log(e.code, e.reason); };
- 117. Component Basic Props SpecialNon-Dom Attributes • key Virtual DOM의 변화 부분의 업데이트 비교를 위한 DOM Tree Key. 휘발성 데이터. • ref 자식 Element를 상위 Component가 this.refs 객체를 통해 접근. Named Property로 접근하는 ID 값. • dangerousSetInnerHTML 특정 HTML String을 통해 자식 Element를 표현할 때 사용. 어쩔 수 없는 특수한 상황에서만 사용. svg의 표현, html 태그가 포함된 국제화 스트링의 표현, 서버사이드 렌더링 시 인라인 <script> 텍스트 표현 등…
- 118. React Native Development ComponentLifecycle Images Handling Touches View Installing UIExplorer React Native Documents
- 119. React Native DevelopmentComponent Lifecycle Overview • React.Component는 기본 추상 클래스. • React.Component를 직접 참조하는 것은 거의 불가능하며 대신 일반적인 서브 클래싱을 통해 render () 메서드를 정의. • 일반적으로 React 구성 요소를 일반 JavaScript 클래스로 정의. class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
- 120. React Native DevelopmentComponent Lifecycle Overview • 각 구성 요소에는 프로세스의 특정 시간에 코드를 실행하기 위해 재정의 할 수 있는 여러 "라이프 사이클 메소드"가 있습니다. • will 의 접두사가 붙은 메소드는 특정 이벤트가 일어나기 직전에 호출. • did 접두어가 붙은 메소드는 특정 이벤트 직후에 호출.
- 121. React Native DevelopmentComponent Lifecycle Mounting 구성 요소의 인스턴스가 만들어지고 DOM에 삽입 될 때 호출. • constructor(props) React 구성 요소의 생성자는 마운트되기 전에 호출됨. 생성자를 구현할 때 다른 구문보다 먼저 super (props)를 호출 해야함. (this.props가 생성자에서 정의되지 않아 버그가 발생) 생성자는 State를 초기화 할 수 있는 적절한 메서드이며 초기화메서드를 바인딩하지 않으면 구현할 필요가 없음. Prop을 기반으로 상태를 초기화하는 것도 괜찮음. (효과적으로 Prop을 "분기 (fork)"하고 Prop으로 초기 State를 설정) • componentWillMount() 마운트가 발생하기 직전에 호출. render() 메서드 전에 호출되기 때문에 State를 동기적으로 설정하면 다시 렌더링 안됨. 일반적으로 경우에는 생성자 ()를 사용하는 것이 적절함. • render() 필수 메서드. 호출 시점에, this.props와 this.state를 검사하고 단일 React 요소를 반환해야함. 렌더링을 원치 않을 경우 null 또는 false를 반환. (ReactDOM.findDOMNode (this)는 null을 반환) State를 수정하지 않고 호출 할 때마다 동일한 결과를 반환해야 함. 브라우저와 직접 상호 작용하지 않음. (componentDidMount () 또는 다른 라이프 사이클 메소드에서 상호작용) • componentDidMount() 구성 요소가 마운트 된 직후에 호출. DOM 노드가 필요한 초기화 - 데이터를로드해야하는 경우 네트워크 요청을 인스턴스화하는 메서드.
- 122. React Native DevelopmentComponent Lifecycle Updating Prop이나 State에 대한 변경으로 인해 발생함. 컴퍼넌트의 재 렌더링 호출. • componentWillReceiveProps(nextProps) 구성 요소가 새로운 Prop을 받기 전에 호출됨. Prop 변경 (예 : 재설정)에 대한 응답으로 상태를 업데이트해야하는 경우 this.props 및 nextProps를 비교. 변경 내용 만 처리하려는 경우 현재 값과 다음 값을 비교 해야함. (부모 요소에서 구성 요소를 다시 렌더링 할 때 문제가 발생할 수 있음.) 최초 Mounting에서는 componentWillReceiveProps를 호출하지 않음. • shouldComponentUpdate(nextProps, nextState) State 또는 Prop의 변경사항을 검사하여 렌더링 여부 판단. 기본 동작은 모든 상태 변경 시 다시 렌더링. 기본값은 true. (초기 렌더링 또는 forceUpdate ()가 사용될 때 호출되지 않음). Child 컴퍼넌트에 전파 되지는 않음. • componentWillUpdate(nextProps, nextState) 새로운 Prop이나 State가 수신 된 후 렌더링 직전에 호출됨. 업데이트 렌더링 전 프로세스를 수행 . 초기 렌더링에 호출되지 않음. • componentDidUpdate(prevProps. prevState) 업데이트 렌더링 직후에 호출. 초기 렌더링에서 호출되지 않음. componentDidMount()와 유사.
- 123. React Native DevelopmentComponent Lifecycle Unmounting 구성 요소가 DOM에서 제거 될 때 호출. • componentWillUnmount() 구성 요소가 마운트 해제되고 제거되기 직전에 호출. 타이머 무효화, 네트워크 요청 취소 또는 componentDidMount에서 작성된 DOM 요소 정리 및 반환 수행. https://facebook.github.io/react/docs/react-component.html#unmounting
- 124. React Native DevelopmentImages Static Images Resources • iOS 및 Android 앱에서 이미지 및 기타 미디어 Asset을 관리하는 통일된 방법. • 정적 이미지를 앱에 추가하려면 소스 코드 트리의 특정 위치에 복사 한 후 아래 소스와 같이 참조함. • 이미지 이름은 JS 모듈이 해석되는 것과 동일한 방법. 패키지 관리자는 my-icon.png가 필요한 구성 요소와 동일한 폴더에서 my-icon.png를 찾음. • my-icon.ios.png 및 my-icon.android.png 가 있는 경우 패키지 관리자는 플랫폼에 파일을 자동 선택. • @2x 및 @3x 접미사를 사용하여 다양한 화면 밀도의 이미지를 제공 함. <Image source={require('./my-icon.png')} . ├── button.js └── img ├── check@2x.png └── check@3x.png
- 125. React Native DevelopmentImages Static Images Resources • Windows에서 프로젝트에 새 이미지를 추가하는 경우 패키지 도구를 다시 시작. • 다음과 같은 몇 가지 있음. iOS 및 Android의 동일함. 이미지는 JavaScript 코드와 동일한 성격으로 간주됨. 전역 네임 스페이스가 없음. 즉, 이름 충돌에 대해 걱정할 필요 없음. 실제로 사용되는 이미지 만 앱에 패키지. 이미지를 추가 및 변경하는 데는 앱을 다시 컴파일 할 필요가 없음. 이미지는 npm 패키지를 통해 배포 할 수 있음. // GOOD <Image source={require('./my-icon.png')} /> // BAD var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; <Image source={require('./' + icon + '.png')} /> // GOOD var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png'); <Image source={icon} />
- 126. React Native DevelopmentImages Static Non-Images Resources • 오디오, 비디오 또는 문서 파일을 프로젝트에 정적으로 포함시킬 수 있음. .mp3, .wav, .mp4, .mov, .html 및 .pdf를 포함한 일반적인 파일 형식이 지원. • 전체 목록은 패키지 관리자 기본 파일 참조 https://github.com/facebook/react-native/blob/master/packager/defaults.js
- 127. React Native DevelopmentImages Images From Hybrid App’s Resources • 하이브리드 앱 (React Native의 일부 UI, 플랫폼 코드의 일부 UI)을 빌드하는 경우 Xcode Asset 카탈로그 또는 Android Drawable 폴 더를 통해 앱에 이미 번들 된 이미지를 사용할 수 있음. • 이 방법은 안전성 검사를 제공하지 않음. • 응용 프로그램에서 해당 이미지를 사용할 수 있도록 보장하는 것은 사용자의 몫. 또한 수동으로 이미지 크기를 지정해야 함. <Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
- 128. React Native DevelopmentImages Network Images • 앱에 표시 할 이미지의 대부분은 컴파일 할 때가 아닌, 동적으로 일부를 로드 하여 리소스를 효율적으로 활용. 정적 리소스와 달리 이미지의 크기를 수동으로 지정해야 함. iOS에서 App Transport Security 요구 사항을 충족하려면 https를 사용하는 것이 좋음. • 이 방법 역시 안전성 검사를 제공하지 않음. 응용 프로그램에서 해당 이미지를 사용할 수 있도록 보장하는 것은 사용자의 몫. 또한 수동으로 이미지 크기를 지정해야 함. // GOOD <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} /> // BAD <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
- 129. React Native DevelopmentImages Automatically Size • 브라우저에서 이미지에 크기를 지정하지 않으면 브라우저는 0x0 요소를 렌더링하고 이미지를 다운로드 한 다음 올바른 크기로 이미지 를 렌더링 하는데 이 때 가장 큰 문제점은 이미지가 로드 될 때 크기가 주변을 침범함. 이는 매우 나쁜 UX를 초래하게됨. • React Native에서는 require ( './ my-icon.png') 구문을 통해 앱 번들에서 로드 된 정적 이미지의 크기는 장착 시 즉시 사용할 수 있으 므로 자동으로 크기가 조정됨 • require ( './ my-icon.png')의 결과. {"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573}
- 130. React Native DevelopmentImages Source as an object • React Native에서 src 속성의 이름은 source이고 uri 속성을 가진 객체는 문자열이 아니라는 점이 흥미로운 결정입니다. • 메타 데이터를 첨부. require ( './ my-icon.png')를 사용하는 경우 실제 위치 및 크기에 대한 정보를 추가합니다 (이 사실에 의존하지 않고 나중에 변경 될 수 있습니다). {uri : ...} 대신 {uri : ..., crop : {left : 10, top : 50, ...}을 출력. • 사용자 측에서는 이를 통해 이미지의 크기와 같은 유용한 속성으로 객체에 주석을 달아서 표시 할 크기를 계산할 수 있음. • 이미지에 대한 더 많은 정보를 저장할 수 있도록 데이터 구조화. <Image source={{uri: 'something.jpg'}} />
- 131. React Native DevelopmentImages Background Image via Nesting • 배경 이미지 사용 • 일반 <Image> 구성 요소를 만든 후 들어가야 할 하위 요소를 추가. return ( <Image source={...}> <Text>Inside</Text> </Image> );
- 132. React Native DevelopmentView View • UI 구성을 위한 가장 기본적인 컴퍼넌트 • Flexbox, Style, Touch handling과 accessibility를 지원하는 컨테이너 • Runtime 에 ios UIView, <div>, android.view와 직접 연결 class ViewColoredBoxesWithText extends Component { render() { return ( <View style={{flexDirection: 'row', height: 100, padding: 20}}> <View style={{backgroundColor: 'blue', flex: 0.3}} /> <View style={{backgroundColor: 'red', flex: 0.5}} /> <Text>Hello World!</Text> </View> ); } }
- 133. React Native DevelopmentView View • Synthetic Touch Events • NativeEvent • changedTouches : 마지막 이벤트 이후 변경된 모든 터치 이벤트의 배열 • Identifier : 터치ID • locationX : 해당 요소의 터치 X좌표 • locationY : 해당 요소의 터치 Y좌표 • pageX : root요소를 기준으로 하는 X 좌표 • pageY : root요소를 기준으로 하는 Y 좌표 • target : 터치 이벤트를 수신한 요소의 Node ID • timestamp : 터치의 시간식별자. (속도계산) • touches : 화면상의 모든 현재 접촉의 배열 class ViewColoredBoxesWithText extends Component { render() { return ( <View style={{flexDirection: 'row', height: 100, padding: 20}}> <View style={{backgroundColor: 'blue', flex: 0.3}} /> <View style={{backgroundColor: 'red', flex: 0.5}} /> <Text>Hello World!</Text> </View> ); } }
- 134. React Native DevelopmentInstalling UIExplorer 환경구성 • Android • Android SDK 설정 • Android NDK 설정 • IOS • Xcode Command Line Tools 설치 #/bin/sh # Android SDK export ANDROID_HOME=/Users/ageofblue/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools: # Android NDK export ANDROID_NDK=/Users/ageofblue/Developments/SDKs/android-ndk-r10e $ source .bash_profile $ xcode-select --install
- 135. React Native DevelopmentInstalling UIExplorer React Native Source Clone • React Native Source 를 github에서 Clone. • Github 주소 : https://github.com/facebook/react-native • git clone https://github.com/facebook/react-native • NPM 패키지를 통해 라이브러리 다운로드 $ git clone https://github.com/facebook/react-native Cloning into 'react-native'... remote: Counting objects: 134060, done. remote: Compressing objects: 100% (151/151), done. remote: Total 134060 (delta 272), reused 168 (delta 168), pack-reused 133741 Receiving objects: 100% (134060/134060), 118.89 MiB | 2.45 MiB/s, done. Resolving deltas: 100% (92316/92316), done. $ cd react-native && npm install
- 136. React Native DevelopmentInstalling UIExplorer React Native Source Clone • Android Siged APK 설정 • UIExplorer Example Directory 이동 • Android apk 를 Sign 하기 위한 키 쌍 생성. • Gradle.properties 수정 $ cd /react-native/Examples/UIExplorer/android/app $ keytool -genkey -v -keystore production.keystore –alias Leonardo.park –keyalg RSA –keysize 2048 – validity 10000 $ vi gradle.properties MYAPP_RELEASE_STORE_FILE=production.keystore MYAPP_RELEASE_KEY_ALIAS=Leonardo.park MYAPP_RELEASE_STORE_PASSWORD=***** MYAPP_RELEASE_KEY_PASSWORD=***** $
- 137. React Native DevelopmentInstalling UIExplorer React Native Source Clone • Android Siged APK Build • Build • Install $ ./gradlew :Examples:UIExplorer:android:app:installRelease . . . .
- 138. React Native DevelopmentInstalling UIExplorer React Native Source Clone • Android Siged APK Build • Gradle 을 이용 하여 Build 한 후 Android 디바이스에 설치 • USB 를 통하여 Android 디바이스 연결 후 빌드. • Java 8 기반. $ ./gradlew :Examples:UIExplorer:android:app:installRelease . . . .
- 139. React Native DevelopmentReact Native Documents React Native Documents • React Native Document 사이트를 통하여 각각의 플랫폼 및 컴퍼넌트의 사용법을 알고 사용한다. • https://facebook.github.io/react-native/
- 140.
- 141. Advanced Debugging Accessing theIn-App Developer Menu • 기기를 흔들거나 iOS 시뮬레이터의 하드웨어 메뉴에서 '흔들기'를 선택하여 개발자 메뉴에 액세스. • 응용 프로그램이 iPhone Simulator에서 실행 중일 때 ⌘ + D 키보드 단축키 사용. • Android 에뮬레이터에서 실행할 때 는 ⌘ + M을 사용. • 릴리스 (프로덕션) 빌드에서는 개발자 메뉴는 비활성화.
- 142. Advanced Debugging Reloading JavaScript •변경을 할 때마다 앱을 다시 컴파일하는 대신 앱의 자바 스크립트 코드를 즉시 리로드 할 수 있음. • 개발자 메뉴에서 "새로 고침"을 선택. • iOS 시뮬레이터에서 ⌘ + R, Android 에뮬레이터에서 R을 두 번 입력. • ⌘ + R 키보드 바로 가기가 iOS 시뮬레이터를 리로드하지 않는 것 같으면, 하드웨어 메뉴로 이동하여 키보드를 선택하고 "하드웨어 키 보드 연결"이 선택되어 있는지 확인. Automatic reloading • 코드가 변경 될 때마다 앱이 자동 리로드 하여 개발 시간을 단축. • 자동 리로드는 개발자 메뉴에서 “Enable Live Reload”을 선택. • 개발자 메뉴에서 Hot Reloading을 활성화하면 앱이 실행 중인 상태에서 새 버전의 화일이 자동으로 JavaScript 번들에 삽입됨. • 핫 리로드시 문제가 발생하면 전체 리로드를 사용하여 앱을 다시 실행. • 다음과 같은 특정 상황에서 변경 사항이 적용 되려면 앱을 다시 작성 해야함. iOS의 Images.xcassets 이미지 또는 Android의 res / drawable 폴더와 같은 새 리소스를 네이티브 앱 번들에 추가한 경우. 네이티브 코드 (Android에서 iOS 또는 Java / C ++의 Objective-C / Swift)를 수정한 경우.
- 143. Advanced Debugging In-app Errorsand Warnings 개발 빌드의 경우 오류 및 경고 메시지가 앱 내에 표시됨. • Errors 앱에 오류가 있는 경우 앱 내부가 빨간색 배경의 전체 화면 경고로 표시. 이 화면을 Red-Box 라고 하며 console.error()를 사용하여 수동으로 호출 할 수 있음. • Warnings 경고는 노란색 배경의 화면에 표시. 이러한 경고를 Yellow-Box라고 함. 알림을 클릭하면 더 많은 정보를 보거나 해제 할 수 있음. console.warn ()을 사용하여 수동으로 호출 할 수 있음. console.disableYellowBox = true 를 사용하여 비활성화. Xcode에서 Yellow-Box 는 IS_TESTING 환경 변수를 설정하여 비활성화. console.ignoredYellowBox = [ 'Warning : ...']; • Red-Box 와 Yellow-Box는 릴리즈 (프로덕션) 빌드에서 자동으로 비활성화됨
- 144. Advanced Debugging Accessing consolelogs • 앱이 실행되는 동안 터미널에서 아래 명령을 통해 iOS 또는 Android 앱의 콘솔 로그를 확인 할 수 있음. • iOS 시뮬레이터에서 디버그 → 시스템 로그 열기. • Android 앱이 기기 또는 에뮬레이터에서 실행되는 아래의 명령을 통해 터미널 액세스. $ react-native log-ios $ react-native log-android adb logcat *:S ReactNative:V ReactNativeJS:V
- 145. Advanced Debugging Chrome DeveloperTools • Chrome에서 자바 스크립트 코드를 디버그하려면 개발자 메뉴에서 'JS 원격 디버깅'을 선택. http : // localhost : 8081/debugger-ui • Chrome 메뉴에서 도구 → 개발자 도구 선택. (Mac에서는 ⌘ + Option + I, Windows에서는 Ctrl + Shift + I) Caught 예외 일시 중지를 활성화 할 수 있음. • 현재 Chrome 개발자 도구의 '반응'탭을 사용하여 앱 위젯을 검사 할 수 없음. 해결 방법으로 Nuclide의 "React Native Inspector"를 사용. • Chrome 개발자 도구를 사용하여 기기에서 디버깅하기. iOS 기기에서 RCTWebSocketExecutor.m 파일을 열고 "localhost"를 컴퓨터의 IP 주소로 변경 한 다음, 개발자 메뉴에서 "Debug JS Remotely"를 선택. Android 5.0 이상 기기 USB를 통해 연결된 경우 adb 명령 줄 도구를 사용하여 장치에서 컴퓨터로 포트 포워딩 설정. adb reverse tcp : 8081 tcp : 8081 • 개발자 메뉴에서 "Dev Settings"를 선택한 다음 "Debug 기기의 서버 호스트 "설정이 컴퓨터의 IP 주소와 일치하도록 설정. 문제가 발생하면 Chrome 확장 프로그램 중 하나가 예상치 못한 방식으로 디버거와 상호 작용할 가능성이 있음. 모든 확장 프로그램을 사용 중지하고 문제가 있는 확장 프로그램을 찾을 때까지 한 번에 하나씩 다시 사용하도록 설정.
- 146. Advanced Debugging Chrome DeveloperTools • Debugging using a custom JavaScript debugger 크롬 개발자 도구 대신에 사용자 지정 자바 스크립트 디버거를 사용하려면 사용자 정의 디버거를 시작하는 명령에 REACT_DEBUGGER 환경 변수를 설정. 공백으로 구분하여 모든 프로젝트 뿌리의 목록을 설정. "디버그 JS 원격으로"를 선택. EX) REACT_DEBUGGER = "node /path/to/launchDebugger.js --port 2345 --type ReactNative“ /path/to/launchDebugger.js --port 2345 --type ReactNative / path 명령이 실행. / to / reactNative / app가 디버거를 시작하는 데 사용됩니다.? 이 방식으로 실행되는 사용자 정의 디버거 명령은 수명이 짧은 프로세스여야하며 200KB보다 큰 출력을 생성해서는 안됨. • Debugging native code 기본 코드로 작업 할 때 (예 : 기본 모듈 작성) Android Studio 또는 Xcode에서 앱을 실행하고 표준 네이티브 앱을 빌드 할 때처럼 디버 깅 기능 (설정 중단 점 등)을 활용할 수 있음. • Performance Monitor 성능 오버레이를 사용하면 개발자 메뉴에서 ＂성능 모니터＂를 선택하여 성능 문제를 디버그 하는 데 도움.
- 147. Advanced Testing Running Testsand Contributing • React Native Repo에는 PR로 회귀하지 않았 음을 확인하기 위해 실행할 수 있는 몇 가지 테스트가 있습니다. 이 테스트는 Travis 및 Circle CI 연속 통합 시스템에서 실행되며, 자동으로 풀 요청에 테스트 결과가 주석으로 표시됨. • React Native에 버그를 수정하거나 새로운 기능을 추가 할 때 마다 이를 다루는 테스트를 추가 해야함.
- 148. Advanced Testing Android Tests •Unit Tests 안드로이드 단위 테스트는 에뮬레이터에서 실행되지 않음. 기본적으로 Java 설치가 되어 있지 않다면 Java 8 (JDK8)을 설치 해야함. Buck 빌드 도구를 설치 Android 단위 테스트를 실행하려면 다음과 같이하십시오. $ cd react-native $ ./scripts/run-android-local-unit-tests.sh
- 149. Advanced Testing Android Tests •Integration Tests 통합 테스트를 실행하려면 Android NDK를 설치 Buck 빌드 도구를 설치 실제 Android 장치를 사용할 수도 있지만 에뮬레이터에서 Android 통합 테스트를 실행. 테스트 용 표준으로 작동하는 에뮬레이터 구성을 유지 관리. $ cd react-native $ ./scripts/run-android-emulator.sh $ cd react-native $ ./scripts/run-android-local-integration-tests.sh
- 150. Advanced Testing iOS • IntegrationTests 네이티브 요소와 JS 구성 요소가 모두 브리지를 통해 통신 해야하는 통합 구성 요소를 보다 쉽게 테스트. • RCTTestRunner는 ReactNative 환경을 설정하고 Xcode에서 XCTestCases로 테스트를 실행할 수 있는 기능을 제공. (runTest : 모듈이 가장 간단한 방법 임). • RCTTestModule은 JS로 NativeModules.TestModule로 내보내지며 테스트 자체는 JS로 작성. 테스트가 완료되면 TestModule.markTestCompleted ()를 호출 해야함. 테스트 실패는 주로 JS 예외를 throw하여 나타냄. 다음 사용 예제를 참조. • IntegrationTestHarnessTest.js • UIExplorerIntegrationTests.m • IntegrationTestsApp.js Xcode의 IntegrationTest 및 UIExplorer 응용 프로그램에서 cmd + U를 사용하거나 MacOS의 명령 줄에서 다음을 실행하여 통합 테스 트를 로컬로 실행할 수 있습니다. $ cd react-native $ ./scripts/objc-test-ios.sh
- 151. Advanced Running OnDevice Setting up an iOS device • iOS 기기에 앱을 설치하려면 Mac, Apple ID 및 USB 케이블이 필요합니다. • USB를 통해 장치를 Mac에 연결 한 다음 Xcode를 엽니 다. 프로젝트 탐색기의 제품> 대상 도구 모음 메뉴에서 장치를 선택하십시오. Xcode는 개발을 위해 장치를 등록합니다. • 어떤 문제가 생기면 Apple의 App on Device 문서를보십시오. • 마지막으로 휴대 전화를 빌드 대상으로 선택하고 빌드를 눌러 실행하십시오.
- 152. Advanced Running OnDevice Building your app for production • 앱 스토어에서 배포 용 앱을 제작하려면 Xcode에서 Release 스킴으로 빌드. • Release 용으로 제작 된 앱은 개발자 메뉴를 자동으로 사용 중지. • 자바 스크립트를 로컬에서 로드하여 컴퓨터에 연결되어 있지 않은 상태에서도 테스트 할 수 있음. • React Native CLI를 사용하여 --configuration 옵션에 release 값을 주어 실행 가능 react-native run-ios --configuration Release
- 153. Advanced Running OnDevice Setting up an Android device 기기에서 Android 앱을 실행하려면 Mac 또는 PC와 USB 케이블이 필요. 1. USB를 통한 디버깅을 위해 '개발자‘ 메뉴를 활성화. 2. 개발자 옵션에서 "USB 디버깅 허용＂활성화. 3.애플리케이션 화면이 나오지 않는 경우 adb reverse tcp:8081 tcp:8081 React 네이티브 CLI를 사용하여 릴리스 빌드 react-native run-android --variant = release // Plug in your device via USB $ adb devices List of devices attached emulator-5554 offline # Google emulator 14ed2fcc device # Physical device // Run your app $ react-native run-android
- 154. Advanced Running OnDevice Connecting to the development server 개발 컴퓨터에서 실행중인 개발 서버에 연결하여 장치를 신속하게 변경할 수 있음. 방법 1 : adb severse 사용 방법 2 : 먼저 USB 케이블을 사용하여 기기에 앱을 설치. 같은 와이파이 망에 다비이스 접속 앱의 개발자메뉴에서 Device server host (장치 서버 호스트 디버그) 선택. 컴퓨터의 IP 주소와 포트 입력. JS 재로드를 선택 // Using adb severse $ adb reverse tcp:8081 tcp:8081