코딩을 쉽게 해보자

1. 이벤트 드리븐 프로그래밍 이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용을 할 수 있다. 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다. 2. 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 3. 이벤트 핸들러 등록 이벤트 핸들러는 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수 즉, 이벤트가 발생하면 브라우저에 의해 호출될 함수가 이벤트 핸들러다. 이벤트 핸들러를 등록하는 방법은 3가지가 있다. 3-1. 이벤트 핸들러 어트리뷰트 방식 3-2. 이..

브라우저의 렌더링 엔진은 HTMl 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 1. 노드 1-1. HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소 간에는 중첩 관계에 의해 계층적인 부자관계가 형성된다. 이러한 HTML 요소간의 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다. 트리 자료구조 트리 자료구조는 노드들의 계층 구조로 이뤄진다. 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. 1-2. 노드 객체..

구글의 V8 JS 엔진으로 빌드된 JS 런타임 환경인 Node.js의 등장으로 JS는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발 언어가 되었다. 브라우저 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링하는지 살펴보자 파싱 파싱(구문 분석)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다. 렌더링 렌더링은 HTML, CSS, JS로 작성된 문서를 파싱하여 ..

1. Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같이 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 1-1. Set 객체의 생성 Set 생성자 함수로 생성한다. 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다. 1-2. 요소 개수 확인 Set.prototype.size 프로퍼티를 사용한다. 1-3. 요소 추가 Set.prototype.add 메서드를 사용한다. JS의 모든 값을 요소..