블로그

[TECH-0003] ES5 핵심 정리

Sat, 17 Mar 2018 12:10:00 +0900

ES5 핵심 정리

연구개발본부

2018. 3. 17.

History

ES1 : 1997
ES2 : 1998
ES3 : 1999
ES5 : 2009
ES6 : 2015 (ES2015)
ES2016

Getter accessors

var obj = { 
  get x(){
    return 1;
  }
}

console.log(obj.x);  // 1

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Setter accessors

var value = 0;
var obj = {
  set x(v) {
    value = v;
  }
}
obj.x = 2;
console.log(value);  // 2

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Trailing commas in Object literals

var obj = {
  a: true,
  b: false,	// ok
}

console.log(obj.b);  // false

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Trailing commas in array literals

var arr = [1, 2, ];

console.log(arr.length);  // 2

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Reserved words as property names

var obj = { 
  if: 1,
  else: 2,
  catch: 3
}
console.log(obj.if);    // 1
console.log(obj.else);  // 2
console.log(obj.catch); // 3

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Object.create

create a new object, using an existing object to provide the newly created object’s __proto__

var person = { 
  isHuman: false,
  print: function () { console.log(this.name + ", " + this.isHuman);}
};
var me = Object.create(person);
me.name = "Matthew";
me.isHuman = true; // can be overwritten
me.print(); // Matthew, true
console.log(me.__proto__  == person)  // true
console.log(JSON.stringify(me)); //{"name":"Matthew","isHuman":true}
console.log(JSON.stringify(person));//{"isHuman":false}

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Object.defineProperty

defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

var object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77;
// throws an error in strict mode

console.log(object1.property1);  // 42

IE8	IE9	IE10	IE11	chrome	firefox	safari
Yes	Yes	Yes	Yes	Yes	Yes	Yes

Object.defineProperties

defines new or modifies existing properties directly on an object, returning the object.

var o1 = {};

Object.defineProperties(o1, {
  prop1: { value: 42, writable: true},
  prop2: {}
});

console.log(o1.prop1); // 42

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Object.getPrototypeOf

returns the prototype (i.e. the value of the internal [[Prototype]] property) of the specified object.

var prototype1 = {};
var object1 = Object.create(prototype1);
var object2 = Object.getPrototypeOf(object1)

console.log(object2 === prototype1); //true
console.log(object2 === object1.__proto__); //true

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Object.keys

returns an array of a given object’s own enumerable properties, in the same order as that provided by a for…in loop

var arr = ['a', 'b', 'c']; // simple array
console.log(Object.keys(arr)); // ['0', '1', '2']

var obj = { 0: 'a', 1: 'b' }; // array like object
console.log(Object.keys(obj)); // ['0', '1' ]

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // ['2', '7', '100']

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Object.seal

객체를 밀봉한다. 객체를 밀봉하면 그 객체에는 새로운 속성을 추가할 수 없고, 현재 존재하는 모든 속성을 설정 불가능 상태로 만들어 준다. 하지만 쓰기 가능한 속성의 값은 밀봉 후에도 변경할 수 있다. (Object.freeze()와의 차이)

var o1 = { prop1: 42 };
var o2 = Object.seal(o1);

console.log(o1 === o2);  // true
console.log(o1.prop1 + " " + o2.prop1); // 42 42
o1.prop1 = 33;
console.log(o1.prop1 + " " + o2.prop1); // 33 33
delete o1.prop1; // cannot delete
console.log(o1.prop1 + " " + o2.prop1); // 33 33

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Object.freeze

불변(immutable) 객체를 만든다. 객체에 새로운 속성(property)를 추가할 수 없고, 객체에 원래 존재하던 속성을 제거할 수 없으며, 객체의 속성, 열거가능성(enumerability), 설정가능성(configurability), 값 쓰기 가능성(writability)을 변경할 수 없게 만든다는 것을 의미한다.

var o1 = { prop1: 42 };
var o2 = Object.freeze(o1);

console.log(o1 === o2);  // true
console.log(o1.prop1 + " " + o2.prop1); // 42 42
o1.prop1 = 33; // error in strict mode
console.log(o1.prop1 + " " + o2.prop1); // 42 42
delete o1.prop1; // cannot delete
console.log(o1.prop1 + " " + o2.prop1); // 42 42

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Object.preventExtensions

prevents new properties from ever being added to an object

var o1 = {};
Object.preventExtensions(o1);
try {
  Object.defineProperty(o1, 'prop1', {value: 42});
} catch (e) {
  console.log(e); 
  //TypeError: Cannot define property prop1, 
  //           object is not extensible
}

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Object.isSealed

determines if an object is sealed.

var o1 = { prop1: 42 }

console.log(Object.isSealed(o1)); // false

Object.seal(o1);
console.log(Object.isSealed(o1)); // true

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Object.isFrozen

determines if an object is frozen.

var o1 = { prop1: 42 }

console.log(Object.isFrozen(o1)); // false

Object.freeze(o1);
console.log(Object.isFrozen(o1)); // true

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Object.isExtensible

determines if an object is extensible (whether it can have new properties added to it).

var o1 = { prop1: 42 }

console.log(Object.isExtensible(o1)); // ture
Object.preventExtensions(o1);
console.log(Object.isExtensible(o1)); // false

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Object.getOwnPropertyDescriptor

returns a property descriptor for an own property (not in the object’s prototype chain).

var obj1 = { prop1: 42 }
var desc1 = Object.getOwnPropertyDescriptor(obj1, 'prop1');

console.log(desc1.configurable); // true
console.log(desc1.value); // 42

IE8	IE9	IE10	IE11	chrome	firefox	safari
Yes	Yes	Yes	Yes	Yes	Yes	Yes

[fit]Object.getOwnPropertyNames

returns an array of all properties (including non-enumerable properties except for those which use Symbol) found directly upon a given object.

var o1 = { a: 1, b: 2, c: 3 };

console.log(Object.getOwnPropertyNames(o1)); 
// ["a", "b", "c"]

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Array.isArray

determines whether the passed value is an Array.

console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray({foo: 123})); // false
console.log(Array.isArray('foobar'));   // false
console.log(Array.isArray(undefined));  // false

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Array.prototype.indexOf

returns the first index at which a given element can be found in the array, or -1 if it is not present.

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison')); // 1
// start from index 2
console.log(beasts.indexOf('bison', 2)); // 4
console.log(beasts.indexOf('giraffe')); // -1

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Array.prototype.lastIndexOf

returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.lastIndexOf('bison')); // 4
// start from index 2
console.log(beasts.lastIndexOf('bison', 2)); // 1
console.log(beasts.lastIndexOf('giraffe')); // -1

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Array.prototype.every

tests whether all elements in the array pass the test implemented by the provided function.

function isBelow1(v) { return v < 40; }
function isBelow2(v) { return v < 20; }
function isBelow3(v) { return v < 0; }

var a1 = [1, 30, 39, 29, 10, 13];
console.log(a1.every(isBelow1)); // true
console.log(a1.every(isBelow2)); // false
console.log(a1.every(isBelow3)); // false

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Array.prototype.some

tests whether at least one element in the array passes the test implemented by the provided function.

function isBelow1(v) { return v < 40; }
function isBelow2(v) { return v < 20; }
function isBelow3(v) { return v < 0; }

var a1 = [1, 30, 39, 29, 10, 13];
console.log(a1.some(isBelow1)); // true
console.log(a1.some(isBelow2)); // true
console.log(a1.some(isBelow3)); // false

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Array.prototype.forEach

executes a provided function once for each array element.

var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  console.log(element);
});
// a
// b
// c

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Array.prototype.map

creates a new array with the results of calling a provided function on every element in the calling array.

var array1 = [1, 4, 9, 16];

var map1 = array1.map(function(x) { return x * 2; });
console.log(map1); // [2, 8, 18, 32]

var map2 = array1.map(x => x * 2);
console.log(map2); // [2, 8, 18, 32]

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Array.prototype.filter

creates a new array with all elements that pass the test implemented by the provided function

var w1 = ['spray', 'destruction', 'present'];

var r1 = w1.filter(function(w) { return w.length > 6; });
console.log(r1); // ["destruction", "present"]

var r2 = w1.filter(w => w.length > 6);
console.log(r2); // ["destruction", "present"]

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Array.prototype.reduce

applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

arr.reduce(callback[, initialValue]) callback(prev, curr, idx, arr)

var array1 = ['B', 'C', 'D'];
var reducer = (sum, curr) => sum + curr;
console.log(array1.reduce(reducer)); // BCD
console.log(array1.reduce(reducer, 'A')); // ABCD

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Array.prototype.reduceRight

applies a function against an accumulator and each value of the array (from right to left)to reduce it to a single value.

arr.reduceRight(callback[, initialValue]) callback(prev, curr, idx, arr)

var array1 = ['A', 'B', 'C'];
var reducer = (sum, curr) => sum + curr;
console.log(array1.reduceRight(reducer)); // CBA
console.log(array1.reduceRight(reducer, 'D')); // DCBA

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Array.prototype.sort

compareFn must be function or undefined

console.log([1,2].sort(undefined)); // [1,2]
console.log([1,2].sort((a,b) => a<b)); // [2,1]

// TypeError: The comparison function must be either 
// a function or undefined
try { [1,2].sort(null); } catch (e) {console.log(e)} 
try { [1,2].sort(true); } catch (e) {console.log(e)}
try { [1,2].sort({  }); } catch (e) {console.log(e)}
try { [1,2].sort(/a/g); } catch (e) {console.log(e)}

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Property access on strings

There are two ways to access an individual character in a string.

str.charAt()
str.[number]

console.log('cat'.charAt(1)); // 'a'
console.log('cat'[1]); // 'a'

IE8	IE9	IE10	IE11	chrome	firefox	safari
Yes	Yes	Yes	Yes	Yes	Yes	Yes

String.prototype.trim

removes whitespace from both ends of a string.

whiepace
- character : space, tab, no-break space, etc.
- line terminator : LF, CR, etc

