포스트 목적: javascript로 개발하면서 사용한 기능을 정리
postMessage
modal말고 window.open을 통해 새로운 창을 띄워서 리스트에서 선택을 한다든지 할 수 있잖아요.
그럴때 window끼리 통신을 해야되는데, window.postMessage로 그게 가능합니다.
https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage
받는 쪽에서는 window에 message 이벤트 핸들러로 postMessage의 이벤트를 받을 수 있어요.
그리고 보내는 쪽을 알아야 받을 거 아닌가요? 메시지 송신자를 파악하기 위해서
MessageEvent 인터페이스에서 origin이란 프로퍼티를 통해 파악할 수 있어요.
const message = event as MessageEvent;
if (message.origin !== `받아야할protocol//받아야할host`) {
return;
}문제는 크롬에선 window의 top, left를 지정해도 먹지 않는 것
모달을 두고 굳이 쓸 필요 없겠죠.
window
window : 탭이 있는 브라우저에서는 각각의 탭을 각각의 window 객체로 나타냄.
window 인터페이스는 DOM 문서를 포함하는 창을 나타냄.
https://developer.mozilla.org/ko/docs/Web/API/Window
Object.keys(<객체>)
객체에 있는 props를 배열로 바꿔야할때 매우 편함.
const list = Object.keys(obj).map( (key) => {
return {
[`${key}`]: obj[`${key}`];
}
}Object.assign(), spread 연산자 무슨 차이가 있나?
spread 연산자로 사용시 property는 다 복사하는데, prototype은 복사하지 않아요.
DTO 용도로 API로 전달할 데이터나, queryParam등 데이터를 담은 객체를 가공할때는 spread연산자로 충분함.
https://thecodebarbarian.com/object-assign-vs-object-spread.html
구조분해 프로퍼티 별칭 alias 사용하기
const obj = { x: 1 };
// Grabs obj.x as { x }
const { x } = obj;
// Grabs obj.x as as { otherName }
const { x: otherName } = obj;
https://davidwalsh.name/destructuring-alias
실행 컨텍스트
실행에 필요한 코드 흐름상의 배경이 되는 조건 / 환경
동일 조건/ 환경을 지니는 코드 뭉치 : 함수 or 전역공간
(for문, if문 안에 변수가 { } 바깥에서도 접근가능하다. ES5)
(block scope로 인해 if문 for문도 스코프 생김 ES6)
실행할때 필요한 조건/ 환경정보
다시 정리
execution context: 함수를 실행할 때 필요한 환경정보를 담은 객체
call stack: 현재 어떤 함수가 동작하고 있는지,
다음에 어떤 함수가 호출되어야 하는 지 등을 제어하는 자료구조
execution cotext에는
variable environment
environmentRecord - (snapshot)
outerEnvironmentReference - (snapshot)
lexical envrionment
environmentRecord
outerEnvironmentReference
thisbinding
variable environment는 그 순간 데이터를 갖고있고,
lexical environment는 이후에 변경된 내용을 계속 반영하는 것
같은 데이터를 바라봄.
environmentRecord: 현재 문맥의 식별자 정보 - hoisting - 식별자 정보를 실행컨텍스트의 맨 위로 끌어올림
함수선언문 : 전체를 끌어올림
function a() {
return 'a';
}함수표현식 : 할당된 변수만 끌어올림
var b = function bb() {
return 'bb';
}outerEnvironmentReference - scope chain
scope : 변수의 유효범위 - execution context가 만들어내는 것
inner - LexicalEnvironment
outerEnvironmentReference는 outer lexical Environment
-
outer - LexicalEnvironment
outerEnvironmentReference는 전역 컨텍스트의 lexical environment -
전역 - LexicalEnvironment
그래서 전역컨텍스트에 선언된 변수나 메서드는 outer에서도 접근가능 inner에서도 접근가능,
scope chain : 어떠한 변수에 접근하려고할때 현재 컨텍스트부터 outerEnvironmentReference를 통해 확장된 outerEnvironment의 변수를 접근하려고 한다.
this
this binding : 실행 컨텍스트가 활성화 될때 한다.
실행컨텍스트는 언제 생성? -> 함수를 호출할때 결정
-
전역공간에서 - 전역객체
-
함수 호출시 - 전역객체
-
메서드 호출시 - 메서드 호출 주체 ( 메서드명 앞 )
-
callback 호출시 - 기본적으로는 함수 내부에서와 동일
- call, apply, bind 메서드 :
- call: 함수 호출시 this를 인자로 전달한 객체로 동작.
call(this인자, 파라미터1, 2, ...) - apply: 함수 호출시 this를 인자로 전달한 객체로 동작.
aplly(this인자, [파라미터1, 파라미터2, ...]) - bind : 함수 호출시 인자로 전달한 this로 바인딩된 함수 반환
bind(this인자, 파라미터1, 2);
bind는 새로운 함수 생성 (currying)const currying = x => y => z => x+ y+ z; currying(1)(2)(3); // 6
- call: 함수 호출시 this를 인자로 전달한 객체로 동작.
var callback = function() { console.dir(this); }; var obj = { a: 1, b: function(cb) { cb(); // -> 전역객체 cb.call(this); // -> obj { a: 1, b: function (cb)... } }; obj.b(callback);callback함수는 this를 어떻게 지정하냐에 따라 달라짐.
var callback = function () { console.dir(this); }; var obj = { a: 1 }; setTimeout(callback, 100); // 100ms 후 전역객체 setTimeout(callback.bind(obj), 100); // 100ms 후 obj { a: 1}addEventListener같은 경우 이벤트가 발생한 노드로 this바인딩하게 정의되어있음.
document.body.innerHTML += '<div id="a">클릭하세요</div>'; document.getElementById('a') .addEventListener('click', function () { console.dir(this); }); - call, apply, bind 메서드 :
-
생성자함수 호출시 - 인스턴스
function Person(n,a) { this.name = n; this.age = a; } var gomugom2 = new Person('gogugom2', 34); console.log(gomugom2);
callback function
콜백함수는 제어권을 넘긴다.
제어권은 여러가지가 있음.
실행 시점 - setInterval, setTimeout
인자 - forEach 형태에 맞게 넘겨야 동작함.
this - addEventListener - 이벤트 객체가 첫번째 callback 인자로 들어감.
정리 :
다른 함수 (A)의 인자로 콜백함수 (B)를 전달하면, A가 B의 제어권을 갖게 된다.
A는 미리 정해놓은 방식에 따라 B를 호출한다.
실행 시점, 인자, this
콜백함수: 함수
var arr = [5,5,5];
var obj = {
values = [1,1,1],
logValues: function(v,i) {
if( this.values) {
console.log(this.values, v, i);
} else {
console.log(this.values, v, i);
obj.logValues(); // this는 obj 객체
arr.forEach(obj.logValues); // this는 전역객체 