이벤트와 이벤트 핸들러 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 이벤트가 발생되었을 때 실행되는 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 이벤트가 언제 발생할 지는 예상할 수 없다. 따라서 이벤트가 발생했을 때 호출되는 함수도 개발자가 명시적으로 호출하지 않고 브라우저에게 이벤트가 발생하면 이 함수를 호출하라고 위임권을 주는 것이다. 이벤트 핸들러 등록하기 이벤트 핸들러를 등록하는 방식에는 이벤트 핸들러 어트리뷰트, 이벤트 핸들러 프로퍼티, addEventListener 메서드 방식이 있다. addEventListener 방식을 많이 사용하지만 세 방식의 차이점이 무엇이고 ..

DOM HTML 문서가 파싱되면 HTML 요소들은 노드 객체로 변환된다. 그리고 변환된 노드 객체들은 트리 자료구조로 구성되는데 이것을 DOM이라고 한다. 여기서 노드 객체로 변환된다는 것이 무엇인지 간단하게 정리해보자. Hello 위와 같은 HTML 요소는 태그, 어트리뷰트, 텍스트 이렇게 총 3개로 분리할 수 있다. 태그는 파싱된 후 요소 노드로 변환된다. 어트리뷰트는 어트리뷰트 노드로 변한되며 텍스트는 텍스트 노드로 변환된다. 또 문서 노드라는 것이 있는데 이것은 DOM 트리의 루트노드로서 브라우저가 렌더링한 HTML 문서 전체를 가리키는 document 객체를 가리킨다. 그렇다면 트리 자료구조를 구성한다는 것은 무슨말일까? 찬욱 이렇게 ul 태그 안에 li 태그가 있는 경우 HTML 요소가 파싱되..

자바스크립트 객체 분류 표준 빌트인 객체 (native objects) 호스트 객체 (host objects) 사용자 정의 객체 : 내가 직접 만든 객체 표준 빌트인 객체 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체이다. ECMAScript 사양에 정의된 객체이므로 자바스크립트 실행 환경인 Node.js, 브라우저와 관계없이 언제나 사용할 수 있다. 또한 별도의 선언없이 전역 변수처럼 언제나 참조할 수 있다. 호스트 객체 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다. 브라우저 환경에서는 DOM, BOM, XMLHttpRequest, fetch, Web Storage 등 클라이언트 사이드 Web API를 호스트 객체로 제공하고, N..

렌더링 과정 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 서버에 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합한 렌더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 Abstract Syntax Tree를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다. 렌더 트리를 기반으로 HTML요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다. www.google..

https://ukgi-dev.tistory.com/31 실행 컨텍스트와 렉시컬 환경 심화 탐구 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 관리하는 영역이다. 그렇다면 어떤 환경을 제공하고, 어떻게 실행 결과를 관리할까? 우선 소스 코드는 평 ukgi-dev.tistory.com 해당 내용은 실행 컨텍스트 학습이 선행되어야한다. 렉시컬 환경의 환경 레코드에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다. 식별자 정보에는 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자, 함수 선언문, 변수의 식별자 등이 있다. 이렇게 컨텍스트 전체를 쑥 훑으면서 식별자 정보를 순서대로 수집을 한다. 식별자 정보를 수집하는 과정은 아직 코드가 실행되기 전이다. 즉, 자바스..

스코프는 식별자가 유효한 범위를 말한다. function add(x, y) { console.log(x, y); return x + y; } add(2, 5); console.log(x, y); // 참조오류 add 함수의 매개변수인 x,y는 add 함수 내부에서만 유효하다. 유효범위가 add 함수인 것이다. 따라서 add 함수 외부인 전역에서 호출하게 되면 참조 오류가 발생한다. 이것은 유효한 범위에서 호출하지 않았기 때문이다. let x = 'global'; function foo() { let x = 'local'; console.log(x); } foo(); console.log(x); 위의 코드는 local을 먼저 출력하고 그 다음에 global을 출력한다. 자바스크립트 엔진의 입장에서 한 번 ..