js23 [JS Deep Dive] 40. Event Part 2 40.5) 이벤트 객체 이벤트가 발생하면 이벤트에 관련된 다양한 정보를 담고 있는 '이벤트 객체'가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다. 클릭하세요. 클릭한 곳의 좌표가 표시됩니다. 위 예제에서는 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달되어 매개변수 e에 암묵적으로 할당됨을 알 수 있다. (이는 브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인수로 전달받기 때문이다.) 따라서 이벤트 객체를 전달받으려면 이벤트 핸들러를 정의할 때 이벤트 객체를 전달받을 매개변수를 명시적으로 선언해야 한다. ⭐️ 이벤트 핸들러 어트리뷰트 방식으로 이벤트 핸들러를 등록했다면 다음과 같이 event를 통해 이벤트 객체를 전달받을 수 있다... 2023. 3. 6. [JS Deep Dive] 40. Event 40.1) Event Driven Programming 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. ex) 클릭, 키보드 입력, 마우스 이동 등 만약에 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려서 호출을 위임하는데, 이때 '이벤트가 발생했을 때 호출될 함수'를 이벤트 핸들러(Event Handler)라고 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 즉, 함수를 언제 호출할지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라 브라우저에게 함수 호출을 위임하는 것이다. Window.. 2023. 3. 1. [JS Deep Dive] 39. DOM 39.0) DOM(Document Object Model) 이란 ? DOM(Document Object Model): 브라우저의 HTML 문서 파싱의 결과물이자, HTML 문서의 ‘계층적 구조’와 ‘정보’를 표현하며 이를 제어할 수 있는 “DOM API”를 제공하는 Tree 자료구조. 39.1) 노드 39.1.1 HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 어튜리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 문서는 HTML 요소들의 집합으로 이루어지며, 이들은 중첩 관계를 가지고 이로 인해 부자 관계가 형성된다. .. 2023. 3. 1. [JS Deep Dive] 38. 브라우저의 렌더링 과정 38.0) 서론 구글의 V8 자바스크립트 엔진으로 빌드된 JS 런타임 환경인 ‘Node.js’의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션에서도 사용할 수 있는 범용 개발 언어가 되었다. 하지만 JS가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션의 클라이언트 사이드이다. 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 JS 프로그래밍이 가능하다. 이를 위해서 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 해석(Parsing)하여 브라우저에 렌더링하는지 살펴보자 ! 💡 파싱(Parsing) : 작성된 텍스트 문서를 읽어서 실행하기 위해 텍스트 문서.. 2023. 3. 1. [JS] Module의 개념 및 import/export 정리 Javascript Module 이란? 개발을 하면서 애플리케이션의 규모가 커지다보면 파일을 여러 개로 분리해야 하는 시점이 오는데, 이때 분리된 파일 각각을 모듈(Module)이라고 부릅니다. 모듈은 대부분 하나의 Class나 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈은 하나의 파일, 하나의 스크립트라고 할 수 있는데, 모듈에 import/export를 적용하면 다른 모듈을 불러와서 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다. 모듈은 크게 두 종류로 나뉩니다. 복수의 함수가 있는 라이브러리 형태의 모듈 개체 하나만 선언되어있는 모듈 대개는 두 번째 방식으로 모듈을 만드는 걸 선호하기 때문에 함수, 클래스, 변수 등의 개체는 전용 모듈 안에 구현됩니다.. 2023. 2. 9. 이전 1 2 3 4 다음
