이벤트 루프 기본 원리매크로태스크 큐에서 가장 오래된 태스크(예: setTimeout(...,0): 작업을 청크로 분할하여 UI 반응성 유지마이크로태스크를 사용한 비동기 실행queueMicrotask()를 사용하면 마이크로태스크 큐에 함수를 추가할 수 있습니다. 마이크로태스크는 현재 매크로태스크가 완료된 직후, 렌더링 전에 실행되므로 상태 일관성이 보장됩니다. 상태 업데이트 상태 변경 현재 상태: 초기값 웹 워커: 병렬 실행으로 부하 분산만약 아주 무거운 연산이 필요하다면, 웹 워커를 사용하여 별도의 스레드에서 작업을 처리할 수 있습니다. 웹 워커는 메인 스레드와 독립적인 이벤트 루프를 가지며, 메시지를 통해 메인 스레드와 데이터를 주고받을 수 있습니다. 단, 웹 워커는 DOM에 직접 접근할 수 ..
Range API: 텍스트 범위 정의와 이해Range는 문서 내에서 선택된 부분을 나타내는 객체로, 두 개의 경계(시작점(startContainer,StartOffset)과 끝점(endContainer, endOffset))를 정의합니다. 안녕하세요, 여러분! 환영합니다. setStart/setEnd: 특정 콘텐츠를 추출할 수 있는 범위 지정toString(): 선택된 텍스트 반환Range 조작: 선택 영역 변경Range API는 선택된 콘텐츠를 조작하는 다양한 메서드를 제공합니다. 선택 영역을 삭제, 삽입, 감싸는 등의 작업을 지원합니다.주요 메서드deleteContents(): 범위 내용 삭제extractContents(): 선택 영역 잘라내기insertNode(): 노드 삽입surro..
MutationObserver의 기본 구조MutationObserver는 바로 이러한 DOM 변화(자식 노드 추가/삭제, 속성 변경, 텍스트 변경 등)를 감지하고 콜백을 실행할 수 있도록 도와주는 내장 객체입니다.const observer = new MutationObserver((mutations, observer) => { // mutations: 변경 내역 배열 // observer: MutationObserver 인스턴스});observer.observe(targetNode, { childList: true, // 자식 노드 변경 감지 subtree: true, // 하위 노드까지 포함 attributes: true, // 속성 변경 감지 charact..
onload와 onerror의 역할onload: 리소스가 성공적으로 로드되고(그리고 실행까지 완료된 후) 발생합니다.onerror: 리소스 로딩 중 문제(네트워크 실패, 잘못된 URL 등)가 발생했을 때 트리거됩니다.동적 스크립트 로딩과 상태 감지외부 스크립트를 동적으로 추가하고, 로딩이 완료된 후 해당 스크립트 내에 정의된 함수를 호출해야 하는 경우가 있습니다. 라이브러리 로딩 중... 기능 실행 onload: Axios 로드 후 버튼 활성화 및 API 요청 가능onerror: 로드 실패 시 사용자 알림 및 버튼 비활성화이미지 로딩 상태 관리이미지 리소스도 onload와 onerror 이벤트를 지원하여 로딩 상태 추적을 할 수 있습니다. 새 Image 객체를 생성해 이미지 로딩 상태를 감지한 후,..
기본 스크립트 태그의 한계HTML 문서를 파싱하던 도중 defer: init.js, feature.js가 백그라운드에서 로드init.js가 먼저 실행 후 feature.js 실행async: 다운로드 완료 즉시 실행async 속성이 붙은 스크립트 역시 백그라운드에서 다운로드되지만, 문서 파싱과는 별개로 다운로드가 완료되는 즉시 실행됩니다.HTML 파싱과 병행되며, 실행 순서는 다운로드 완료 순서에 따라 지기 때문에 여러 async 스크립트가 있다면 실행 순서가 보장되지 않으며, DOMContentLoaded 이벤트와 상관없이 실행될 수 있습니다. 로딩 상태: 대기 중 스크립트 로드 동적으로 추가한 두 스크립트가 async = false로 인해 문서에 추가된 순서대로 실행됩니다.
DOMContentLoaded: DOM 준비 완료DOMConetnLoaded 이벤트는 HTML 문서가 파싱되어 DOM 트리가 완성된 시점에 발생합니다. 외부 자원(이미지, 스타일시트 등)은 아직 로드되지 않았으므로, DOM 조작이나 초기화 작업에 주로 사용됩니다. 로딩 중... DOMContentLoaded: DOM 완성 후 즉시 메시지 변경이미지 로드 전이므로 크기나 상태 정보는 불완전load: 모든 자원 로드 완료load 이벤트는 HTML 문서를 포함하여 이미지, 스타일시트 등 외부 자원까지 모두 불러온 후에 발생합니다. 화면에 표시되는 요소의 최종 상태를 반영해야 할 때 적합합니다. 로드 완료 페이지 내의 이미지와 모든 자원이 완전히 로드된 후, 이미지의 실제 크기를 사..