개발로그
close
프로필 배경
프로필 로고

개발로그

  • 분류 전체보기 (511)
    • JAVA (68)
      • 자바소개 (4)
      • 자바 기본 문법 (22)
      • 객체 지향 프로그래밍 (15)
      • 예외 처리 (9)
      • 스레드 (18)
    • Databases (14)
      • JDBC (13)
      • Hibernate ORM (1)
    • GIT (39)
      • 시작하기 (5)
      • GIT의 기초 (7)
      • Git 브랜치 (6)
      • Git 서버 (7)
      • Git 분산 환경 (6)
      • Git 도구 (8)
    • 알고리즘 (41)
      • 자료구조 (24)
      • 검색 알고리즘 (0)
      • 초급 알고리즘 (17)
      • 중급 알고리즘 (0)
      • 고급 알고리즘 (0)
    • 코딩문제 (35)
    • D3 (47)
      • D3 소개 (2)
      • 시각화 (45)
    • Docker (30)
    • Kubernetes(K8S) (2)
    • 도구 (39)
      • 프리미어프로 (39)
    • 브라우저 (32)
    • JavaScript (79)
    • TypeScript (38)
    • REACT (13)
      • 리액트 학습하기 (13)
      • 리액트 API (0)
      • 리액트 DOM API (0)
    • React Native (19)
    • Electron (15)
    • 인증 (0)
  • 홈
  • 태그
  • 방명록
이벤트 루프와 태스트 분리와 웹 워커를 이용한 병렬 처리

이벤트 루프와 태스트 분리와 웹 워커를 이용한 병렬 처리

