분류 전체보기61 40. 이벤트 이벤트 드리븐 프로그래밍 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 예를 들어, 클릭, 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. 만약 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에 알려 호출을 위임한다. 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 이처럼 이벤트 핸들러 등록을 통해 이벤트 핸들러 호출을 위임하는 이유는 사용자의 이벤트 발생 시점을 개발자가 미리 알 수 없기 때문이다. 따라서 이벤트 핸.. 2022. 8. 16. 39. DOM DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 노드 HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 문서는 HTML 요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 갖는다. 이때 요소 간의 중첩 관계에 의해 계층적인 부자 관계가 형성되며, 이를 반영하여 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다. 노드 객체의 타입 DOM은 노.. 2022. 8. 15. 38. 브라우저의 렌더링 과정 대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 이를 위해 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 살펴보자. 파싱: 파싱은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 .. 2022. 8. 11. 37. Set과 Map Set Set 객체는 수학적 집합을 나타내는 자료구조이다. Set 객체는 배열과 유사하지만 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 따라서 Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성한다. 인수를 생략하면 빈 Set 객체가 생성된다. Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다. 요소 개수 확인 Set 객체의 요소 개수를 확인할 때는 Set.prototype.size 프로퍼티를 사용한다. size 프로퍼티는 getter만 존재.. 2022. 8. 7. 36. 디스트럭처링 할당 디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 분해하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. ES6에서 도입되었다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 배열 디스트럭처링 할당 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 할당문의 좌변에는 값을 할당받을 변수를 배열 리터럴의 형태로 선언하며, 할당문의 우변에는 이터러블을 위치시킨다. 할당 기준은 배열의 인덱스다. 즉, 순서대로 할당된다. 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다. 배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 .. 2022. 8. 7. 35. 스프레드 문법 ES6에서 도입된 스프레드 문법 ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 뭉쳐 있는 여러 값들의 집합이라는 표현에서 알 수 있듯 스프레드 문법을 사용할 수 있는 대상은 이터러블에 한정된다. 또한 스프레드 문법의 결과는 개별적인 값들의 목록이다. 즉, 스프레드 문법의 결과는 값이 아니다. 이는 스프레드 문법이 피연산자를 연산하여 값을 생성하는 연산자가 아님을 의미한다. 따라서 스프레드 문법의 결과는 변수에 할당할 수 없다. 스프레드 문법은 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 함수 호출문의 인수 목록에서 사용하는 경우 요소들의 집합인 배열을 펼.. 2022. 7. 31. 이전 1 2 3 4 5 6 7 ··· 11 다음