javascript42 [9주차 스터디]40장-이벤트 이벤트 브라우저는 처리해야 할 특정 사건이 발생하면 이벤트(event)를 발생 시킵니다. 특정 타입의 이벤트에 대해 호출 될 함수를 브라우저에게 알려 호출을 위임 한다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러(event handler)라고 함 이벤트가 발생 했을 때 브라우저에게 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록 이라고 한다. 이벤트 핸들러를 통해 사용자와 애플리케이션 간의 상호작용을 제어할 수 있고 이를 이벤트 드리븐 프로그래밍 이라 한다. 이벤트 핸들러 등록 이벤트 핸들러 : 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수 이벤트 핸들러 등록 방법 3가지 인벤트 핸들러 어트리뷰트 방식 HTML 요소의 어트리뷰트 중에 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있다. 어트.. 2022. 3. 27. [8주차 스터디]39장-DOM DOM DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API 즉, 프로퍼티와 메서드를 제공하는 트리 자료구조 이다. 노드 HTML 요소는 HTML 문서를 구성하는 개별 적인 요소를 의미합니다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환 HTML 요소 간에는 중첩 관계를 가질 수 있으며 이러한 관계를 반영하여 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다. 노드 객체의 타입 노드 객체는 상속 구조를 가지고 총 12개 종류의 노드가 있다. 대표적으로 4가지 중요한 노드 타입을 정리 할 수 있다. 문서 노드(document node) DOM 트리의 최상위에 존재하는 루트 .. 2022. 3. 27. [8주차 스터디]38장-브라우저 렌더링 브라우저의 렌더링 과정 클라이언트 사이드의 자바스크립트는 브라우저 위에서 동작합니다. 브라우저가 HTML, CSS, javascript 로 작성된 텍스트 문서를 어떻게 파싱하여 렌더링하는지 이해하는 것이 중요합니다. 파싱(parsing) 파싱(구문 분석 syntax analysis)은 텍스트 문서를 읽어들여 실행하기 위해 텍스트 문서의 문자열을 토큰(token)으로 분해(어휘 분석 lexical analysis)하고 토큰의 문법적 의무와 구조를 반영하여 파스 트리(parse tree)를 생성하는 일련의 과정을 말합니다. 파싱이 완료된 이후에는 파스트리를 기반으로 중간언어인 바이트코드를 생성하고 실행합니다. 렌더링(rendering) 렌더링 HTML, CSS 자바스크립트로 작성된 문서를 파싱하여 브라우저에.. 2022. 3. 27. [7주차 스터디]37장-Set 과 Map Set과 Map Set Set객체는 중복되지 않는 유일한 값들의 집합이다. Set객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set객체 동일한 값을 중복하여 포함 할 수 있다 O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X Set은 수학적 집합을 구현하기 위한 자료구조 입니다, 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. Set 객체의 생성 Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성 됩니다. Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. (이때, 중복된 값은 Set 객체에 요소로 저장되지 않는다.) Set 객체의 특성을 활용해서 배열의 중복된 요소를 제거할 수 있습니다. const set=.. 2022. 3. 27. [7주차 스터디]35장-디스트럭처링 할당 디스트럭처링 할당 디스트럭처링 할당(구조 분해 할당, destructuring assignment)은 구조화된 배열과 같은 이터러블 또는 개체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 도는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용 배열 디스트럭처링 할당 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당 디스트럭 처링 할당의 대상(할당문의 우변)은 이터러블이어야 한다. const arr = [1,2,3]; const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 할당의 기준은 인덱스이다. 즉, 순서대로 할당되고 변수의 개수와 일치할 필요는 없다.. 2022. 3. 27. [7주차 스터디]35장-스프레드 문법 스프레드 문법 es6에서 도입된 스프레드 문법 (spread syntax)은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법 사용의 대상은 for ... of 문으로 순회할 수 있는 이터러블에 한정된다. console.log(...[1,2,3]); // 1 2 3 // 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다. console.log(...{a : 1, b : 2}); // TypeError : Found non-callable @@iterator 스프레드 문법의 결과는 값이 아닙니다. (즉, ... 문법은 새로운 값을 생성하는 연산자가 아닙니다.) 따라서 스프레드 문법의 결과는 변수에 할당할 수없다. 정리 : 스프레드 문법의 결과물은 값.. 2022. 3. 27. 이전 1 2 3 4 5 6 7 다음
