개발개굴🐸

이벤트 드리븐 프로그래밍 브라우저는 처리해야 할 특정 사건(클릭, 키보드 입력, 마우스 이동 등)이 발생하면 이를 감지하여 이벤트를 발생시킵니다. 이때, 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임합니다. 이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 Click me! 위 예제와 같이 브라우저는 사용자의 사건(클릭)을 감지하여 이벤트를 발생시키고 이벤트 핸들러를 호출하도록 이벤트 핸들러 등록을 할 수 있습니다. 즉, 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용..

브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성합니다. 이때 생성되는 DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API(프로퍼티와 메서드)를 제공하는 트리 자료구조입니다. 노드 HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미합니다. 이러한 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됩니다. 이때, HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환됩니다. HTML 문서는 중첩 관계를 가지는 HTML 요소들의 집합(텍스트 뿐만 아니라 다른 HTML 요..

자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드입니다. 따라서 대부분의 프로그래밍 언어는 OS나 VM위에서 실행되는 반면 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행되기 때문에 브라우저 환경을 고려할 때 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능합니다. 브라우저는 HTML, CSS, JS로 작성된 텍스트 문서를 파싱(해석)하여 브라우저에 렌더링합니다. 파싱 : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정 렌더링 : HTML, CSS, JS로 작성된 ..

Set Set 객체는 중복되지 않는 유일한 값들의 집합으로, 배열과 유사하지만 다음과 같은 차이가 있습니다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 이처럼 Set 객체의 특성은 수학적 집합의 특정과 일치하며 Set은 수학적 집합을 구현하기 위한 자료구조임을 알 수 있습니다. 따라서 Set 을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있습니다. Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성합니다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성 Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성함 인수로 전달받은 이터러블의 중복된 값은 S..

디스트럭처링 할당(destructuring assignment, 구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용합니다. 배열 디스트럭처링 할당 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당할 때, 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스입니다. // ES6 const arr = [1, 2, 3]; // ES6 배열 디스트럭처링 할당 // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다. // ..

ES6에서 도입된 스프레드 문법(spread syntax, 전개 문법) ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듭니다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for ... of 문으로 순회할 수 있는 이터러블에 한정됩니다. // ...[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(..

이터레이션 프로토콜(iteration protocol) ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙입니다. ES6 이전의 순회 가능한 데이터 컬렉션(배열, 문자열, 유사 배열 객체, DOM 컬렉션 등)은 통일된 규약 없이 각자 나름의 구조를 가지고 for 문, for ... in 문, forEach 메서드 등 다양한 방법으로 순회할 수 있었음 ES6에서 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 이터레이션 프로토콜에서는 이터러블 프로토콜과 이터레이터 프로토콜이 있습니다. ..

심벌이란? 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값입니다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용 프로퍼티 키로 사용할 수 있는 값은 빈 무자열을 포함한 모든 문자열 또는 심벌 값 *ES6 이전엔 6가지 타입 (문자열, 숫자, 불리언, undefined, null, 객체)이 있었음 심벌 값의 생성 Symbol 함수 심벌 값은 Symbol 함수를 호출하여 생성합니다. (다른 원시값의 값은 리터럴 표기법을 통해 값을 생성할 수 있음) 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값입니다. // Symbol 함수를 호출하여 유일무이한..