본문 바로가기

JS31

모던 자바스크립트 Deep Dive - Ajax 43장 Ajax Ajax란? JS를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식. 이전의 웹페이지는 완전한 HTML을 전송받아 전체를 처음부터 다시 렌더링하는 방식으로 동작했음. 이러한 전통 방식은 단점이 있음 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생함. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링함. 이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜박이는 현상이 발생함. 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹됨. Ajax는.. 2024. 2. 14.
모던 자바스크립트 Deep Dive - 비동기 프로그래밍 42장 비동기 프로그래밍 동기 처리와 비동기 처리 함수 호출 → 함수 코드 평가됨 → 함수 실행 컨텍스트 생성됨. 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시됨 → 함수 코드 실행됨 → 함수 코드 실행 종료 → 함수 실행 컨텍스트가 실행 컨텍스트 스택에서 팝되어 제거됨. 42-01 const foo = () => {}; const bar = () => {}; foo(); bar(); JS 엔진은 단 하나의 실행 컨텍스트 스택을 가짐. === 동시에 2개 이상의 함수를 실행할 수 없음. 대기중인 태스크들은 현재 실행중인 실행 컨텍스트가 팝되어 실행 컨텍스트 스택에서 제거되면 === 현재 실행중인 함수가 종료하면 비로소 실행됨. 이처럼 JS 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식.. 2024. 2. 13.
모던 자바스크립트 Deep Dive - 타이머 41장 타이머 호출 스케줄링 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용함. 타이머 함수 setTimeout과 setInterval은 모두 일정 시간이 경과된 이후 콜백 함수가 호출되도록 타이머를 생성함. === 타이머 함수가 생성한 타이머가 만료되면 콜백 함수가 호출됨. JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 두가지 이상의 태스크를 동시에 실행할 수 없음. === 싱글 스레드로 동작함. === 비동기 처리 방식으로 동작함. 타이머 함수 1 ) setTimeout / clearTimeout setTimeout 함수의 콜백함수는 두번째 인수로 전달받은 시간 이후 단 한번 실행되도록 호출 스케줄링됨. const timeou.. 2024. 2. 12.
모던 자바스크립트 Deep Dive - 이벤트 40장 이벤트 이벤트 타입 1 ) 마우스 이벤트 click, dbclick, mousedown, mouseup, mouseenter, mouseover, mouseleave, mouseout 2 ) 키보드 이벤트 keydown, keypress, keyup 3 ) 포커스 이벤트 focus, blur, focusin, focusout 4 ) 폼 이벤트 submit, reset 5 ) 값 변경 이벤트 input, change, readystatechange 6 ) DOM 뮤테이션 이벤트 DOMContentLoaded 7 ) 뷰 이벤트 resize, scroll 8 ) 리소스 이벤트 load, unload, abort, error 이벤트 객체 이벤트가 발생하면 이벤트 객체가 동적으로 생성됨. 생성된 이벤트 객.. 2024. 2. 11.
모던 자바스크립트 Deep Dive - DOM 2 노드 탐색 1 ) 공백 텍스트 노드 HTML 요소 사이의 공백문자는 텍스트 노드를 생성함. 이를 공백 텍스트 노드라고 함. 39-26 Apple Banana Orange 2 ) 자식 노드 탐색 프로퍼티 설명 Node.prototype.childNodes 자식 노드를 모두 탐색하여 DOM 컬렉션 객체인 NodeList에 담아 반환한다. childNodes 프로퍼티가 반환한 NodeList에는 요소 노드뿐만 아니라 텍스트 노드도 포함되어 있을 수 있다. Element.prototype.children 자식 노드 중에서 요소 노드만 모두 탐색하여 DOM 컬렉션 객체인 HTMLCollection에 담아 반환한다. children 프로퍼티가 반환한 HTMLCollection에는 텍스트 노드가 포함되지 않는다. N.. 2024. 2. 10.
모던 자바스크립트 Deep Dive - DOM 1 39장 DOM DOM : HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조. 노드 1 ) HTML 요소와 노드 객체 HTML 요소 : HTML 문서를 구성하는 개별적인 요소. HTML 요소는 렌더링 엔진에 의해 파싱됨. → DOM을 구성하는 요소 노드 객체로 변환됨. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환됨. HTML 문서는 HTML 요소들의 집합으로 이루어지고, 중첩 관계를 가짐. 이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부자 관계가 형성됨. 이러한 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성함... 2024. 2. 9.

티스토리툴바