이벤트 루프 기본 원리매크로태스크 큐에서 가장 오래된 태스크(예: setTimeout(...,0): 작업을 청크로 분할하여 UI 반응성 유지마이크로태스크를 사용한 비동기 실행queueMicrotask()를 사용하면 마이크로태스크 큐에 함수를 추가할 수 있습니다. 마이크로태스크는 현재 매크로태스크가 완료된 직후, 렌더링 전에 실행되므로 상태 일관성이 보장됩니다. 상태 업데이트 상태 변경 현재 상태: 초기값 웹 워커: 병렬 실행으로 부하 분산만약 아주 무거운 연산이 필요하다면, 웹 워커를 사용하여 별도의 스레드에서 작업을 처리할 수 있습니다. 웹 워커는 메인 스레드와 독립적인 이벤트 루프를 가지며, 메시지를 통해 메인 스레드와 데이터를 주고받을 수 있습니다. 단, 웹 워커는 DOM에 직접 접근할 수 ..

  • format_list_bulleted 브라우저
  • · 2025. 2. 21.
  • textsms
Selection과 Range API로 텍스트 선택 및 조작하기

Selection과 Range API로 텍스트 선택 및 조작하기

Range API: 텍스트 범위 정의와 이해Range는 문서 내에서 선택된 부분을 나타내는 객체로, 두 개의 경계(시작점(startContainer,StartOffset)과 끝점(endContainer, endOffset))를 정의합니다. 안녕하세요, 여러분! 환영합니다. setStart/setEnd: 특정 콘텐츠를 추출할 수 있는 범위 지정toString(): 선택된 텍스트 반환Range 조작: 선택 영역 변경Range API는 선택된 콘텐츠를 조작하는 다양한 메서드를 제공합니다. 선택 영역을 삭제, 삽입, 감싸는 등의 작업을 지원합니다.주요 메서드deleteContents(): 범위 내용 삭제extractContents(): 선택 영역 잘라내기insertNode(): 노드 삽입surro..

  • format_list_bulleted 브라우저
  • · 2025. 2. 21.
  • textsms
MutationObserver로 DOM 변화 실시간 제어하기

MutationObserver로 DOM 변화 실시간 제어하기

MutationObserver의 기본 구조MutationObserver는 바로 이러한 DOM 변화(자식 노드 추가/삭제, 속성 변경, 텍스트 변경 등)를 감지하고 콜백을 실행할 수 있도록 도와주는 내장 객체입니다.const observer = new MutationObserver((mutations, observer) => { // mutations: 변경 내역 배열 // observer: MutationObserver 인스턴스});observer.observe(targetNode, { childList: true, // 자식 노드 변경 감지 subtree: true, // 하위 노드까지 포함 attributes: true, // 속성 변경 감지 charact..

  • format_list_bulleted 브라우저
  • · 2025. 2. 21.
  • textsms
외부 리소스 로딩 감지:onload와 onerror 이벤트

외부 리소스 로딩 감지:onload와 onerror 이벤트

onload와 onerror의 역할onload: 리소스가 성공적으로 로드되고(그리고 실행까지 완료된 후) 발생합니다.onerror: 리소스 로딩 중 문제(네트워크 실패, 잘못된 URL 등)가 발생했을 때 트리거됩니다.동적 스크립트 로딩과 상태 감지외부 스크립트를 동적으로 추가하고, 로딩이 완료된 후 해당 스크립트 내에 정의된 함수를 호출해야 하는 경우가 있습니다. 라이브러리 로딩 중... 기능 실행 onload: Axios 로드 후 버튼 활성화 및 API 요청 가능onerror: 로드 실패 시 사용자 알림 및 버튼 비활성화이미지 로딩 상태 관리이미지 리소스도 onload와 onerror 이벤트를 지원하여 로딩 상태 추적을 할 수 있습니다. 새 Image 객체를 생성해 이미지 로딩 상태를 감지한 후,..

  • format_list_bulleted 브라우저
  • · 2025. 2. 21.
  • textsms
defer와 async로 최적화된 스크립트 로딩

defer와 async로 최적화된 스크립트 로딩

기본 스크립트 태그의 한계HTML 문서를 파싱하던 도중 defer: init.js, feature.js가 백그라운드에서 로드init.js가 먼저 실행 후 feature.js 실행async: 다운로드 완료 즉시 실행async 속성이 붙은 스크립트 역시 백그라운드에서 다운로드되지만, 문서 파싱과는 별개로 다운로드가 완료되는 즉시 실행됩니다.HTML 파싱과 병행되며, 실행 순서는 다운로드 완료 순서에 따라 지기 때문에 여러 async 스크립트가 있다면 실행 순서가 보장되지 않으며, DOMContentLoaded 이벤트와 상관없이 실행될 수 있습니다. 로딩 상태: 대기 중 스크립트 로드 동적으로 추가한 두 스크립트가 async = false로 인해 문서에 추가된 순서대로 실행됩니다.

  • format_list_bulleted 브라우저
  • · 2025. 2. 21.
  • textsms
HTML 문서 생명주기

HTML 문서 생명주기

DOMContentLoaded: DOM 준비 완료DOMConetnLoaded 이벤트는 HTML 문서가 파싱되어 DOM 트리가 완성된 시점에 발생합니다. 외부 자원(이미지, 스타일시트 등)은 아직 로드되지 않았으므로, DOM 조작이나 초기화 작업에 주로 사용됩니다. 로딩 중... DOMContentLoaded: DOM 완성 후 즉시 메시지 변경이미지 로드 전이므로 크기나 상태 정보는 불완전load: 모든 자원 로드 완료load 이벤트는 HTML 문서를 포함하여 이미지, 스타일시트 등 외부 자원까지 모두 불러온 후에 발생합니다. 화면에 표시되는 요소의 최종 상태를 반영해야 할 때 적합합니다. 로드 완료 페이지 내의 이미지와 모든 자원이 완전히 로드된 후, 이미지의 실제 크기를 사..

  • format_list_bulleted 브라우저
  • · 2025. 2. 21.
  • textsms
  • navigate_before
  • 1
  • 2
  • 3
  • 4
  • ···
  • 6
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (511)
    • JAVA (68)
      • 자바소개 (4)
      • 자바 기본 문법 (22)
      • 객체 지향 프로그래밍 (15)
      • 예외 처리 (9)
      • 스레드 (18)
    • Databases (14)
      • JDBC (13)
      • Hibernate ORM (1)
    • GIT (39)
      • 시작하기 (5)
      • GIT의 기초 (7)
      • Git 브랜치 (6)
      • Git 서버 (7)
      • Git 분산 환경 (6)
      • Git 도구 (8)
    • 알고리즘 (41)
      • 자료구조 (24)
      • 검색 알고리즘 (0)
      • 초급 알고리즘 (17)
      • 중급 알고리즘 (0)
      • 고급 알고리즘 (0)
    • 코딩문제 (35)
    • D3 (47)
      • D3 소개 (2)
      • 시각화 (45)
    • Docker (30)
    • Kubernetes(K8S) (2)
    • 도구 (39)
      • 프리미어프로 (39)
    • 브라우저 (32)
    • JavaScript (79)
    • TypeScript (38)
    • REACT (13)
      • 리액트 학습하기 (13)
      • 리액트 API (0)
      • 리액트 DOM API (0)
    • React Native (19)
    • Electron (15)
    • 인증 (0)
최근 글
인기 글
최근 댓글
태그
  • #TypeScript
  • #docker
  • #Javascript
  • #D3
  • #알고리즘
  • #java
  • #코딩문제
  • #프리미어프로
  • #브라우저
  • #git
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바