본문 바로가기

Frontend/JavaScript47

27. 이벤트 이벤트 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다. 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 이벤트 타입 마우스 이벤트 → click, dblclick, mousedown, mouseup, mouseenter(버블링 x), mouseover(버블링), mouseleave(버블링 x), mouseout(버블링) 키보드 이벤트 → keydown(모든 키를 눌렀을 때 발생. 단 문자, 숫자, 특수 문자, enter 키를 눌렀을 때는 연속적으로 발생하지만 그 외의 키를 눌.. 2023. 12. 23.
26. DOM Document Object Model DOM DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 노드 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다. 트리 자료구조 트리 자료구조는 노드들의 계층 구조로 이뤄진다. 트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조다. 루트 노드(최상위 노드로 부모 노드가 없다.), 리프 노드(자식 노드가 없는 노드). 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. 노드 객체의 종류(노드 타입) 문서 노드 : DOM 트리의 최상위에 존.. 2023. 12. 23.
25. 브라우저의 렌더링 과정 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발 언어가 되었다. 하지만 여전히 자바스크립트가 가장 많이 사용되는 분야는 웹페이지/애플리케이션의 클라이언트 사이드다. 브라우저는 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 파싱하여 브라우저에 렌더링 한다. 파싱 : 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조를 생성하는 과정을 말한다. 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다. 렌더링 : 문서를 파싱하여 브라우저에 시각적으로 출력하는 것. 브라우저의 렌더링.. 2023. 12. 22.
24. Set 과 Map 1️⃣ Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. 배열과 유사하지만 동일한 값을 중복하여 포함할 수 없으며 순서, 인덱스가 없다. Set은 수학적 집합을 구현하기 위한 자료구조다. Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 요소 개수 확인 : Set.prototype.size 프로퍼티 사용. size 프로퍼티에 숫자를 할당하여 요소 개수를 변경할 수 없다. 요소 추가 : Set.prototype.add → 새로운 요소가 추가된 Set 객체를 반환하기 때문에 add 메서드를 호출한 후에 add 메서드를 연속적으로 호출할 수 있다. Set 객체는 객체나 배열과 같이 자바스크립트의 모든 값을 요소로 저장할 수 있다. 요소 존재 여부 확인 : Set.prototy.. 2023. 12. 22.
23. 스프레드 문법과 디스트럭처링 1️⃣ 스프레드 문법 스프레드 문법 …은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 for…of 문으로 순회할 수 있는 이터러블에 한정된다. Rest 파라미터와 스프레드 문법은 서로 반대의 개념이다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 이름 앞에 …을 붙이는 것이다. (Rest 파라미터는 인수들의 목록을 배열로 전달받는다.) 스프레드 문법은 여러 개의 값이 하나로 뭉쳐 있는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것이다. ( 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만든다.) 배열 리터럴 내부에서 사용하는 경우 (기존의 방식들을⬇️ 대신.. 2023. 12. 22.
22. Symbol 과 이터러블 Symbol 심벌 값은 다른 값과 중복되지 않는 유일무이한 값. 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용. 프로퍼티 키로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 심벌 값이다. Symbol 함수에는 선택적으로 문자열을 인수로 전달할 수 있다. 이 문자열은 생성된 심벌 값에 대한 설명으로 디버깅 용도로만 사용되며, 심벌 값 생성에 어떠한 영향도 주지 않는다. Symbol.for 메서드는 인수로 전달받은 문자열을 키로 사용하여 키와 심벌 값의 쌍들이 저장되어 있는 전역 심벌 레지스트리에서 해당 키와 일치하는 심벌 값을 검색한다. 검색에 성공하면 새로운 심벌 값을 생성하지 않고 검색된 심벌 값을 반환한다. 검색에 실패하면 새로운 심벌 값을 생성하여 Symbol.for.. 2023. 12. 22.

티스토리툴바