var orig = '   foo  ';
console.log(orig.trim()); // 'foo'
var orig = 'foo    ';
console.log(orig.trim()); // 'foo'

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Date.prototype.toISOString

ISO 8601 format.(YYYY-MM-DDTHH:mm:ss.sssZ or ±YYYYYY-MM-DDTHH:mm:ss.sssZ)

var d1 = new Date('05 October 2011 14:48 UTC');
console.log(d1.toString()); // Wed Oct 05 2011 23:48:00 GMT+0900 (KST)
console.log(d1.toISOString()); // 2011-10-05T14:48:00.000Z
d1.setFullYear(200100);
console.log(d1.toString()); // Wed Oct 05 200100 23:48:00 GMT+0900 (KST)
console.log(d1.toISOString()); // +200100-10-05T14:48:00.000Z
d1.setFullYear(-100);
console.log(d1.toString()); // Wed Oct 05 -100 23:48:00 GMT+0900 (KST)
console.log(d1.toISOString()); // -000100-10-05T14:48:00.000Z

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Date.now

returns the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC.

var start = Date.now();

console.log("starting timer...");
setTimeout(function() {
  var millis = Date.now() - start;
  console.log("elapsed = " + Math.floor(millis/1000)); // 2
}, 2000);

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Date.prototype.toJSON

returns a string representation of the Date object.

var ev = new Date('August 19, 1975 23:15:30 UTC');
var d = event.toJSON();

console.log(d); // 1975-08-19T23:15:30.000Z
console.log(new Date(d).toUTCString()); 
// Tue, 19 Aug 1975 23:15:30 GMT

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Function.prototype.bind

첫번째 인자로 this 객체를 설정하고, 주어진 순서의 선행 인수가 있는 새로운 함수를 생성

var m = {
  x: 'B',
  get: function(val) { return val + "," +  this.x; }
}
console.log(m.get()); // undefined,B
console.log(m.get('A')); // A,B
var get1 = m.get;
console.log(get1()); // undefined,undefined
var get2 = get1.bind(m);
console.log(get2()); // undefined,B
var get3 = get1.bind(m, 'A');
console.log(get3()); // A,B

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

JSON

JSON is a syntax for serializing objects, arrays, numbers, strings, booleans, and null. some JavaScript is not JSON, and some JSON is not JavaScript. See also JSON

JavaScript	JSON differences
Objects and Arrays	속성(property)명은 큰따옴표로 묶여야 한다; 후행(trailing) 쉼표는 금지.
Numbers	선행(leading) 0은 금지됩니다; 소수점은 적어도 한 자릿수가 뒤따라야 합니다.
Strings	문자열은 큰따옴표로 묶여야 합니다

IE8	IE9	IE10	IE11	chrome	firefox	safari
Yes	Yes	Yes	Yes	Yes	Yes	Yes

Immutable globals

undefined NaN Infinity

var undefined = "a";
console.log(undefined); // undefined
var NaN = 24;
console.log(NaN); // NaN
var Infinity = 21;
console.log(Infinity); // Infinity

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Function.prototype.apply permits array-likes

function func(a,b) {
  console.log(a + ", " + b);
}

console.log(func.apply({}, [1,2])); // 1, 2
console.log(func.apply({}, {0:1, 1:2, length:2})); // 1, 2
console.log(func.apply({}, {0:1, 1:2})); // undefined, undefined

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

parseInt ignores leading zeros

console.log(parseInt('10') === 10); // true
console.log(parseInt('010') === 10); // true

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Function “prototype” property is non-enumerable

function func() {}
console.log(func.propertyIsEnumerable('prototype'));

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Arguments toString is “Arguments”

function func(){ 
  console.log(Object.prototype.toString.call(arguments));
  // [object Arguments]
}

func();

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Zero-width chars in identifiers

var _\u200c\u200d = true;
console.log(_\u200c\u200d);  // true
console.log("[\u200c\u200d]") // []

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Unreserved words

abstract, boolean, byte, char, double, final, float, goto, int, long, native, short, synchronized, transient, volatile

var int = true;
console.log(int);  // true

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Thrown functions have proper this values

function func() {
  try {
    throw function(obj) {
      console.log(this.a + "," + obj.a); 
    };
  } catch(e) {
    var _this = this;
    this.a = 'a';
    e(_this);
  }
}

func.apply({}); // undefined,a

IE8	IE9	IE10	IE11	chrome	firefox	safari
No	Yes	Yes	Yes	Yes	Yes	Yes

Reference

ECMAScript compatibility table - http://kangax.github.io/compat-table/es5/

[TECH-0002] ES2015 핵심 정리

Sat, 24 Feb 2018 19:10:00 +0900

ES2015 핵심 정리

History

ES1 : 1997
ES2 : 1998
ES3 : 1999
ES5 : 2009
ES6 : 2015 (ES2015)
ES2016

let, const

var : 기존 변수 선언, 함수 스코프, 호이스팅(hoisting)
let : 변수 선언, 블록 스코프, no hoisting(선언 전 검사 불가), window 객체의 property로 추가 안됨, 반복문에서 closure 생성시 반복문 조건 구문에서 생성된 변수의 경우 생성시점 값 유지
const : 상수 선언, 블록 스코프, no hoisting(선언 전 검사 불가), window 객체의 property로 추가 안됨
권장 : 기본적으로 const를 사용하고 변수값을 변경해야 하는 경우만 let을 사용

var

clouser 생성시 마지막 값 공유

var funcs = [];
for(var i=0;i<10;i++) {
  funcs.push((function(v){
    return function() {
      console.log(v);
    }
  }(i)));
}

