⭐️ 노션에서 보기이벤트 드리븐 프로그래밍브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 시킴특정 버튼 요소에서 클릭 이벤트가 발생하면 특정 함수(이벤트 핸들러)를 호출하도록 브라우저에게 위임(이벤트 핸들러 등록)할 수 있음함수를 언제 호출할 지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라 브라우저에게 함수 호출을 위임하는 것이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 Click me! 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 어플리케이션 간 상호작용(interaction)이 가능⇒ 이벤트 드리븐 프로그래밍: 프로그램의 흐름을 이벤트 중심으로 ..

⭐️ 노션에서 보기DOM(Document Object Model): HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조노드HTML 요소와 노드 객체HTML 요소:HTML 문서를 구성하는 개별적인 요소 https://yung-developer.tistory.com/74- 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨 - HTML 요소의 어트리뷰트 → 어트리뷰트 노드 - HTML 요소의 텍스트 콘텐츠 → 텍스트 노드- HTML 요소 간에는 **중첩 관계**에 의해 계층적인 부자 관계가 형성됨 → 이를 반영하여 HTML 요소를 객체화한 모든 노드 객체를 **트리 자료 구조**로 구성트리 자료구..

⭐️ 노션에서 보기웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됨 → 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능파싱 (parsing; 구문 분석 syntax analysis)프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해텍스트 문서의 문자열을 토큰으로 분해하고 (어휘 분석),토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료 구조인 파스 트리(parse tree/syntax tree)를 생성하는 일련의 과정렌더링 (rendering)HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것브라우저의 렌더링 과정1. 브라우저는 HTML, CSS, 자바..

⭐️ 노션에서 보기SetSet 객체는 중복되지 않는 유일한 값들의 집합배열과 유사하지만, 다음과 같은 차이가 있음| 구분 | 배열 | Set 객체 || --- | --- | --- || 동일한 값을 **중복**하여 포함할 수 있다. | O | X || 요소 **순서**에 의미가 있다. | O | X || **인덱스**로 요소에 접근할 수 있다. | O | X |수학적 집합을 구현하기 위한 자료구조 → 교집합, 합집합, 차집합, 여집합 등 구현 가능Set 객체의 생성Set 생성자 함수로 생성인수를 전달하지 않으면 빈 Set 객체가 생성 const set = new Set(); console.log(set); // Set(0) {}인터러블을 인수로 전달 * 중복된 값은 저장되지 않음 const set..

⭐️ 노션에서 보기디스트럭처링 할당(ES6 도입): 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당필요한 값만 추출하여 변수에 할당할 때 유용배열 디스트럭처링 할당ES5 // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3ES6 const arr = [1, 2, 3]; // ES6 배열 디스트럭처링 할당 // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다. // 이때 할당 기준은 배열의 인덱스다. const [one, ..

⭐️ 노션에서 보기// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)console.log(...[1, 2, 3]); // 1 2 3// 문자열은 이터러블이다.console.log(...'Hello'); // H e l l o// Map과 Set은 이터러블이다.console.log(...new Map([['a', '1'], ['b', '2']])); // [ 'a', '1' ] [ 'b', '2' ]console.log(...new Set([1, 2, 3])); // 1 2 3// 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다.console.log(...{ a: 1, b: 2 });// TypeError: Found non-callable @@ite..

⭐️ 노션에서 보기이터레이션 프로토콜순회 가능한 데이터 컬렉션(자료구조)를 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙 (ES6 도입)순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일→ for…of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화이터러블이터러블 프로토콜을 준수한 객체Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입을 통해 상속 받은 객체 const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function'; // 배열, 문자열, Map, Set 등은 이터러블이다. isIterable([]); ..

⭐️ 노션에서 보기심벌(Symbol)이란?변경 불가능한 원시 타입의 값주로 이름 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용다른 값과 중복되지 않는 유일무이한 값ES6에 도입된 7번째 데이터 타입심벌 값의 생성Symbol 함수를 호출하여 생성 // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); console.log(typeof mySymbol); // symbol // 심벌 값은 외부로 노출되지 않아 확인할 수 없다. console.log(mySymbol); // Symbol()new 연산자와 함꼐 호출하지 않는다.선택적으로 디버깅용 설명 문자열을 인수로 전달 가능 (심벌 값 생성에 어떠한 영향도 주지 않음)..