1. 카운트 기능 만들기
2. 가위바위보 기능 만들기
3. (과제) immutable js?
자바스크립트는 왜 setstate를 하는가?
immutable js: "ㅎㅇ"
3-1. Immutable collections for JavaScript
Immutable data는 생성되면 바꿀 수 없음
-> simpler development + no defensive copy + 상향된 memoization + 간단하게 detection
Persistent data는 mutative(변이) API 제공
mutative API?
in-place(제자리에서) 업데이트 x
새로 업데이트된 데이터를 생성 o
Immutable.js는 Persistent + Immutable 데이터 structure 제공
-> List, Stack, Map, OrderedMap, Set, OrderedSet, Record
-> structure sharing (hash maps tries와 vector tries) 사용하여 modern JavaScript VMs에서, efficient + 복사 필요성 및 캐시 데이터 minimizing
Immutable.js는 lazy Seq 제공
lazy Seq? intermediate representations 없이 efficient collection method chaining을 허용 (map, filter)
Range와 Repeat로 Seq를 만듦
3-2. Getting started
Browser
Immutable.js는 dependencies(종속성)이 없음
-> 브라우저에 포함
- immutable npm module
- script 태그 안에 Immutable.js 포함.
global scope에 Immutable를 추가하여 script태그를 사용
<script src="immutable.min.js"></script>AMD 스타일 로더(예: RequireJS )를 사용.
require(['./immutable.min.js'], function (Immutable) {
var map1 = Immutable.Map({ a: 1, b: 2, c: 3 });
var map2 = map1.set('b', 50);
map1.get('b'); // 2
map2.get('b'); // 50
});Flow & TypeScript
IDE에서 type generic, error detection, auto-complete 등의 장점을 유지하면서 Flowtype 및 TypeScript에서 native collections를 사용하는 것처럼, Immutable collections 및 sequences를 사용.
immutable npm으로 설치 -> Flow (v0.55.0 or higher)와 TypeScript (v2.1.0 or higher)를 위한 type definitions 제공
Using TypeScript with Immutable.js v4
type definitions는 ES2015를 embrace.
Immutable.js 자체 legacy browsers와 environments 지원 + type definitions에는 TypeScript's 2015 lib 필요
tsconfig.json에
1. "target": "es2015"
2. "lib": "es2015"
tsc command에
3. --target es2015
4. --lib es2015
중에 하나
3-3. The case for Immutability
tracking mutation + maintaining state로 인한 개발의 어려움
-> data flow에 대해 다르게 접근? Immutable data 개발!
App 전체 data events를 subscribing
-> book-keeping overhead(performance 저하 + sync 방해) 발생
data를 subscribing 대신 above에서 전달 + 변경될 때만 작업
-> equality를 사용가능
Immutable collection
시간에 따라 변하는 object < 특정 순간 instance의 state인 value
-> value equality 판단 (Immutable.is() function or .equals() method) > object 참조 identity 판단(=== operator)
const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3 });
const map2 = Map({ a: 1, b: 2, c: 3 });
map1.equals(map2); // true
map1 === map2; // false
const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3 });
const map2 = map1.set('b', 2); // Set to same value
map1 === map2; // true
const { Map } = require('immutable');
const map = Map({ a: 1, b: 2, c: 3 });
const mapCopy = map; // Look, "copies" are free!referenct equality 용례
Immutable.js는 동일 collection을 생성 시, 기존 collection을 return -> reference equality(===)로 변경여부를 확인
-> deeper equality로 확인하는 것이 costly할 경우,memoization function에서 사용할 때 useful
reference equality는 성능최적화로 Immutable.is와 .equals()의 내부에서 사용
object가 immutable
-> "copied"로 다른 reference 생성 > copying으로 전체 object
3-4. JavaScript-first API
Immutable.js는 functional programming의 concept를 JavaScript에서 사용
ES2015 Array, Map, Set을 미러링하는 Object-Oriented(객체지향) API
Immutable collections을 위한 다른 점은 새로운 immutable collection을 return하는 대신, collection을 mutate(push, set, unshift, splice)함
Convert from raw JavaScript objects and arrays.
Immutable.js는 모든 plain JavaScript Array 및 Object를 정교한 method로 Collection으로 처리
Converts back to raw JavaScript objects.
Immutable.js Collections은 shallowly하게 JavaScript Arrays 및 Objects로 변환할 수 있음.
ES2015 수용
3-5. Nested Structures
Immutable.js의 collections은 nested한 deep trees of data임
3-6. Equality treats Collections as Values
Immutable.js의 collections은 pure data values로 처리.
immutable collection이 같은 value의 collection이라면 value equal로 간주함 > 두 변수가 동일한 객체 instance 참조인지 결정하는 JavaScript의 typical reference equal(===)과 다름
Performance tradeoffs
value equality는 reference equality와 다름
value equality는 모든 collection을 고려하여, O(N) time complexity를 가짐 -> large collection이면 costly + not equal하며 highly similar해도 inequality를 quickly하게 결정
reference equality는 초기 memory reference만 고려하여, O(1) time complexity를 가짐 -> 항상 빠르지만, not reference-equal이며 value-equal인 경우 발생
Return self on no-op optimization
Immutable.js value가 변화가 없을 경우 업데이트를 위한 새로운 객체 생성을 피하기 위해, efficient reference equality checking to quickly을 사용
변경을 초래하는 업데이트는 새로운 reference를 return
이러한 업데이트들은 독립적으로 발생하므로, 두 개의 유사한 업데이트가 같은 reference를 return하지 않음
3-7. Batching Mutations
새로운 immutable object를 생성하기 위해 mutation을 적용하면 overhead로 인한 성능 저하 penalty가 발생가능
returning 전에 locally하게 일련의 mutation을 적용할 때, Immutable.js는 일시적인 mutable(변경가능한) collection의 복사본을 만들고, performant 방식으로 mutation의 batch를 적용함.
3-8. Lazy Seq
Seq는 lazy operation으로, intermediate collections를 생성하지 않음으로써 higher-order collection methods의 사용을 효율적으로 연결함
Seq는 immutable
Seq가 생성되면, 변경 추가 재배열 수정할 수 없음
대신, Seq에 호출된 어떠한 mutative method는 새로운 Seq를 return함
Seq는 lazy
Seq method 호출에 응답하는데 필요한 만큼의 작업만 수행
Values는 iteration 동안 종종 생성됨