funcs.forEach(function(func) {
  func(); // 0, 1, 2, … 9
}

let

반복문에서 closure 생성시 반복문 조건 구문에서 생성된 변수의 경우 생성시점 값 유지

var funcs = [];
for(let i=0;i<10;i++) {
  funcs.push(function() {
    console.log(i);
  });
}

funcs.forEach(function(func) {
  func(); // 0, 1, 2, … 9
}

Unicode

ECMAScript 6 이전에는 UCS16방식의 2byte Unicode만 지원
ES6에서는 Surrogate Pair을 이용한 4byte Unicode도 지원
charCodeAt, fromCharCode에 대응되는 codePointAt, fromCodePoint 함수 제공
normalize함수를 제공하여 코드 정규화 지원(NFC, NFD, NFKC, NFKD 등)
UCS16이 아닌 유니코드를 위한 u플래그가 정규식에 추가됨

codePointAt¹, fromCodePoint²

var text = '古a';
console.log(text.charCodeAt(0)); //55362
console.log(text.charCodeAt(1)); //57271
console.log(text.charCodeAt(2)); //97

console.log(text.codePointAt(0)); //134071
console.log(text.codePointAt(1)); //57271
console.log(text.codePointAt(2)); //97

console.log(String.fromCodePoint(134071)); //古
console.log(String.fromCodePoint(57271));  //�
console.log(String.fromCodePoint(97));     //a

normalize³, regular expression

var text = "인";
console.log(text.normalize("NFD")); //인
console.log(text.normalize("NFD").length) // 3
console.log(text.normalize("NFC")); //인
console.log(text.normalize("NFC").length) // 1

var text = '𠮷';
console.log(text.length); //2
console.log(/^.$/.test(text)); //false
console.log(/^.$/u.test(text)); //true

template literal

따옴표 대신 백틱(`) 사용
멀티라인 지원
치환자 지원 : 자바스크립트 표현식을 치환자로 사용. ${name}.
태그 지원 : 템플릿 리터럴 데이터와 함께 호출되는 함수

template literal

let count = 10, 
  price = 0.25, 
  message = litTag`${count} items cost $${(count * price).toFixed(2)}.`;

function literalTag(literals, ...substitutions) {
  let result = '';
  for(let i = 0; i < substitutions.length ; i++) {
    result += literals[i] + substitutions[i];
  }
  result += literals[literals.length - 1];
  return result;
}

console.log(message);    // 10 items cost $2.50.

default parameter, rest parameter

default parameter : function test(url, timeout = 2000 )
rest parameter : 나머지 매개변수는 앞에 세 개의 점(…)을 붙여서 표시

  function test(object, ...keys) {
    for(let i = 0 ; i < keys.length; i++) {
      console.log(keys[i]);
    }	
  }

function - spread operator⁴

배열을 나누어 함수에 개별적인 인자로 전달
apply()로 구현하던 기능을 대체할 수 있음
rest parameter를 전달할 때 사용 가능함

let values = [1,2,3,4,5];
console.log(Math.max.apply(Math, values)); // 5
console.log(Math.max(...values); // 5
let values1 = [0, ...values, 6]; // [0,1,2,3,4,5,6] 
function func1(...values) {
	Math.max(...values);
}

function name

name : 자바스크립트 함수 이름을 식별할기 위해 추가된 프로퍼티
디버깅을 위한 기능으로 함수 참조를 찾아오는 방법은 제공안함

function func1() {}
var func2 = function() {};
console.log(func1.name);  // func1
console.log(func2.name);  // func2

arrow function⁵

() => {}
prototype 없음
this 변경 불가
arguments 객체 없음
(param1 = defaultValue1, param2, …rest) => { statements }

function func1(a) {return a * 2;}
a => a*2;

tail call optimization

다음 조건을 만족할 때 새로운 호출 스택을 사용하지 않고 현재 스택을 재활용. 재귀함수 사용시 성능 개선에 도움이 됨

strict 모드
클로저가 아닌 경우
tail call의 결과를 즉시 반환
tail call이후 추가 작업이 없는 경우

"use strict"
function func() {
    return func1(); // optimize됨
}
function func() {
   var ret = func1(); // optimize 안됨 (3)
   return ret;
}
function func() {
    return 1 + func1(); // optimize 안됨(4)
}

tail call optimization

function factorial(n) {
	if(n <= 1 ) {
		return 1;
	} else {
		return n * factorial(n - 1);	// optimize 안됨
	}
}

function factorial(n, p = 1) {
	if(n <= 1 ) {
		return 1 * p;
	} else {
		let result = n * p;
		return factorial(n - 1, result);	// optimize 됨
	}
}

확장된 객체 리터럴 문법

function createPerson(name) {
  return {
    name: name,
    sayName: function() {
      console.log(name);
    }
  }
}

function createPerson(name, age) {
  return {
    name,        // property initializer shorthand
    sayName() {  // concise methods
      console.log(name);
    }
  }
}

Object.is()

아래 예제를 제외하면 === 와 유사함

console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false

console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true

Object.assign()

source objects에서 target oject로 property 복사. mixin 구현에 사용

function mixin(target, source) {
  Object.keys(supplier).forEach(function(key) {
    target[key] = source[key];
  });
  return target;
}

var ret = mixin({}, {prop:'a'});
var ret1 = Object.assign({}, {prop:'a'});

prototype

Object.setPrototypeOf() : prototype 변경
Object.getProtytpyeOf() : prototype 조회
super : 현재 객체의 prototype를 참조하는 포인터로 간결한 메소드(concise methods)에서만 사용할 수 있다. Object.getPrototypeOf(this)와 유사

method(메서드)⁶

[[HomeObject]] property를 가진 함수. super 사용 가능
concise method PropertyName( parameters ) { ... }
generator Method, getter, setter

let friend = { 
  getGreeting() {	// 메서드임 (concise method)
    return super.getGreeting() + " hello"; // 오류 발생 안함
  }, 
  getGreeting1: function() { // 메서드가 아님
    return super.getGreeting() + " hello";  // 오류 발생
  }
}

object destructuring(구조분해)

let node = {
  type : "identifier",
  name : "foo"
}

let { type, name } = node;
console.log(type);  // identifier
console.log(name);  // foo

node.name = "bob";
({ type, name } = node);		// ()로 감싸야 함
console.log(name);  // bob

array descructuring

let colors = ["red", "green", "blue"];

let [ firstColor, secondColor ] = colors

console.log(firstColor);  // red
console.log(secondColor); // greeen

default value, local variable

let node = {
  type : "identifier",
  name : "foo"
}
let { type, name:userName, value = true } = node;
console.log(type);  // identifier
console.log(userName);  // foo
console.log(value);  // true

destruturing - array clone

var colors = ["red", "green", "blue"];
var clonedColor = colors.concat(); // ECMAScript 5

let colors1 = ["red", "green", "blue"];
let [...clonedColor1] = colors1;  // ECMAScript 6
let clonedColor2 = [...colors1];  // ECMAScript 6

destruturing - parameter

function setCookie(name, value, 
                  {secure, path, domain, expries}) {
  console.log(secure);  // true
  console.log(expire);  // 60000
}

setCookie("type", "js", {secure:true, expire:60000});
setCookie("type", "js");  // error 발생

function setCookie1(name, value, 
                   {secure, path, domain, expries} = {}) {
   ...
}
setCookie1("type", "js");  // 정상 동작

심벌

Symbol은 유일하고 변경 불가능한(immutable) 기본값 (primitive value)
객체 속성의 key 값으로 사용 가능
Primitives : Boolean, Null, Undefined, Number, String, Symbol (new in ES2015)

심벌 정의

let firstName = Symbol("frist name");
let person = {};

person[firstName] = "Nicolas";

console.log(person[firstName]); // "Nicolas"
console.log(firstName); // "Symbol(first name)"

심벌 공유

let firstName = Symbol("frist name");
let firstName2 = Symbol("frist name");

let uid = Symbol.for("uid");
let uid2 = Symbol.for("uid");

console.log(firstName === firstName2); // false
console.log(uid === uid2); // true
console.log(Symbol.keyFor(firstName));  // undefined
console.log(Symbol.keyFor(uid));  // "uid"

심벌 프로퍼티 탐색

Object.getOwnPropertySymbols() : 객체가 소유한 프로퍼티 심벌을 반환
Object.keys(), Object.getOwnPropertyNames()는 심벌 프로퍼티 반환하지 않는다.

well-known symbols

JavaScript 내부 언어 동작을 나타내기 위한 built-in Symbol

Iteration symbols
- Symbol.iterator : 이터레이터 반환
Regular expression symbols
- Symbol.match, Symbol.replace, Symbol.search, Symbol.split
Other symbols
- Symbol.hasInstance : instanceof 연산자와 동일한 메서드
- Symbol.isConcatSpreadable, Symbol.unscopables, Symbol.species, Symbol.toPrimitive, Symbol.toStringTag

Set, Map

Set : 중복되지 않는 값의 리스트 Map : 특정 값에 연결된 키의 컬렉션

ES5의 Set과 Map

var set = Object.create(null);
set["5"] = true;
if( set["5"] ) {
	...
}

var map = Object.create(null);
map["5"] = "bar";
var value = map["5"];

/* [문제점] 객체의 프로퍼티는 문자열만 허용되어 
 *  같은 문자열로 평가되는 두개의 키를 사용할 수 없다.
console.log(map[5] === map["5"]); // true.

ES6의 Set

let set = new Set();
set.add(5);
console.log(set.has("5")); // false
set.add("5");
console.log(set.size); // 2
set.add(5);
console.log(set.size); // 2
set.delete(5);
console.log(set.size); // 1

let array = [...set];
let set2 = new Set(array);

let array2 = [...new Set([1,2,2,3])]; // [1,2,3]

ES6의 Map

let map = new Map();
map.set(5, "55");
console.log(map.has("5")); // false
map.set("5", "500");
console.log(map.size); // 2
console.log(map.get(5)); // "55"
map.delete(5);
console.log(map.size); // 1

map.forEach(function(value, key, ownerMap) {
  console.log(key + " " + value); // 5 500 
  console.log(ownerMap === map);  // true
});

Iterator(이터레이터)

이터레이터는 반복을 위해 설계된, 특별한 인터페이스를 가진 객체
next : 아래 2개의 속성들을 가진 object 를 반환하는 arguments 없는 함수
- done (boolean) : 이터레이터가 마지막 반복 작업을 마쳤을 경우 true.
- value : 이터레이터로부터 반환되는 값. done이 true일 경우 생략 가능

var array = [2, 4, 6];
var arrayEntries = array.entries();

console.log(arrayEntries.next());  // {value: [0,2], done: false}
console.log(arrayEntries.next());  // {value: [1,4], done: false}

for-of

for-of문은 반복문이 실행될 때마다 이터러블의 next()를 호출하고 반환된 객체의 value를 변수에 저장

var array = [2, 4, 6];
for(let num of array) {
  console.log(num);
}
// 2
// 4
// 6

for-in vs for-of

for-in : 객체의 열거형 속성들을 모두 적절한 순서에 의해 반복 for-of : 이터러블의 next()를 호출하고 반환된 객체를 전달

var obj = {a:1, b:2, c:3};
for (let prop in obj) {
  console.log(prop + " = " + obj[prop]);
}
for (let prop of obj) {} // 오류 발생. obj is not iterable

var array = [2, 4, 6];
for (let num in array) {
  console.log(num);   // 0, 1, 2
}
for(let num of array) {
  console.log(num);  // 2, 4, 6
}

Generator(제너레이터)

이터레이터를 반환하는 함수로 별표(*)를 사용하여 표현하고 yield를 사용한다. iterator의 next() 메서드가 호출되면, generator 함수가 실행되고 첫 번째 yield expression 을 만날 때까지 진행되고 yield expression 이 가리키는 값이 iterator 로부터 리턴된다. 이후 next() 메서드가 호출되면 진행이 멈췄던 부분에서부터 다시 실행된다.

function *createIterator() {
  yield 1;
  yield 2;
}

let iter = createIterator();
console.log(iter.next()); //{value: 1, done: false}
console.log(iter.next()); //{value: 2, done: false}
console.log(iter.next()); //{value: undefined, done: true}

let array = [... createIterator()];  // [1, 2]

Generator - yield*

실행 도중 yield* expression 을 만나면 다른 generator 함수로 진행이 넘어가게 된다.

function* anotherGenerator(i) {
  yield i + 1;
}
function* generator(i){
  yield i;
  yield* anotherGenerator(i*2);
  yield i + 1;
}

var gen = generator(10);
console.log(gen.next().value); // 10
console.log(gen.next().value); // 21
console.log(gen.next().value); // 11

Generator - next()

next() 메서드를 인자 값과 함께 호출 하게 되면 진행이 멈췄던 부분의 yield 문을 next() 메서드에서 받은 인자로 치환하고 그 부분부터 다시 실행

function* logGenerator() {
  console.log(yield "a");  // 나
  console.log(yield "b");  // 다
}

var gen = logGenerator();
console.log(gen.next('가')); // {value: "a", done: false}
console.log(gen.next('나')); // {value: "b", done: false}
console.log(gen.next('다')); // {value: undefined, done: true}

// {value: "a", done: false}
// 나
// {value: "b", done: false}
// 다
// {value: undefined, done: true}

Generator - 비동기 작업

let task = taskDef();	// iterator 반환
let result = task.next();
step();
function step() {
  if(!result.done) {
    if(typeof result.value === "function") {
      result.value(function(err,data) {
        if(err) {
          result = task.throw(err);
          return;
        }
        result = task.next(data);
        step();
      });
    } else {
      result = task.next(result.value);
      step();
    }
  }
}

ES5 - 클래스

function Person(name) {
  this.name = name;
}

Person.prototype.sayName = function() {
  console.log(this.name);
}

var person = new Person("Nicholas");
person.sayName();  // "Nicholas"

console.log(person instanceof Person);  // true
console.log(person instanceof Object);  // true

ES6 - 클래스

class Person {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

let person = new Person("Nicholas");
person.sayName();  // "Nicholas"

console.log(person instanceof Person);  // true
console.log(person instanceof Object);  // true
console.log(typeof Person);  // "function"
console.log(typeof Person.prototype.sayName);  // "function"

first-class citizen

함수의 파라미터로 사용 가능
함수가 반환 가능
변수에 할당 가능
JavaScript에서는 function, class도 first-class citizen임

function createObject(classDef) {
  return new classDef();
}
let obj = createObject( class {
  sayHi() {
    console.log("Hi!");
  }
});

obj.sayHi(); // "Hi!"

Generator method

class MyClass {
  *createIterator() {
    yield 1;
    yield 2;
  }
}

let instance = new MyClass();
let iterator = instance.createIterator();

iterator.next();  // {value: 2, done: false}
iterator.next();  // {value: 2, done: false}

computed property

let methodName = "sayName";

class Person {
  constructor(name) {
    this.name = name;
  }

  [methodName]() {
    console.log(this.name);
  }
}

let person = new Person("Nicholas");
person.sayName();  // "Nicholas"

static method

class Person {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }  
  static create(name) {
    return new Person(name);
  }
}

let person = Person.create("Nicholas");
person.sayName();  // "Nicholas"

derived class - extends

class Rectangle {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }
  getArea() {
    return this.length * this.width;
  }
}
class Square extends Rectangle {
  constructor(length) {
    super(length, length);
  }
}

var square = new Square(3);
console.log(square.getArea());  // 9
console.log(square instanceof Square); // true
console.log(square instanceof Rectangle); // true

super()

파생클래스 생성자에서만 사용 가능
this 접근하기 전에 반드시 super() 호출해야 한다.

Array.of()

Array 생성자의 동작이 혼란스러워서 새로 추가된 함수

let items = new Array(2);  // [undefined, undefined]
items = new Array("2");    // ["2"]
items = new Array(10, 20); // [10, 20]

items = Array.of(2);       // [2]
console.log(items.length); // 1
console.log(items[0]);     // 2

Array.from()

arguments와 같은 유사 Array를 Array로 변환하는 함수

function func1() {
  var array = Array.from(arguments);
}  

typed array

typed array(타입 배열)은 배열같은 객체이고 원시(raw) 이진 데이터에 액세스하기 위한 메커니즘을 제공. 숫자 타입과 동작하도록 설계됨

Signed 8-bit integer (int8)
Unsigned 8-bit integer (uint8)
Signed 16-bit integer (int16)
Unsigned 16-bit integer (uint16)
Signed 32-bit integer (int32)
Unsigned 32-bit integer (uint32)
32-bit float (float32)
64-bit float (float64)

Typed array views

var buffer = new ArrayBuffer(8);
var int8View = new Int8Array(buffer);
var int16View = new Int16Array(buffer);
var dataView = new DataView(buffer);

console.log(buffer.byteLength + " " + dataView.byteLength); // 8 8
console.log(int8View.length + " " + int16View.length);   // 8 4

for (var i = 0; i < int16View.length; i++) {
  int16View[i] = i * 2;
}

console.log(int8View);  // Int8Array(8) [0, 0, 2, 0, 4, 0, 6, 0]
console.log(int16View); // Int16Array(8) [0, 2, 4, 6]

Typed array archtecture

Typed array과 일반 배열의 유사점

공통 메서드 : copyWith, entries, fill, filter, find, findIndex, forEach, indexOf, join, keys, lastIndexOf, map, reduce, reduceRight, reverse, slice, some, sort, values
동일한 이터레이터 : keys(), entries(), values() 메서드 제공
of(), from() 메서드

Typed array과 일반 배열의 차이점

Typed array는 크기가 고정
이용할 수 없는 메서드 : concat, pop, push, shift, splice, unshift
추가적인 메서드 : set, subarray

let ints = new Int16Array([25,50]);
console.log(ints instanceof Array); // false
console.log(Array.isArray(ints));   // false

Promise 기초

Promise 객체는 비동기 계산을 위해 사용된다. Promise는 아직은 아니지만 나중에 완료될 것으로 기대되는 연산을 표현한다. Promise는 다음 중 하나의상태를 가진다.

대기중(pending): 이행 또는 거부되지 않은 초기 상태
이행됨(fulfilled): 연산이 성공리에 완료되었음을 의미함
거부됨(rejected): 연산이 실패했음을 의미함

Promise 메소드

Promise.all(iterable) : 모든 프로미스가 결정된 때 결정되며 하나의 프로미스라도 거부된 경우 즉시 거부하는 프로미스를 반환
Promise.race(iterable) : 프로미스 중 하나를 결정 또는 거부하자마자 결정 또는 거부하는 프로미스를 반환
Promise.reject(reason) : 거부된 Promise 객체를 반환
Promise.resolve(value) : 결정된 Promise 객체를 반환

Promise prototype 메소드

Promise.prototype.then(onFulfilled, onRejected) : then() 메서드는 Promise를 리턴하고 두개의 콜백 함수를 인수로 받는다.하나는 Promise가 성공(success)했을 때를 위한 콜백 함수이고, 다른 하나는 실패(failure)했을 때를 위한 콜백 함수이다.
Promise.prototype.catch(onRejected) : Promise.prototype.then(undefined, onRejected)와 동일

Promise

var p1 = new Promise(function(resolve, reject) {
  resolve("Success!");
  // 또는
  // reject ("Error!");
});

p1.then(function(value) {
  console.log(value); // "Success!"
}, function(reason) {
  console.log(reason); // "Error!"
});

Proxy

기정의된 기본적인 동작을 변경하는데 사용됨 (예: property lookup, assignment, enumeration, function invocation 등)

var handler = {
  get: function(t, n){ return n in t? t[n] : 37; }
};
var o = {a : 1, b: undefined};
var p = new Proxy(o, handler);

console.log(p.a, p.b, 'c' in p, p.c); // 1, undefined, false, 37
console.log(o.a, o.b, 'c' in o, o.c); // 1, undefined, false, undefined

import, export

import 문은 외부 모듈이나 다른 스크립트 등으로부터 export 된 기능을 가져오는데 사용된다.
export 문은 지정된 파일(또는 모듈)에서 함수 또는 오브젝트, 원시 타입들을 export 하는데 사용된다.

// module "my-module.js"
export function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { foo };

import { cube, foo } from 'my-module.js';
console.log(cube(3)); // 27
console.log(foo);     // 4.555806215962888

[TECH-0001] jekyll를 이용한 기술 블로그 설치

Tue, 13 Feb 2018 14:11:00 +0900

jeykyll은 ‘지킬’이라고 발음합니다. 지킬 박사와 하이드(Dr Jekyll and Mr Hyde)의 지킬과 같은 단어입니다.

Github Page 설정하기

Github Page를 이용하여 USERNAME.github.io 도메인을 정적 페이지로 호스팅(Hosting) 할 수 있다.

Repository 생성

이름은 kimwooglae.github.io 입력
public 선택

Clone Repository

$ git clone https://github.com/username/username.github.io

블로그 프레임워크 선택

Githuyb page를 블로그로 만드는데 Jekyll과 Hexo가 일반적으로 사용된다. Hexo는 JavaScript기반에 기본 테마 디자인이 미려하여 사용하는 사람이 많지만 Git으로 블로그 포스트 버전관리가 어렵다는 치명적인 단점이 있어서 Jekyll을 선택하였다.

Jekyll은 가장 많은 사용자를 보유하고 있으며 Github Page에서 직접 지원하고 있어서 설정이 쉽다는 장점이 있다. 단점으로는 Ruby기반으로 속도가 느리고 오류가 발생하는 경우 Ruby를 알아야 할 수 있다.

jekyll 사이트에 다음과 같이 설명하고 있다.

Jekyll 은 아주 심플하고 블로그 지향적인 정적 사이트 생성기입니다. Jekyll 은 다양한 포맷의 원본 텍스트 파일을 템플릿 디렉토리로부터 읽어서, (Markdown 등의) 변환기와 Liquid 렌더러를 통해 가공하여, 당신이 즐겨 사용하는 웹 서버에 곧바로 게시할 수 있는, 완성된 정적 웹사이트를 만들어냅니다. 그리고 Jekyll 은 GitHub Pages 의 내부 엔진이기도 합니다. 다시 말해, Jekyll 을 사용하면 자신의 프로젝트 페이지나 블로그, 웹사이트를 무료로 GitHub 에 호스팅 할 수 있다는 뜻입니다.

블로그 구성

먼저 github 기본 테마 중 slate를 선택하여 download 하고 Apache2 라이선스로 공개되어 있는 kakao 기술 블로그 소스를 참고하여 구성했다.

title: 블로그
email: kimwooglae@gmail.com
description: |
  웹을 넘어 새로운 비즈니스 가치의 창출
baseurl: ''
url: 'https://kimwooglae.github.io'
timezone: Asia/Seoul

repository: kimwooglae/kimwooglae.github.io

permalink: /:year/:month/:day/:title/

excerpt_separator: <!--more-->

markdown: kramdown

krandown:
  input: GFM
  highlighter: rouge

plugins:
  - jekyll-paginate

paginate: 5
paginate_path: '/page/:num/'

collections:
  authors:
    output: true
    permalink: /authors/:path/
  tags:
    output: true
    permalink: /tags/:path/

defaults:
  - scope:
      path: ''
      type: authors
    values:
      layout: author
  - scope:
      path: ''
      type: tags
    values:
      layout: tag

exclude: [README.md, Gemfile, Gemfile.lock]

keep_files: [assets, files]
github: [metadata]

author: kimwooglae@gmail.com
image: '/assets/images/default_blog_cover.png'
asset_url: /assets
google_analytics:
  ua: 'UA-4543834-2'
github_url:
  username: kimwooglae

폴더 및 파일 구성

폴더

_layout : 화면 layout을 구성하는데 사용되는 template 파일 저장 폴더. markdown 파일에 layout을 지정하면 _layout 폴더를 검색하여 일치하는 파일로 화면을 생성한다.
```
  ---
  layout: post
  title: 'jekyll를 이용한 기술 블로그 설치'
  author: kimwooglae
  date: 2018-02-13 14:11
  tags: [jekyll]
  ---
```
_includes : layout 파일에서 참조하는 파일이 저장된 폴더. header, footer 등을 구성하는데 사용된다.
_plugin : 사용자 정의 플러그인 폴더
assets : css, image, js 등 정적 리소스 저장 폴더
files : blog를 작성하면서 필요한 파일 저장 폴더

_authors : 작성자 정보 저장 폴더

  ---
  name: kimwooglae
  title: 김욱래
  image: /files/authors/kimwooglae.jpg
  ---

_tags : tag 정보 저장 폴더

  ---
  name: kimwooglae
  title: 김욱래
  image: /files/authors/kimwooglae.jpg
  ---

_posts : 블로그 글 저장 폴더. 블로그 글은 yyyy-mm-dd-slug.md 파일로 저장.
- slug: 해당 포스트의 고유 키로 url의 일부로 사용. 특수문자없이 영문자,숫자,-(하이픈),.(점)…만 사용.
- 최종적으로 포스트의 url(permalink)는 https://kimwooglae.github.io/yyyy/mm/dd/slug/
- 이 블로그 글의 URL은 https://kimwooglae.github.io/2018/02/13/setup/
_site : jekyll이 생성한 파일이 저장되는 폴더로 수정하면 안됨

파일

_config.yml : jekyll 환경 설정 파일
Gemfile : ruby 구성 파일
README.md : 글 작성 방법 등 설명
about.md, authors.md, tags.md : about, authors, tags 페이지
index.html : 초기 페이지
sitemap.xml, sitemap.xsl : sitemap 생성 모듈 (크롤러를 위한 사이트 맵 생성 페이지)
rss.xml : rss 생성 파일
search2.json : 블로그 검색을 위한 파일

설치가 완료된 후 폴더 구성은 아래와 같다.

drwxr-xr-x  10 wlkim  staff    320  2 13 16:40 _includes
drwxr-xr-x@  8 wlkim  staff    256  2 13 17:02 _layouts
drwxr-xr-x   3 wlkim  staff     96  2 13 14:14 _plugins
drwxr-xr-x  19 wlkim  staff    608  2 13 17:45 _site
drwxr-xr-x   3 wlkim  staff     96  2 13 17:02 _authors
drwxr-xr-x   4 wlkim  staff    128  2 14 09:08 _posts
drwxr-xr-x   3 wlkim  staff     96  2 13 14:15 _tags
drwxr-xr-x@  8 wlkim  staff    256  2 13 16:50 assets
drwxr-xr-x   4 wlkim  staff    128  2 13 17:03 files
-rw-r--r--   1 wlkim  staff   1105  2 13 17:58 _config.yml
-rw-r--r--@  1 wlkim  staff     73  2 13 13:41 Gemfile
-rw-r--r--   1 wlkim  staff   6488  2 13 13:39 Gemfile.lock
-rw-r--r--   1 wlkim  staff  11358  2 13 11:47 LICENSE.txt
-rw-r--r--   1 wlkim  staff    148  2 13 16:10 404.html
-rw-r--r--   1 wlkim  staff     16  2 14 09:06 CNAME
-rw-r--r--   1 wlkim  staff   5464  2 13 11:51 README.md
-rw-r--r--   1 wlkim  staff    262  2 13 11:47 about.md
-rw-r--r--   1 wlkim  staff    196  2 13 11:47 authors.md
-rw-r--r--@  1 wlkim  staff    164  2 13 11:47 index.html
-rw-r--r--   1 wlkim  staff   1259  2 13 11:47 rss.xml
-rw-r--r--   1 wlkim  staff    821  2 13 11:47 search2.json
-rw-r--r--   1 wlkim  staff   1462  2 13 11:47 sitemap.xml
-rw-r--r--   1 wlkim  staff   3673  2 13 11:47 sitemap.xsl
-rw-r--r--   1 wlkim  staff    175  2 13 11:47 tags.md

로컬 Preview 작업 환경 구성 ==============

Gemfile 파일 수정

source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins

bundler 파일 설치

$ sudo gem install bundler

Jekyll 설치 (go lang이 설치된 경우 go에서 설치한 bundle이 path에 등록되어 있을 수 있으므로 full path로 실행한다.)

$ cd kimwooglae.github.io
$ /usr/local/bin/bundle install
Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using concurrent-ruby 1.0.5
Using i18n 0.9.4
Fetching minitest 5.11.3
Installing minitest 5.11.3

... 생략 ...

Using terminal-table 1.8.0
Fetching github-pages 177
Installing github-pages 177
Bundle complete! 1 Gemfile dependency, 81 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Post-install message from html-pipeline:
-------------------------------------------------
Thank you for installing html-pipeline!
You must bundle Filter gem dependencies.
See html-pipeline README.md for more details.
https://github.com/jch/html-pipeline#dependencies
-------------------------------------------------

실행

$ /usr/local/bin/bundle exec jekyll serve
Configuration file: /Users/user/Documents/GIT/kimwooglae.github.io/_config.yml
            Source: /Users/user/Documents/GIT/kimwooglae.github.io
       Destination: /Users/user/Documents/GIT/kimwooglae.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 0.188 seconds.
 Auto-regeneration: enabled for '/Users/user/Documents/GIT/kimwooglae.github.io'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

접속 주소

로컬 : http://127.0.0.1:4000/
서버 : https://kimwooglae.github.io

글 작성 방법

상세한 내용은 링크 참고

새 글 작성

_drafts 디렉토리에 적당한이름.md 이름으로 파일을 만들고
포스트를 마크다운으로 작성
- [gfm] 문법, [kramdown] 파서, [rouge] 문법강조기 사용
확인
```
$ bundle exec jekyll serve --drafts
```

글 쓰기

_posts 디렉토리에 yyyy-mm-dd-slug.md 파일로 복사(or 이동).
- slug: 해당 포스트의 고유 키로 url의 일부로 사용. 왠만하면 특수문자없이 영문자,숫자,-(하이픈),.(점)…만 사용.
- yyyy,mm,dd: 발행 년,월,일.
- 참고: 최종적으로 포스트의 url(permalink)는 https://kimwooglae.github.io/yyyy/mm/dd/slug/
파일 상단에 [front matter] 작성
- layout: post # 레이아웃(필수). page 레이아웃을 사용하면 목록에 보이지 않는 글을 쓸 수 있음.
- title: ‘제목’ # 제목(필수)
- author: lastname.firstname # 필자(필수). 왠만하면 회사 아이디(예: iolo.fitzowen) 사용
- tags: [tag1,tag2,tag3,...] # 태그 목록(선택). 왠만하면 특수문자없이 영소문자,숫자,-(하이픈),.(점)…만 사용.
- image: http://… # 커버이미지 url(선택)
- date: YYYY-MM-DD HH:MM:SS # 발행일(필수)
처음 글을 쓰는 필자이라면 글쓴이 등록(필수)
유력한(?) 태그가 새로 등장했다면 태그 등록(선택)

필자 등록

_authors 디렉토리에 lastname.firstname.md 이름으로 필자 정보 파일 추가
- 참고: 최종적으로 사용자 포스트 목록 페이지의 url은 https://kimwooglae.github.io/authors/lastname.firstname/
파일 상단에 [front matter] 작성
- layout: author # 레이아웃(필수)
- name: lastname.firstname # post의 author와 매칭(필수). 왠만하면 회사 아이디(예: iolo.fitzowen) 사용. 왠만하면 특수문자없이 영소문자,숫자,-(하이픈),.(점)…만 사용.
- title: … # 왠만하면 한글이름 사용( 필수)
- image: http://… # 프로필 이미지(필수)
- cover: http://… # 작성자 커버 이미지(선택)
내용은 필요없음

태그 등록

_tags 디렉토리에 tag-name.md 이름으로 필자 정보 파일 추가
- 참고: 최종적으로 사용자 포스트 목록 페이지의 url은 https://kimwooglae.github.io/tags/tag-name/
파일 상단에 [front matter] 작성
- layout: tag # 레이아웃(필수)
- name: tag-name # post의 tags 배열의 항목과 매칭(필수). 왠만하면 특수문자없이 영소문자,숫자,-(하이픈),.(점)…만 사용.
- title: … # 좀 더 길고 구체적인 설명(필수)
- image: http://… # 태그 이미지(선택)
내용은 필요없음

마크다운

텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌음

헤더

큰제목: 문서 제목

This is an H1
=============

This is an H1

작은제목: 문서 부제목

This is an H2
-------------

This is an H2

글머리: 1~6까지만 지원

# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

This is a H1

This is a H2

This is a H3

This is a H4

This is a H5

This is a H6

BlockQuote

이메일에서 사용하는 > 블럭인용문자를 이용한다.

> This is a blockqute.

This is a blockqute.

이 안에서는 다른 마크다운 요소를 포함할 수 있다.

> ### This is a H3
> * List
>	```
>	code
>	```

This is a H3
List
  code

순서있는 목록은 숫자와 점을 사용

첫번째
두번째
세번째

첫번째
두번째
세번째

순서없는 목록(글머리 기호)

* 빨강
  * 녹색
    * 파랑

+ 빨강
  + 녹색
    + 파랑

- 빨강
- 녹색
- 파랑

빨강
- 녹색
  - 파랑
빨강
- 녹색
  - 파랑
빨강
녹색
파랑

혼합해서 사용하는 것도 가능

코드

4개의 공백 또는 하나의 탭으로 들여쓰기를 만나면 변환되기 시작하여 들여쓰지 않은 행을 만날때까지 변환이 계속된다.<pre><code> ~~~ </code></pre>와 동일

This is a normal paragraph:

    This is a code block.
end code block.

This is a normal paragraph:

This is a code block. end code block.

backtick을 이용해서 코드 블럭을 표시할 수 있다.

```
This is a code block.
```

This is a code block.

수평선

아래 줄은 모두 수평선(<hr/>)을 만든다. 마크다운 문서를 미리보기로 출력할 때 페이지 나누기 용도로 많이 사용한다.

* * *
***
*****
- - -
---------------------------------------

링크

링크

syntax: [Title](link)

syntax: Title

자동연결

<http://example.com/>
<address@example.com>

http://example.com/ address@example.com

강조

*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
~~cancelline~~

single asterisks
single underscores
double asterisks
double underscores
~~cancelline~~

테이블

| foo | bar |
| --- | --- |
| baz | bim |

foo	bar
baz	bim

이미지

![Alt text](/path/to/img.jpg)
![Alt text](/path/to/img.jpg "Optional title")

사이즈 조절 기능은 없기 때문에 <img width="" height=""></img>를 이용한다.

참고 링크

[BOOK-0006] 기계학습의 끝판왕, 마스터 알고리즘

Sun, 15 Oct 2017 23:25:00 +0900

마스터알고리즘 by 페드로 도밍고스

전통적으로 컴퓨터에게 일을 시키기 위해서는 세세한 사항까지 공들여 설명하는 알고리즘을 작성하는 방법 즉 코딩을 해야 했다. 하지만 머신러딩 알고리즘은 이와 다르게 스스로 데이터를 이용해 추론하며 일을 해낸다. 머신러닝 분야에서 경쟁하는 다섯 종족은 기호주의자, 연결주의자, 진화주의자, 베이즈주의자, 유추주의자인데 서로 다른 최적화 기법과 평가방법으로 기계를 학습시킬 수 있다고 주장한다.

기호주의자(symbolists)는 학습을 연역의 역순으로 보며 철학과 심리학, 논리학에서 아이디어를 얻는데, 이들은 역연역법(inverse deduction)을 중요하게 생각한다. 연결주의자(connectionists)는 두뇌를 분석하고 모방하며 신경과학과 물리학에서 영감을 얻는데, 이들의 핵심 알고리즘은 역전파(backpropagation)이다. 진화주의자(evolutionaries)는 컴퓨터에서 진화를 모의시험하며 유전학과 진화생물학에 의존하고 유전자 프로그래밍(genetic programming)을 핵심이라고 주장한다. 베이즈주의자(Bayesians)는 학습이 확률 추론의 한 형태라고 믿으며 통계학에 뿌리를 두고 있는데, 이들의 마스터 알고리즘은 베이즈 추정(Bayesian inference)이다. 유추주의자(analogizers)는 유사성 판단을 근거로 추정하면서 배우며 심리학과 수학적 최적화의 영향을 받고 있는데 이들은 서포트 벡터 머신(support vector machine)을 최고로 친다.

페드로 도밍고스는 다섯 종족의 간략한 역사와 그들의 주장을 별다른 수식 없이 설명하려고 노력하였고 일정 부분 성공을 거두었다. 특히 한국에서는 알파고의 충격 이후 텐서플로를 이용한 딥러닝이 대세가 되면서 많은 사람이 텐서플로가 딥러닝이고 이것이 기계학습이며 인공지능이라고 생각하고 있다. 이러한 사람들에게 기계학습을 하는데 서로 다른 방법론과 알고리즘이 있다는 것을 알려주는 개론서 역할을 충실히 하고 있다. 마지막 장에서 머신러닝에 대한 여러 가지 예측을 하는데 컴퓨터가 하는 일을 계속 지켜보는 일종의 AI auditor가 필요해 질 것이라는 견해에 크게 공감했다. 다만, 마스터 알고리즘에 관한 주장의 세밀한 부분을 판단하기는 어렵지만 섣부른 측면이 있다고 생각된다.

쉽지 않은 책이었지만 머신러닝을 조망하는 시야를 얻을 수 있었다.

[BOOK-0005] 전기 자동차와 전력 그리드

Mon, 09 Oct 2017 11:56:00 +0900

나는 운전을 싫어한다. 막힌 도로에서 운전하고 있으면 인간이 할 수 있는 가장 무용한 일을 하는 것 같다. 연휴에 가족 여행을 하면서 1000km 이상 운전하다 보니 이런 생각이 더욱 절실해졌다. 이렇듯 나는 테슬라 모델3을 예약한 A-EV 예찬론자이다. 그러다 보니 Tom Price의 The Last Auto Mechanic의 주요 논거에 동의하고 Bob o’donnell의 글에는 동의하지 않는다.

Bob o’donnell의 부정적인 견해 중 몇 가지를 검토해봤다.

먼저 법적인 규제, 보험, 사람들의 소비 형태 및 관습에 대한 부분은 변화가 어려울 수 있지만, 조건만 갖춰지면 급격한 변화가 가능한 부분이므로 이러한 사항이 자율주행전기 자동차의 보급을 막는 첫 번째 요인이라고 하는 것은 모순이 있다. 기술 측면에서도 새로운 4G와 같은 새로운 통신기술을 지원하는 기지국이 약 1~2년 사이에 전국에 설치된 사례로 볼 때 경제적인 인센티브가 있다면 새로운 통신 기술이 적용되는 것이 문제가 될 것 같지는 않다.

전력 그리드에 대한 충격 측면을 고려하기 위해서 우리나라의 발전용량, 자동차 등록대수 및 평균 주행 거리 등 통계 자료와 Tesla Model S의 km당 사용 에너지를 참고하여 전기 자동차 사용 비율에 따른 총 전력 사용량을 계산했을 때 모든 승용차가 전기차로 바뀌었을 때 약 6%의 총발전량을 사용하는 것을 확인할 수 있었다. 즉 전력 수요 과다 시점만 적절히 제어된다면 현재 구성된 전력 그리드로도 전기 자동차 사용하는데 부족하지 않다고 할 수 있다.

테슬라 모델3가 빨리 배달되기를 기대한다.

«전력 그리드 사용량 산정에 사용된 주요 데이터»

총 발전용량 : 114,206MW
총 발전량(GWh/day) : 1,577 GWh
승용차(만대) : 1730
평균 주행 거리(km/day) : 27
전기차 에너지 효율(Wh/km) : 200

«관련 링크»

2017년 8월 전력통계속보 (제466호) : http://home.kepco.co.kr/kepco/cmmn/fms/FileDown.do?atchFileId=FILE_000000021199402&fileSn=0
자동차 등록 현황 : http://www.index.go.kr/potal/stts/idxMain/selectPoSttsIdxSearch.do?idx_cd=1257&stts_cd=125702&freq=Y
교통수단이용실태조사연구 : https://www.ktdb.go.kr/common/pdf/web/viewer.html?file=/site/www/dowonload/car/2014_survey01.pdf
Tesla Supercharger : https://en.wikipedia.org/wiki/Tesla_Supercharger
Model S Efficiency and Range : https://www.tesla.com/blog/model-s-efficiency-and-range
Tesla Model S : https://en.wikipedia.org/wiki/Tesla_Model_S
The Last Auto Mechanic : https://medium.com/@tomprice_22461/the-last-auto-mechanic-841adec75498
We need to stop pretending that the autonomous car is imminent : https://www.recode.net/2017/9/5/16257314/stop-autonomous-self-driving-cars-not-coming-soon-future
Are Teslas damaged goods? : https://digitopoly.org/2017/09/11/are-teslas-damaged-goods/

[BOOK-0004] 가속의 시대에 대한 새로운 통찰

Sun, 08 Oct 2017 11:51:00 +0900

늦어서 고마워 by 토머스 프리드먼

바쁜 일상에서 약속이나 회의가 늦어지게 되면 갑자기 주어진 시간에 감사하며 밀린 일을 하거나 잠시 여유를 가졌던 경험은 한 번씩 있었을 것이다. 가속의 시대에는 바로 그 멈춤의 시간에 대한 중요성이 더욱 커지고 있다. 가속의 시대는 무어 법칙의 지배를 받는 기술들인 반도체 칩, 센서, 빅데이터, 소프트웨어, 네트워크, 클라우드로부터 시작되었지만 폭발하는 세계화로 설명되는 대시장과 급변하는 기후변화로 표현되는 대자연으로 더욱 큰 힘을 받고 있다. 이러한 가속의 시대에 닻을 내린 것처럼 더 안정감 있고, 강한 회복 탄력성과 추진력을 지니려면 어떻게 해야 할까?

먼저 읽기, 쓰기, 컴퓨터 코드 작성과 수학의 탄탄한 기초, 창의력과 비판적 사고, 소통, 협력, 용기, 자발적 동기 부여, 평생학습 습관, 기업가 정신과 상황 대처 능력 등 가속화 시대에 필요한 기량과 자질을 극대화할 수 있도록 교육 시스템을 개편해야 한다. 혼란의 세계가 확산하면서 나타난 파괴자들은 그 지역에 있는 공동체만이 무너뜨릴 수 있다. 혼란의 세계를 안정시키는 데 도움이 되는 닭과 텃밭과 학교에 투자하고 인간답게 살 수 있는 지역 공동체를 발견하면 그것을 주변으로 확장하도록 노력해야 한다. 또한, 우리는 대자연이라는 멘토로부터 변화하는 환경에서 복원력을 만들어내는 데에는 다양성을 포용하는 것이 그 어느 것보다 중요하고 폭풍의 시대에 번영할 수 있는 유일한 길은 건강한 공동체와 같은 태풍의 눈을 찾아내는 것이라는 교훈을 얻을 수 있다. 그리고 더 많은 사람이 황금률(다른 사람들이 너에게 해주길 바라는 것을 그들에게 해주라)을 실천하도록 하는 길을 찾아야 한다.

“늦어서 고마워.”에서 얻을 수 있는 가장 큰 통찰은 무어의 법칙만이 가속의 시대의 원인이 아니라는 점이었다. 세계화로 인한 대시장과 기후변화로 대변되는 대자연 또한 가속의 시대를 가져온 중요한 요인이고 이를 대처하는 방안도 무어의 법칙으로 인한 가속의 시대에 대한 대처방안과는 다른 수 있다는 것을 다시 확인할 수 있었다. 무어의 법칙에 의한 체스판 후반부를 헤쳐나가는 기술은 STEM(과학, 기술, 공학, 수학)으로 요약될 수 있는데 대시장과 대자연으로 인한 가속을 대처하기 위해서는 다양성 존중, 건강한 공동체 발견 및 확장 같은 결이 다른 해결 방안도 같이 준비되어야만 한다.

언제나 높은 열정지수(PQ)와 호기심지수(CQ)가 높은 지능지수(IQ)보다 중요하다. 항상 PQ + CQ > IQ 부등식을 기억하라.

[BOOK-0003] 커다란 힘에는 커다란 책임이 따른다

Mon, 18 Sep 2017 12:45:00 +0900

로봇 시대, 인간의 일 : 인공지능 시대를 살아가야 할 이들을 위한 안내서

“커다란 힘에는 커다란 책임이 따른다.”라는 볼테르의 경구는 영화 스파이더맨을 통해서 더욱 유명해졌다. 로봇과 인공지능의 시대를 살아가는 개인들에게 이보다 더 적절한 경고는 없는 것 같다. 저자가 이 책에서 제시하고 있는 10가지 질문에 답변을 정리해 보려고 한다.

알고리즘 윤리학 : 무인자동차의 등장, 사람이 운전하는 차가 더 위험하다? 인간이 운전하는 자동차와 얼마 동안 공존할 것인지 딜레마 상황에서 어떤 선택을 해야 할지 등 해결해야 할 과제가 아직 많이 있지만, 자율주행이 인간에게 가져다주는 편익이 거대하기 때문에 결국에는 머신러닝 알고리즘과 각종 센서의 발달에 따라 무인자동차가 퍼질 것이다. 딜레마 상황에 따른 선택이 문화권 및 국가에 따라 다를 수 있으므로 개별 국가의 규제에 따라 다른 형태의 알고리즘이 적용될 수 있다고 생각된다.
언어의 문화사 : 자동 번역 시대, 외국어를 배울 필요가 있을까? 자동 번역의 품질이 향상된다고 하더라도 번역된 내용을 인간이 이해하는데 걸리는 시간과 원문을 이해하는 사람이 이해하는데 걸리는 시간 및 깊이의 미세한 차이가 개인 차원에서는 결정적인 차이를 만들 수 있다고 생각한다. 따라서 외국어 학습은 상당 기간 여전히 중요할 것 같다. 하지만 각종 통역, 번역 관련 직업이 현재의 지위를 유지할 수 없을 것 같다.
지식의 사회학 : 지식이 공유되는 사회, 대학에 가지 않아도 될까? 코세라, 칸 아카데미와 같은 MOOC가 널리 퍼질수록, 별도의 장소에서 제한된 인원만이 교육을 받은 기존 방식의 교육이 가지는 가치가 역설적으로 커질 것으로 예상한다. 온라인 교육이 지역별 격차를 해소하는 데 일부 도움을 줄 수 있겠지만, 온라인 교육을 찾아서 수강하고 끝까지 완료할 수 있는 학습 동기가 강하고 학습 능력이 뛰어난 학생은 이미 다양한 방식으로 자신의 역량을 계발할 수 있는 엘리트이므로 계층 간 격차는 오히려 강화될 것으로 예상한다.
일자리의 경제학 : 제2의 기계시대, 내 직업은 10년 뒤에도 살아남을 수 있을까 사라질 직업에 대한 전망은 일치하지만, 미래의 유망직업에 대해서는 의견이 일치하지 않는다. 기계로 대체되는 직업이 늘어날 것으로 예상되어 기본 소득과 같은 대안을 국가에서는 찾아야 한다. 개인 차원에서는 평생직장이라는 개념을 버리고 최신 기술에 대한 적극적인 수용, 지속적인 학습과 재교육 등을 통해서 일자리 경쟁에서 유리해지도록 노력해야 한다.
여가의 인문학 : 노동은 로봇이, 우리에겐 저녁 있는 삶이 열릴까 현대 사회에서 바쁘다는 것은 높은 사회적 지위를 드러내는 것을 뜻하기도 한다. 미래에 인공지능 실업과 여가의 구분이 모호하지만, 시간은 많이 생길 것 같다. 이러한 시대를 향한 첫걸음으로 자신이 무엇을 원하는지 꼼꼼하게 생각해보는 것이 필요하다.
관계의 심리학 : 감정을 지닌 휴머노이드, 로봇과의 연애 시대가 온다? 애착 감정은 내가 얼마나 그 대상에 주의와 감정을 기울였느냐에 달려 있다. 따라서 편리함과 안전함을 제공하면서 감정적인 피드백을 제공하는 로봇에 대해 애착감이 깊어질 수 있다.
인공지능 과학 : 인공지능의 특이점, 로봇은 과연 인간을 위협하게 될까? 생물학적 진화속도보다 과학기술의 진보가 더 빠르기 때문에 인공지능이 인간의 자리를 대체하게 될 것으로 예상하는 과학자도 있다. 이러한 인공지능을 우리가 통제할 수 있도록 노력해야 할 것이고 기계가 모방할 수 없는 인간의 특징을 찾아 인간의 가치를 높이는 노력도 필요하다.
호기심의 인류학 : 생각하는 기계에 대해 인간이 경쟁력을 갖추려면 기계가 모방하기 가장 어려운 인간의 지적 기능은 질문하는 능력으로 여겨진다. 예측 불가능의 복잡한 상황에서 가장 유용한 도구는 유연함이고 이는 호기심으로 나타난다.
망각의 철학 : 망각 없는 세상, 우리가 기억해야 할 것은 무엇인가 망각은 추상화와 일반화를 가능하게 해서 창의력과 통찰력을 발휘하게 하는 전략적 선택이다. 똑똑한 기계가 최후까지 모방하기 어려운 판단 행위이자 사고 행위로 결함투성이의 기억과 사고가 인간의 특성이자 장점이다. 우리의 사고와 판단은 내재된 기억을 통해서 가능하다.
디지털 문법 : 우리가 로봇의 언어를 배워야 하는가 “프로그램하라, 그렇지 않으면 프로그램 당한다.”는 더글러스 러시코프의 주장처럼 디지털 기술에 담긴 알고리즘이 우리에게 어떤 영향을 끼치는가를 파악할 수 있는 ‘코드 리터러시’가 필수 능력 중 하나이다.

로봇 시대에 우리가 가져야 할 가장 중요한 덕목은 아래와 같다.

첫째, 인공지능을 포함한 과학기술의 진보속도가 개별 생물의 진화 속도보다 빠르기 때문에 결국에는 따라 잡힐 수 있다는 점을 항상 염두에 두어야 한다.

둘째, 예측이 어려운 상황에서 유연함과 호기심이 가장 유용한 도구로 활용될 수 있다. 또한, 기계가 모방하기 어려운 지적인 능력 중 하나인 질문하는 능력도 호기심으로부터 키울 수 있다.

셋째, 내재된 기억이 있어야만 스스로 사고와 판단을 할 수 있다. 스마트 기기는 기억을 돕는 보조 도구라는 사실을 잊지 말아야 한다.

넷째, 디지털 기술에 블랙박스처럼 담겨 있는 알고리즘을 파악할 수 있는 ‘코드 리터러시’를 키우는 데 노력을 기울여야 한다. 프로그램을 개발하는 ‘코딩’능력도 그 중요성이 커지겠지만 ‘코드 리터러시’ 더욱 중요하다.

[BOOK-0002] 정보화 시대의 독과점과 디지털 격차

Thu, 07 Sep 2017 13:30:00 +0900

기사 요약

한 세기 전에는 원유가 가장 가치 있는 천연자원이었다. 하지만 데이터가 디지털 시대의 원유 자리를 차지하고 있다. 이러한 데이터를 다루는 거대 기업 - 알파벳, 아마존, 애플, 페이스북, 마이크로소프트 - 에 대한 우려가 점차 커지고 있다. 20세기 초의 스탠다드 오일 처럼 여러 개의 회사로 나눠야 하다는 주장도 있다. 하지만 기업의 규모가 크다는 것이 잘못은 아니다. 또한, 이러한 거대 기업의 성공이 고객에게 이득이 된 측면도 많이 있고 새로운 경쟁자가 계속 나타나는 등 기존 독과점 기업과는 다르다고 볼 수 있다.

하지만 데이터에 대한 통제권은 기업에 막대한 힘을 준다. 20세기 초에 고안된 독과점에 대한 관점으로 “데이터 경제”를 통제하는 것은 시대착오적이다. 새로운 접근이 필요한 시점이다.

스마트폰과 인터넷은 대량의 가치 있는 데이터를 생성한다. 점점 더 많은 기기가 연결될수록 더 많은 데이터가 생성되게 된다. 일례로 자율 주행 자동차의 경우 1초에 100GB의 데이터를 생성한다고 한다. 머신러닝과 같은 인공지능 기술은 이러한 데이터로부터 새로운 가치를 추출한다. 이러한 알고리즘은 고객의 구매 예측부터 제트 엔진의 유지보수 필요성 분석까지 다양한 정보를 제공한다. 이에 따라 GE나 Siemens는 자신을 스스로 데이터 기업이라고 부르고 있다. 이러한 대량 데이터는 경쟁의 본질을 바꾸고 있다. 거대 기술 기업은 항상 네트워크 효과로부터 이익을 얻는다. 더 많은 사용자가 페이스북을 사용할수록 페이스북은 더 높은 품질의 서비스를 제공할 수 있고 더 높은 품질의 서비스는 더 많은 사용자를 끌어모으게 된다.

경쟁 기업의 탄생을 막는 수단으로 데이터에 대한 접근이 이용되기도 한다. 거대 기업은 앱스토어와 운영체제를 보유하고 있으며 클라우드 서비스를 스타트업에 제공한다. 그들은 그들이 소유한 앱스토어와 그 밖의 것을 이용하여 어떤 제품이나 서비스가 인기를 끌고 있는지 파악하고 경쟁 서비스를 제공하거나 회사를 인수해 버린다. 진입장벽이며 조기 경보시스템으로 기능하는 데이터는 경쟁을 제약한다.

데이터의 본성은 기존의 반독점 해결책을 쓸모없게 만든다. 구글을 다섯 개의 작은 회사로 나누더라도 네트워크 효과 때문에 그중 한 회사가 다시 우세한 위치를 점하게 될 것이다. 더욱 급진적인 사고가 필요하다. 첫째, 반독점 규제 기관은 21세기에 걸맞은 방식으로 독점을 관리하여야 한다. 둘째, 데이터 제공자가 온라인 서비스 제공자보다 더 많은 통제권을 가질 수 있도록 해야 한다.

정보화 시대에 맞도록 독과점 규제를 새로 디자인하기는 쉽지 않은 일이다. 소수의 거대 기술 기업에 의해서 데이터 경제가 지배되는 것을 원하지 않으면 행동해야 한다.

정보화 시대의 독과점과 디지털 격차

디지털 격차는 정보 기술 및 기기에 대한 접근, 이용 능력, 활용 수준의 차이로 인해서 경제 사회적 불균형이 발생하는 현상이다. 디지털 격차는 주로 경제적, 지역적, 신체적 또는 사회적 기회 불균등으로 인해 발생하고 있고 이러한 기회 불균등을 해결하기 위해서 일반적으로 여러 가지 제도적인 지원 정책이 시행되고 있다.

하지만 거대 기술 기업의 독점적 지배력이 디지털 격차에 어떤 영향을 줄지 고민이 필요한 시점이다. 기업은 일반적으로 이익을 최대화하는 방향으로 사업을 전개하는데 그 과정에서 기업의 이익 증가와 관련 있는 집단에 최적화된 서비스를 제공할 수 있다. 일부 기업이 정보화 시대를 지배하게 된다면 이러한 기업의 이익 추구가 특정 집단의 디지털 격차 증가에 악영향을 줄 수 있으므로 기존의 독과점 폐해와 다른 디지털 격차 측면에서 독과점 기업의 영향도를 검토하고 규제할 필요가 있다. 물론 페이스북이나 구글은 다양한 디지털 격차 해소 기술을 개발하고 있지만, 독점적 지위가 더욱 강화된 이후의 행동을 지금 예측하는 것은 불가능하다.

소수의 거대 기술 기업에 의해서 데이터 경제가 지배되는 것을 원하지 않으면 지금 행동해야 한다.

링크

[BOOK-0001] 좋은 분석, 실망스러운 결론

Wed, 06 Sep 2017 00:46:00 +0900

기계와의 경쟁 : 진화하는 기술 사라지는 일자리 인간의 미래는?

요약

고용 없는 성장은 한국에서도 커다란 논쟁거리가 되고 있다. 미국의 경우 2007년에 시작된 금융위기로 1200만 명이 일자리를 잃었지만, 경기가 회복되었다고 하는 2011년에도 인구 증가분에도 미치지 못하는 11만 7000개의 새로운 일자리만 늘어나는 유사한 문제를 겪고 있다. 분석가들은 이러한 실업 문제는 크게 세 가지 이론으로 설명한다. 순환성, 침체, 그리고 노동의 종말이다.

이 책의 저자는 세 번째 시각인 노동의 종말 이론을 지지하는데, 노동의 종말 이론에 따르면 기술 진보가 너무 많이 진행되어 제품과 서비스를 생산하는 데 있어서 점점 더 적은 수의 노동자가 필요하게 되었다고 한다. 그리고 이런 중대한 변화의 중심에는 컴퓨터가 있다고 주장한다.

최근 급격한 발전을 이룬 인공지능 특히 딥러닝과 같은 기술 진보를 이해하기 위해서는 무어의 법칙의 개념을 이해해야 한다. 무어의 법칙은 반도체와 집적회로를 포함한 디지털 기술은 18개월마다 두 배씩 늘어난다는 주장이다. 이러한 기하급수적인 발전은 과거에 불가능하게 여겨졌던 여러 가지 일들을 가능하게 만들었다. 1958년을 무어의 법칙의 시작점으로 본다면 2006년에는 두 배씩 32번 증가해서 체스판의 후반부에 와 있다고 볼 수 있다.

체스판 후반부에서 기술이 계속해서 발달하고 오직 사람만이 할 수 있었던 일을 기계가 위협하기 시작하면, 어느 순간부터는 점점 더 많은 일이 기계의 몫으로 넘어갈 것이다. 이 위협을 이해하기 위해서는 3가지 승자 집단과 패자 집단을 구분할 수 있어야 한다. 첫째, 고숙련 노동자(higher skilled labor) 대 저숙련 노동자(lower-skilled labor). 둘째, 슈퍼스타 대 일반인. 셋째, 자본 대 노동. 기술이 다양한 그룹 간 소득의 균형을 갑작스럽게 바꿔놓음으로써, 경제 전체의 성장률이 하락하게 되었고 총 수요가 붕괴하기 시작했으며 지금과 같은 경기 침체를 불려왔다고 할 수 있다. 21세기 기술 변화에 따른 기술적 실업이 퍼지지 않도록 인간의 역량과 제도를 더욱 발전시켜 나갈 수밖에 없다.

우리는 기계를 상대로 경주할 것이 아니라 이들과 함께 경주에 임해야 한다. 다행스럽게도 인간은 직관과 창의력과 같이 컴퓨터가 약한 영역에서 강력하고 정확한 능력을 갖추고 있다. 이러한 인간과 컴퓨터의 파트너십을 지속하기 위해서는 조직 혁신의 질과 양을 높이고 인적 자본의 능력을 향상하는 노력이 필요하다.

하지만 조직혁신과 인적 자본 투자는 우리가 당면한 문제를 모두 해결해 주지는 못한다. 첫째 모든 사람이 고등교육을 받을 수 없다. 둘째 일자리 창출을 위한 기업가 정신도 한계에 이르고 있다. 셋째 승자와 패자가 여전히 구분되어 존재한다는 것이다. 경제 성장에도 불구하고 일자리가 사라지는 문제는 사회적 계약과 사회 구조 자체를 위협하고 있다. 이에 따라 기본 소득과 같은 방식으로 수입의 재분배라는 본능적인 요구를 하게 될 것이다. 하지만 물질적인 재분배만으로는 부족하기 때문에 모든 사람이 생산적으로 경제에 기여할 수 있는 창의적인 방법을 추천한다.

교육에 투자하라.
교육 성과에 대해 교사가 책임질 수 있도록 하라.
교육, 평가, 인증을 분리하라.
수업을 더 많이 하라.
숙련근로자 이민을 많이 받아라.
기업가정신을 고등학교에서도 가르쳐라.
창업자 비자를 만들어라.
신규사업을 위한 탬플릿을 개발 보급하라.
규제를 낮추거나 폐지하여 창업을 촉진하라.
통신과 인프라를 개선하는데 투자하라.
기초 연구에 대한 투자를 늘려라.
상대적인 노동시장 유연성을 유지하라.
기술보다 고용을 더 매력적으로 만들어라.
일과 혜택을 분리하라.
새로운 네트워크 비즈니스에 대한 규제를 서두르지 마라.
주택담보 보조금을 없애거나 줄여라.
금융 서비스에 대한 보조금을 줄여라.
특허 제도를 개혁하라.

의견

기술 발전에 따른 노동의 종말로 고용 없는 성장에 대한 원인을 분석한 부분은 저자의 의견에 동의한다. 하지만 적절한 해결 방안을 제시하지 못한 것 같다.

기계와 함께 경주에 임하는 것을 해결책으로 제시했는데 이것은 개개인이 자기 계발을 통해서 다른 사람과의 경쟁에서 승리하는데 필요한 가이드가 될 수는 있어도 기술 발전에 따라 발생하고 있는 패자 집단(저숙련 노동자 및 일반인)을 위한 해결책은 아니라고 생각한다.

구조적 혁신의 필요성에 대한 근거로 이베이와 아마존 덕분에 60만 명이 넘는 사람들이 생계를 꾸려나가고 있다고 했는데 아마존이 일자리를 한 개 말들 때마다 2~3개의 기존 일자리가 사라진다는 언론 보도를 보면 60만 ~ 120만 명의 사람들이 일자리를 잃었다고 추정할 수 있어서 첨단 분야의 창업 열풍이 경제를 지탱하는 원동력일 수 있어도 고용위기의 해결 방안은 아니라고 할 수 있다.

다만 이러한 실망스러운 결론은 어느 정도 예상되었다고 할 수 있고 이해가 가는 부분이 많이 있다. 기하급수적인 발전이 진행되는 체스판 후반에서는 기하급수적으로 발전하는 기술 자체에 대한 예측도 쉽지 않다. 기술 발전으로 인해 발생하는 노동 문제는 더욱 예측하기 어렵고 해결 방안 제시는 더 어려운 문제라고 생각된다.

링크

아마존 ‘일자리 창출’의 역설

블로그

[TECH-0003] ES5 핵심 정리

ES5 핵심 정리

연구개발본부

2018. 3. 17.

History

Getter accessors

Setter accessors

Trailing commas in Object literals

Trailing commas in array literals

Reserved words as property names

Object.create

Object.defineProperty

Object.defineProperties

Object.getPrototypeOf

Object.keys

Object.seal

Object.freeze

Object.preventExtensions

Object.isSealed

Object.isFrozen

Object.isExtensible

Object.getOwnPropertyDescriptor

[fit]Object.getOwnPropertyNames

Array.isArray

Array.prototype.indexOf

Array.prototype.lastIndexOf

Array.prototype.every

Array.prototype.some

Array.prototype.forEach

Array.prototype.map

Array.prototype.filter

Array.prototype.reduce

Array.prototype.reduceRight

Array.prototype.sort

Property access on strings

String.prototype.trim

Date.prototype.toISOString

Date.now

Date.prototype.toJSON

Function.prototype.bind

JSON

Immutable globals

Function.prototype.apply permits array-likes

parseInt ignores leading zeros

Function “prototype” property is non-enumerable

Arguments toString is “Arguments”

Zero-width chars in identifiers

Unreserved words

Thrown functions have proper this values

Reference

[TECH-0002] ES2015 핵심 정리

ES2015 핵심 정리

History

let, const

var

let

Unicode

codePointAt1, fromCodePoint2

normalize3, regular expression

template literal

template literal

default parameter, rest parameter

function - spread operator4

function name

arrow function5

tail call optimization

tail call optimization

확장된 객체 리터럴 문법

Object.is()

Object.assign()

prototype

method(메서드)6

object destructuring(구조분해)

array descructuring

default value, local variable

destruturing - array clone

destruturing - parameter

심벌

심벌 정의

codePointAt¹, fromCodePoint²

normalize³, regular expression

function - spread operator⁴

arrow function⁵

method(메서드)⁶