Pandaman Blog

Event란 이벤트란 어떠한 사건을 의미한다. 브라우저에서의 이벤트는 예를 들어 사용자가 버튼을 클릭했을 때 스크롤했을 때 등등 다양한 이벤트가 존재한다. 브라우저가 이벤트를 감지하고, 그에 대응하는 처리를 호출해주는 방식에 대해서는 지난 포스팅인 이벤트 루프에서 학습했다. 이번 시간에는 요소에서 발생한 이벤트를 어떠한 방식으로 다른 화면 요소에 전파하는지 알아보자. DOM Event의 전파 방식 계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 한마디로 이벤트 전파가 되는데 전파 방향에 따라 버블링(Bubbling)과 캡쳐링(Capture)으로 나눌 수 있다. addEventListener메소드의 세 번째 매개변수에 true를 설정하면 캡쳐링으로 전파되는 이벤트..

Javascript의 Event Loop (이벤트 루프) 자바스크립트의 코드 실행, 이벤트 수집과 처리, 큐에 놓인 하위 작업들을 담당하는 이벤트 루프에 기반한 동시성(currency) 모델을 가지고 있습니다. 이 모델은 C 또는 Java와 같은 언어와 완전히 다릅니다. MDN문서에서는 자바스크립트의 이벤트 루프를 위와 같이 말한다. 그렇다면 이벤트 루프가 이와 같은 작업들을 어떠한 방식으로 처리하는지 알아보도록 하자. 자바스크립트의 런타임 런타임(영어: runtime→실행시간)은 컴퓨터 과학에서 컴퓨터 프로그램이 실행되고 있는 동안의 동작을 말한다. 자바스크립트에서의 런타임이란 브라우저에서의 자바스크립트 작동 방식이라고 말할 수 있다. 우리는 이전 주제인 실행 컨텍스트을 통해 일부 작동 방식에 대해 배..

Javascript 클로저(Closures)란 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. MDN에서는 위와 같이 클로저를 정의한다. 아래 예제를 통해서 클로저가 무엇인지 확인해보고 위의 정의를 이해해보자. function handleSound() { // 1 const sound = '안녕하세요. 반갑습니다.'; // 2 function playSound() { // 3 alert(sound); } return playSound; // 4 } const myFunc = handleSound(); // 5 myFunc(); // 6 위의 예제를 순서대로 살펴보자. handleSound 함수를 선언했다. 함수 내부에는 const키워드의 sound라는 이름의 지역변수를 선언하고 문자열 '안녕하세요..

Javascript 실행컨택스트 (Execution Context) 코드가 평가되고 실행되는 환경의 추상적인 개념입니다. 즉 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 할 수 있습니다. 지금부터 실행 컨텍스트의 종류에 대해서 알아보겠습니다. global execution context 코드에 진입하면 생성되는 global execution context는 가장 기본이되는 execution context 입니다. functional execution context 함수가 호출될 때마다 호출된 함수의 새로운 실행 컨택스트를 생성합니다. 각 함수는 자신만의 실행 컨텍스트를 가지고 있습니다. 따라서, 이 함수의 실행 컨텍스트는 얼마든지 존재할 수 있습니다.가 아니라 브라우저의 실행스택의..

Javascript Scope(스코프) 컴퓨터 프로그래밍에서 스코프는 변수가 유효성을 갖는 영역을 가리킨다. Scope는 '범위'라는 의미로 사용될 수 있는데요, 즉 '변수에 접근할 수 있는 범위'를 의미합니다. javascript의 Scope 자바스크립트의 Scope의 다음과 같이 구분할 수 있습니다. 1) 전역 스코프 2) 함수 스코프 3) 블록 스코프 전역스코프 전역에 변수를 선언하면 이 변수는 전역 스코프를 갖는 변수가 됩니다. 다시말해서, 블록밖({})이나 함수외부에 변수가 선언되었다면, 이 변수는 전역 스코프를 갖는다고 말합니다. 전역 스코프를 갖는 전역변수는 코드 어디에서든 참조가 가능합니다. 또한 var 키워드로 전역에 선언한 변수는 전역 객체(window)의 프로퍼티가 됩니다. 아래는 전..

Javascript Prototype(프로토타입) JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메서드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. -MDN- MDN Javascript prototype을 검색하면 위와 같이 프로토타입에 대해 설명합니다. 음.. 그래도 명확하게 이해가 되지 않..

Javascript의 This this란? 무엇인가요?라고 누가 물어본다면 명확하게 말하기 어렵다고 생각했습니다.. 그래서 바로 MDN 공식 문서와 서적을 통해 알아보았습니다. 대부분의 경우 this의 값은 함수를 호출한 방법이 결정한다. 실행하는 중 할당으로 설정할 수 없고 함수를 호출할 때마다 다를 수 있습니다. 위 말은 함수를 호출하는 객체가 무엇인가에 따라 this가 달라진다는 의미입니다. 한번 예제를 통해 알아보겠습니다. // 1) this는 전역객체 Window console.log(this); // Window const obj1 = { f1: function() { console.log(this); } } // 2) this는 f1()메소드를 호출한 객체 obj1 console.log(ob..

Javascript 즉시실행함수(IIFE) 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말합니다. - MDN - mdn문서에서 즉시 실행함수를 찾아보면 위와 같이 설명합니다. 일단 어떤 형태로 생겼는지 확인해보겠습니다. (function () { console.log('test') })(); // 'test' 위 예제는 즉시실행함수의 형태입니다. 첫번째 괄호 내부에 함수표현식으로 익명함수를 만들고 바디에 내용을 넣었습니다. 그리고 두번째 괄호로 즉시 실행 함수를 생성하여 함수를 실행시켰습니다. 그리고 IIFE 스코프안에서 안전하게 변수가 보호됩니다. 예제를 통해 확인해보겠습니다..