개발/JavaScript

브라우저 탭 사이의 통신하기 (postMessage)

브라우저에는 탭이라는 개념이 있다. 각 탭에 서로 다른 페이지를 띄울 수 있으며 탭 사이에는 어떠한 연관성이 없어 보인다. 브라우저 탭 사이에 데이터를 주고 받는게 가능할까? 브라우저 탭브라우저에 있는 탭은 어떤 특징을 갖고 있을까? 같은 브라우저에 있을 뿐 실제로 별개로 동작하는 것일까? https://developer.mozilla.org/ko/docs/Glossary/Browsing_context 브라우징 맥락 developer.mozilla.org mdn의 문서에 따르면 다음과 같은 내용이 있다.브라우징 맥락은 브라우저가 Document를 표시하는 환경을 말합니다. 오늘날에는 보통 탭이지만, 브라우저 창이나 페이지 내의 프레임도 가능합니다.각 브라우징 맥락은 특정 출처, 활성화된 문서의 출처, 그..

[JavaScript] 커링(Currying)

아래 코드를 보자. function something(arg1: any, arg2: any) { // do something } function somethingWithIndex(index: number, arg1: any, arg2: any) { // do something with index } 두 함수가 하는 역할이 같다고 가정해보자. something 함수는 "어떤 것"을 하는 함수이며 somethingWithIndex 함수는 "특정 인덱스에 있는 요소에 대해 어떤 것"을 하는 함수라고 보면 된다. 위의 상황에서 something과 somethingWithIndex의 차이는 단순히 index를 받는지에 관한 차이점만 있을 것이다. 이러한 경우 기존의 something 함수를 재사용 하기 위해서는 ..

[JavaScript] 클로저

JavaScript에는 클로저라는 개념이 있다. 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있으며 이러한 중첩 함수를 클로저라 부른다. 아래 예시를 보자. const x = 10; function fn1() { const x = 20; const fn2 = function () { console.log(x); }; return fn2; } const closure = fn1(); closure(); // 20 fn1 함수가 호출되며 fn2를 반환하고 생명주기가 마감된다. 생명주기가 마감되면서 fn1 함수의 실행 컨텍스트가 제거되었고 변수 또한 생명주기가 마감된다. 변수에 접근할 수 없는 상태인데 실행 결과가 20인 이유는 무엇일까..

[JavaScript] querySelectorAll VS getElementsByClassName

위와 같은 코드가 있다. 두 방식 중 어떤 것을 사용해도 div 태그 다섯 개를 찾아올 수 있다. 두 방식의 차이점은 무엇일까? 1. querySelectorAll querySelectorAll은 선택자에 일치하는 모든 요소를 반환한다. 이 때 반환하는 타입은 NodeList다. NodeList는 노드의 컬렉션이라 한다. NodeList는 Array는 아니지만 forEach 등의 문법을 사용할 수 있다. 또한, Array.from을 사용하여 Array로 변환할 수 있다. 하지만, NodeList는 정적 콜렉션이다. 이는 DOM을 변경해도 콜렉션 내용에는 영향을 주지 않는다는 뜻이다. 따라서, 항목을 순회하거나 리스트의 길이를 캐시할 때 도움이 된다. 2. getElementsByClassName getE..