분류 전체보기46 [JS] 타이머 📌 호출 스케줄링호출 스케줄링(Scheduling a Call): 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 타이머 함수를 이용해 함수 호출을 예약하는 것타이머를 생성할 수 있는 타이머 함수: setTimeout, setInterval타이머를 제거할 수 있는 타이머 함수: clearTimeout, clearInterval타이머 함수 setTimeout과 setInterval이 생성한 타이머가 만료되면 콜백 함수가 호출됨setTimeout 함수가 생성한 타이머는 단 한 번 동작하고, setInterval 함수가 생성한 타이머는 반복 동작함자바스크립트 엔진은 싱글 스레드(single thread)로 동작하기 때문에 타이머 함수 setTimeout과 setInterval은 비동기(.. 2024. 9. 20. [JS] 이벤트 📌 이벤트 드리븐 프로그래밍이벤트 핸들러(event handler): 이벤트가 발생했을 때 호출될 함수이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것이벤트 드리븐 프로글래밍(event-driven programming): 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식. 이벤트와 그에 대응하는 함수를 통해 사용자와 애플리케이션은 상호작용 할 수 있음 📌 이벤트 타입이벤트 타입(event type): 이벤트의 종류를 나타내는 문자열 마우스 이벤트이벤트 타입이벤트 발생 시점click마우스 버튼을 클릭했을 때dbclick마우스 버튼을 더블 클릭했을 때mousedown마우스 버튼을 눌렀을 때mouseup누르고 있던 마우스 버튼을 놓았을 때mousemove.. 2024. 9. 7. [JS] DOM 📌 DOMDOM(Document Object Model): HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조노드 객체들로 구성된 트리 자료구조 📌 노드HTML 요소와 노드 객체HTML 요소: HTML 문서를 구성하는 개별적인 요소HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨HTML 문서는 HTML 요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 가짐HTML 요소 간에는 중첩 관계에 의해 계층적인 부자(parent-child) 관계가 형성됨HTML 요소 간의 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성함트리 .. 2024. 8. 26. [JS] 브라우저의 렌더링 과정 📌 브라우저의 렌더링 과정 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성함브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행함이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있으며, 변경된 DOM이나 CSSOM은 다시 렌더 트리로 결합됨렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 계산된 레이아웃을 기반으로 HTML 요소를 .. 2024. 8. 19. 이전 1 2 3 4 5 6 ··· 12 다음
