탑크리에듀교육센터(www.topcredu.co.kr)제공
스프링프레임워크 & 마이바티스(Spring Framework, MyBatis)
16번째 자료입니다. 참고하시어 많은 도움되셨길 바랍니다.
교육 및 수강문의/기타문의사항은 홈페이지(www.topcredu.co.kr)를 통하여 하실 수 있습니다.^^
탑크리에듀교육센터(www.topcredu.co.kr)제공
스프링프레임워크 & 마이바티스(Spring Framework, MyBatis)
16번째 자료입니다. 참고하시어 많은 도움되셨길 바랍니다.
교육 및 수강문의/기타문의사항은 홈페이지(www.topcredu.co.kr)를 통하여 하실 수 있습니다.^^
탑크리에듀(www.topcredu.co.kr), 송석원 교수의 IT기술칼럼#2
자바스크립트는 ES6버전에서 class 키워드를 도입했습니다. 자바스크립트는 객체지향 언어였지만 다른 객체지향언어처럼 사용하기에는 많은 불편함이 있었습니다. 심지어 자바스크립트는 객체지향언어라고 볼 수 없다고 하는 분들도 있었을 정도였죠. 최근에 선풍적인 인기를 얻고 있는 React, Angular 같은 기술은 클래스 문법을 채택했습니다. 따라서, 클래스 문법에 대한 이해가 깊다면 새로운 기술을 습득할 때 많은 도움이 될 것 입니다.
다른 객체지향 언어와 자바스크립트의 차이를 이해하지 못하고 사용하게 되면 많은 문제점이 발생합니다. 안타깝지만 자바스크립트를 사용하고 있는 개발자들 중에서도 제대로 이해하고 사용하시는분은 많지 않은 듯 합니다.
이를 해소하기 위해서 새로 도입한 문법이 class 키워드로 대표되는 클래스 문법입니다. 객체지향 개발방법의 익숙한 개발자들을 위해서 자바스크립트가 새로운 문법을 도입한 것 입니다. 개인적으로 “JavaScript: The Good Parts”의 저자이신 Douglas Crockford 님께서 이를 어떻게 생각하는지 궁금합니다. 자바스크립트를 자바처럼 사용하는 것에 우려를 표하셨었는데, 그 사이 많은 시간이 지났으므로 입장이 바뀌었을지 궁금하군요. 선도적인 개발자들은 ES6에서 도입한 클래스 문법이 좋은 것인가 나쁜 것인가를 갖고 토론을 하기도 합니다.
탑크리에듀교육센터(www.topcredu.co.kr)제공
스프링프레임워크 & 마이바티스(Spring Framework, MyBatis)
17번째 자료입니다. 참고하시어 많은 도움되셨길 바랍니다.
교육 및 수강문의/기타문의사항은 홈페이지(www.topcredu.co.kr)를 통하여 하실 수 있습니다.^^
(고급자바스크립트강좌 for AngularJS, React)static of class,class 범위 안에서 static 키워드로 선언하...탑크리에듀(구로디지털단지역3번출구 2분거리)
ES6의 클래스문법을 새로운 문법이라고 단순히 받아들이는 것보다는 기존의 사용법과 비교해서 익히는 것이 좋습니다. 왜냐하면 클래스는 함수를 정의하는 방법중에 하나일 뿐이기 때문입니다.
이번 시간에는 class 범위 안에서 static 키워드로 선언하는 함수의 정체가 무엇인지 살펴보겠습니다.
ES5에서 함수를 선언한 다음에, 함수도 자체적으로 객체이기 때문에 다음과 같이 필요한 자원을 할당할 수 있습니다. 자바스크립트는 함수를 생성자로 사용해서 만들어지는 객체의 관점에서 보면 새 객체가 이용할 수 있는 3가지 종류의 자원배분 방법이 있습니다.
1. 객체가 스스로 갖고 있는 프로퍼티를 이용한다.
2. 객체의 부모인 생성자 함수의 프로토타입 객체가 갖고 있는 프로퍼티를 이용한다.
3. 생성자 함수 자체가 객체로써 직접 갖고 있으면서 제공하는 프로퍼티를 이용한다.
12. 12
Copyright blog.xcoda.net
3.ES5 & ES6ES5 Object
객체 생성 및 상속
Object.create( parent, propDesc )
지정한 객체를 상속받는 객체 생성
property descriptor를 지정
function Person(name, age){
this.name = name;
}
Person.prototype.getName = function(){
return this.name;
}
var parent = new Person('lee');
var child = Object.create(parent, {'age': {
value :27
}
});
child.getName(); // 'lee'
child.age; // 27
13. 13
Copyright blog.xcoda.net
3.ES5 & ES6ES5 Object
객체 생성 및 상속
Object.create( parent, propDesc )
구현 사례
Object.create = function( proto, props ) {
var ctor = function( ps ) {
if ( ps )
Object.defineProperties( this, ps );
};
ctor.prototype = proto;
return new ctor( props );
};
14. 14
Copyright blog.xcoda.net
3.ES5 & ES6ES5 Object
객체 속성 조사
Object.keys( obj ) :
enumarable 속성을 배열로 반환
Object.getOwnPropertyNames( obj ) :
직접 소유한 속성을 배열로 반환
Object.getOwnPropertyDescriptor( obj , 'prop name') :
지정한 속성에 대한 descriptor를 반환
var obj = {name: 'lee', age : 27};
Object.defineProperty(obj, 'addr', {
value:'seoul', enumarable:false
});
Object.keys(obj); // [name, age]
Object.getOwnPropertyNames(obj); //[name, age, addr]
15. 15
Copyright blog.xcoda.net
3.ES5 & ES6ES5 Object
객체 관련 기타 사항
마지막 콤마(,) 허용
JSON 객체의 마지막 속성
배열 요소의 마지막 요소
예약어(key word)를 속성으로 사용 가능
var obj = {name: 'lee', age : 27, };
var array = [1,2,3,4,5,]
obj.if = 'interface';
obj.var = 4
29. 29
Copyright blog.xcoda.net
3.ES5 & ES6ES5 기타
Function
.bind(thisArg [ , arg1, arg2...]);
함수 호출에 사용할 this 객체를 지정하여 새로운 함수 반환
call()/applay()는 호출할 때 마다 지정
var obj = {name: 'lee'};
function f(){
return this.name;
}
f(); // undefined
var obj_f = f.bind(obj);
obj_f(); // 'lee'
30. 30
Copyright blog.xcoda.net
3.ES5 & ES6ES5 기타
Date
new Date( ISOString),
.toISOString()
.now()
JSON
JSON.parse()
JSON.stringify()
31. 31
Copyright blog.xcoda.net
3.ES5 & ES6ES5 기타
Strict Mode
ECMAScript 3 기능 중 Deprecated 된 것을 사용할 수 없게 한다.
정의되지 않은 변수에 할당 불가
객체 Property의 변경 불가(아래의 경우)
writable=false , 수정 불가
configurable= false, 삭제 불가
extensible=false, 추가 불가
Eval
eval을 ID로 사용 불가
eval() 함수 내에서 변수 선언 불가
Function
arguments 객체에 할당 불가
arguments.callee 사용 불가
arguments.caller 사용 불가
with(){} 구문 사용 불가
<script type="text/javascript>
"use strict"
...
//or
function imStrict(){
"use strict"
// code here....
}
33. 33
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
변수 선언
let
block scope 변수 선언
재정의 불가
var은 funciton scope 변수 선언
var a = 1;
var a = 10; // OK
console.log(a); // 10
let b = 1;
let b = 10; // Error
function f(){
var x = 10;
let y = 20;
}
console.log(x); // 10
console.log(y); // Error, not defined
34. 34
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
변수 선언
const
상수 선언
값의 재할당 금지
let 과 동일한 scope 정책
객체 참조의 경우 객체 자체는 가변(C 언어와 차이)
const V = 10;
V = 20; // Error
const OBJ = { name : 'lee'};
OBJ.name = 'kim'; // OK
OBJ = {name:'kim'}; // Error
35. 35
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Default Parameter
함수의 매개변수에 기본 값 지정
undefined 값의 전달 기본 값 적용
old style
ES6 style
function f(x, y, z){
x = x || 1;
y = y || 2;
z = z || 3;
console.log(x, y, z);
}
f(10, 20); // 10, 20, 3
function f(x = 1, y = 2, z = 3){
console.log(x, y, z);
}
f(10, 20); // 10, 20, 3
36. 36
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Spread Operator(펼침 연산자) : ...arg
배열과 같은 Iterable 객체의 요소
함수에 전달 할때 개별 항으로 취급
old style
ES6 style
function f(a, b){
return a + b;
}
var array = [2, 3];
f(array[0], array[1]); // 5
f.apply(null, array);//5
function f(a, b){
return a + b;
}
var array = [2, 3];
f(...array);//5
37. 37
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Spread Operator(펼침 연산자) : ...arg
부분 배열
배열 합치기
let array1 = [1,2,3];
let array2 = [0, ...array1, 4,5,6,] // [0, 1,2,3,4,5,6]
let array1 = [1,2,3];
let array2 = [4,5];
array1.push(...array2); // [1,2,3,4,5]
38. 38
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Rest Operator(나머지 연산자) : ...arg
함수 선언부의 마지막 파라미터에 "..." 작성
지정된 파리미터 이외의 값을 배열형식으로 전달
function f(a, b, ...args){
console.log(args);
}
f(1,2,3,4,5); //[3,4,5]
39. 39
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Destructuring Assignment(해체 할당)
Iterable/Object 각각의 요소/속성을 여러 변수에 한번에 할당
배열 해체 할당
var array = [1,2,3];
var a = array[0];
var b = array[1];
var c = array[2];
var x,y,z;
[x,y,z] = array;// x:1, y:2, z :3
var [aa, bb, cc] = array;// aa:1, bb:2, cc:3
40. 40
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Destructuring Assignment(해체 할당)
값 건너 뛰기
나머지 연산자
기본값 할당
파라미터로 해체 할당
let [a, , b] = [1,2,3]; // a:1, b:3
let [a, ...b] = [1,2,3,4,5]; //a:1, b:[2,3,4,5]
let [a, b, c = 3] = [1,2]; // a:1, b:2, c:3
function f([a,b,c=3] = [1,2,3]){ ... };
f(undefined);
41. 41
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Destructuring Assignment(해체 할당)
객체 해체 할당
객체 프로퍼티를 각각의 개별 변수에 할당
프로퍼티와 변수의 이름을 갖게
var obj = {name:'lee', age:27};
var name, age;
({name, age} = obj);
console.log(name, age); // 'lee', 27
var a, b;
({name:a, age:b} = obj);
console.log(a, b); // 'lee', 27
var {name:x, age:y} = obj;
console.log(x, y); //'lee', 27
42. 42
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Arrow Function
람다 식, 익명 함수
(parameter)=>{ ... body...}
함수 body의 문이 한줄 이면 return 과 {} 생략 가능
파라미터가 1개 이면 () 생략 가능
파라미터 없으면 () 생략 불가
(param1, param2, ..., paramN) => { statements }
(param1, param2, ..., paramN) => expression
(singleParam) => { statements }
singleparam => { statements }
() => { statements }
var plus = (a,b)=>{ return a+b};
plus(1, 2); //3
var plus = (a, b)=> a+b;
plus(3, 4); // 7
43. 43
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Arrow Function
Lexical this
일반 함수와 같이 this 사용 불가
바깥 함수의 this를 사용
var obj = { name: 'lee', getName: function(){ return this.name;}};
obj.getName(); // 'lee'
var obj2 = {name: 'lee', getName: ()=>this.name};
obj2.getName(); //undefined
var obj3 = {name:'lee', getName:function(){
return (()=>this.name)();
}}
obj3.getName(); // 'lee'
44. 44
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Arrow Function
Lexical this
일반 함수와 같이 this 사용 불가
바깥 함수의 this를 사용
생성자 사용 불가(new 사용 불가)
var obj = { name: 'lee', getName: function(){ return this.name;}};
obj.getName(); // 'lee'
var obj2 = {name: 'lee', getName: ()=>this.name};
obj2.getName(); //undefined
var obj3 = {name:'lee', getName:function(){
return (()=>this.name)();
}}
obj3.getName(); // 'lee'
var arrow = () => 'hello';
new arrow(); // Error
45. 45
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Syntax
Object literal
편리한 프로퍼티 값 할당
편리한 메서드 정의
computed property name(조합 프로퍼티명)
var name = 'lee', age = 27;
var obj = {name, age};
var obj = {
hello(){
console.log('hello world');
}
};
obj.hello(); // 'hello world'
var obj = { ['last' + 'name'] : 'lee'};
obj.lastname; // 'lee';
obj['last' + 'name']; //'lee'
51. 51
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
String
.repeat(times) : 지정한 횟수 만큼 연결
includes(string[, index]) : 지정한 문자열 포함 여부
startsWith(str[, index]), endsWith(str[, index])
console.log('z'.repeat(6));//zzzzzz
var s = 'hello world';
s.includes('hello'); //true
var s = 'hello world';
s.includes('hello'); //true
52. 52
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
String
template 문자열
역 따옴표(`)
place holder : ${}
multi line string
tagged template
var name = 'Lee', age = 27;
var template = `Hello! my name is ${name}, ${age} years old`;
console.log(template);// 'Hello! my name is Lee, 27 years old'
function tag(strings, ...values){
console.log(strings);
console.log(values);
return strings[0] + strings[1] + (values[0] + values[1]);
}
var a=10, b=20;
var temp = tag `hello ${a} world ${b}`; // 'hello world 30'
54. 54
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Array
Array.of(element0 [, element n]);
주어진 요소로 배열 생성
new Array()와 차이
.fill(value [, start=0 [, end = length]])
지정된 값으로 배열을 채운다.
new Array(5); //[ ,,,,], length:5
Array.of(5); // [5], length:1
Array.of(1,2,3); //[1,2,3], length:3
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
55. 55
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Array
.find(callback, thisArg)
callback을 만족하는 요소 반환
callback(value, index, array)
.findIndex(callback, thisArg)
find와 동일, 값이 아닌 index 반환
var people = [
{name:'lee', age:27},
{name:'kim', age:23},
{name:'park', age:30}
];
people.find(function(val, idx, arr){
return val.name = 'kim';
}); //{ name: 'kim', age: 27 }
56. 56
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Array
.copyWithin(target, start[, end = this.length)
배열 내 요소를 다른 위치에 복사
entries(), keys(), values()
배열을 iterable 객체로 반환
[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]
var entries = [1,2,3].entries();
console.log(...entries); //[0, 1] [1, 2] [2, 3]
var keys = [1,2,3].keys(); // 0 1 2
console.log(...keys);
var values = [1,2,3].values();
console.log(values); // 1 2 3
57. 57
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
ArrayBuffer
new ArrayBuffer(length) , length : byte
고정 길이 binary data
1Byte 데이타 블록 하나가 원소
Typed Array 또는 DataView를 이용
DataView(buffer [, byteOffset [, byteLength]])
ArrayBuffer에 숫자를 읽고 쓰기 위한 인터페이스
setXXX(offset, value, bigEndian), getXXX(offset, bigEndian);
set/getInt8, set/getUint8, set/getInt16, set/getUint16
set/getInt32, set/getUint32, set/getFloat32, set/getFloat64
let buff = new ArrayBuffer(80);
let view = DataView(buff);
view.setInt32(8, 22, false);
var number = view.getInt32(8, false);
console.log(number);//22
58. 58
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Typed Array
DataView의 offset 계산을 편리하게 위한 wrapper
Int8Array, Uint8Array, Int16Array, Uint16Array
Int32Array, Uint32Array, Float32Array, Float64Array
new XXArray(buffer [, byteOffset [, length]])
new XXArray(length)
new XXArray(array)
let buff = new ArrayBuffer(80);
let typed = new Int32Array(buff);
typed[0] = 22;
console.log(typed.length, typed[0]); // 20 22
let int16 = new Int16Array(2);
int16[0] = 10;
int16[1] = 20;
console.log(int16); // {0=10, 1=20}
let x = new Int16Array([21, 31]);
console.log(x); // {0=21, 1=31}
59. 59
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Set
new Set([iterable])
값의 중복을 허용하지 않는 컬렉션
var myset = new Set();
myset.add(1);
myset.add(5);
myset.add('hello');
var obj = {name:'lee'};
myset.add(obj);
myset.has(1); // true
myset.has(3); // false
myset.has(5); // true
myset.has("hello"); //true
myset.size; //4
myset.delete(5); // true
myset.has(5); // false
myset.size; //3
60. 60
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
Map
new Map([iterable])
key : value 쌍으로 저장
let map = new Map();
map.set("name", 'lee');
map.set("age", 27);
map.size; // 2
for (var [key, value] of map) {
console.log(key + " = " + value);
}
map.has("name"); // true
map.get("age"); // 27
map.delete("age"); //true
map.size; //1
map.clear();
61. 61
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Built-in APIs
WeakSet
Object 만 저장 가능
weekly held object reference
저장된 객체에 대한 다른 참조가 없으면 garbage collection
WeakMap
Object 만 저장 가능
weekly held object reference
저장된 객체에 대한 다른 참조가 없으면 garbage collection
64. 64
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Iterator
Symbol
Symbol([descriptor])
유일한 값 생성
ES6에서 추가된 primitive type
객체의 property key로 사용
new 키워드 사용 불가
Object.getOwnPropertySymbols()
getOwnPropertyNames()에 대응하는 함수
var sym1 = Symbol();
var sym2 = Symbol();
sym1 === sym2; //false
var obj = {[sym1] : 1};
obj[sym1];// 1
Object.getOwnPropertySymbos(obj);// Symbol()
65. 65
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Iterator
Symbol
Symbol.for("key")
"key"에 해당하는 Symbol을 생성하거나 반환한다.
전역 영역의 registry, Symbol()의 scope 문제 해결
Well-known symbol
이미 만들어 놓은 symbol
Symbol.iterator
Symbol.match
let obj = {};
(function(){
let s1 = Symbol();
obj[s1] = 'lee';
})();
obj[s1];// Error
let obj = {};
(function(){
let s1 = Symbol.for("name");
obj[s1] = 'lee';
})();
obj[Symbol.for("name")]; // 'lee'
66. 66
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Iterator
Iterator protocol
next 함수 제공
value, done 프러퍼티를 갖는 객체 반환
value : 다음 값, done: 순회 끝 여부
Iterable protocol
Symbol.iterator를 키로 하는 Iterator protocol을 만족하는 함수 구현
@@iterator
let obj = {
array: [ 1,2,3,4],
nextIndex : 0,
[Symbol.iterator] : function(){
return {
array: this.array,
next: function(){
return this.nextIndex < this.array.length ?
{value : this.array[this.nextIndex++], done:false}:
{done:true};
}
}
}
}
67. 67
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Iterator
Generator
function*
재 진입 가능 함수
매 next()마다 다음 yield 지점까지만 실행
function* idMaker(){
var index = 0;
while(index < 3)
yield index++;
}
var gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // undefined
68. 68
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Iterator
for ... of loop
for( variable of iterable)
next()호출을 자동으로 진행
let iterable = [1, 2, 3];
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3
84. 84
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Reflect
Reflect.getPrototypeOf(object)
Object.getPrototypeOf()와 동일
Reflect.setPrototypeOf(object, prototype)
Object.setPrototypeOf()와 도일
Reflect.setPrototypeOf({}, Object.prototype); // true
// It can change an object's [[Prototype]] to null.
Reflect.setPrototypeOf({}, null); // true
// Returns false if target is not extensible.
Reflect.setPrototypeOf(Object.freeze({}), null); // false
// Returns false if it cause a prototype chain cycle.
var target = {};
var proto = Object.create(target);
Reflect.setPrototypeOf(target, proto); // false
88. 88
Copyright blog.xcoda.net
3.ES5 & ES6ES6 Proxy
new Proxy(target, handler)
객체의 기본 동작에 사용자 임의 로직 적용 위한 wrapper 객체
target : 대상 원본객체
trap : target의 동작을 가로채는 함수
handler : 트랩을 가지고 있는 객체, proxy에 적용
var target = { name: 'lee'};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.age = 27;
console.log(proxy.name, proxy.age);
console.log(target.name, target.age);