javascript18 [Javascript - 성능] DOM 렌더링 방식에 따른 성능 비교해보기 - 2 append / appendChild / DocumentFragmenet 성능 비교 테스트에 사용되는 코드더보기 😎 지난 결론 다시보기반복문 내에서 appendChild 호출을 통해 DOM 트리를 수정하더라도 즉시 리플로우(레이아웃)이 발생하지 않고 반복문이 종료된 후에 한번만 리플로우가 발생하였다. 이전에는 DOM 트리가 변경될 때마다 매번 리플로우가 발생해서 성능에 좋지 않은 영향을 주기 때문에, 변경사항을 최대한 줄일 수 있도록 해야 한다고 알아왔었다 위의 결과에서 알 수 있듯이 브라우저는 DOM 변경 사항에 대해서 기록만 하고 있다가 자바스크립트의 실행이 종료된 후 한번에 결과를 리플로우하도록 최적화를 하고 있다. 🎈 리플로우 발생 시점리플로우가 발생하는 시점은 다음과 같다. 크게 .. 2025. 6. 29. [Javascript - 성능] DOM 렌더링 방식에 따른 성능 비교해보기 - 1 ✅ DocumentFragment이란?DocumentFragment란 Dom 노드를 임시로 구성할 수 있는 가벼운 컨테이너이다. Document와는 달리 DocumentFragment는 메모리상에서만 존재하지 때문에 DocumentFragment로 구성된 트리를 변경하더라도 리플로우가 발생하지 않는다. 이러한 특징을 가진 DocumentFragment를 활용해서 DocumentFragment의 트리에서 DOM 조작을 완료한 후 한번에 실제 DOM에 적용함으로써 리플로우를 최소하하여 성능을 향상시킬 수 있다고 알고있었다. 그래서 이번에 실제로 DocumentFragment를 활용하는 방법과 일반적인 append 메서드를 활용하는 방법의 속도차이를 알아보려고 한다. 💾 예제DOM을 조작하는 예제는 다음과.. 2025. 6. 22. [Javascript] Tailwind와 함께 다크모드 구현 최신 브라우저에서는 다크모드 구현을 위한 기능들을 제공하고 있다. 그래서 간편하게 다크모드 기능을 구현할 수 있다. 다크모드 구현에 앞서 알아야 할 내용부터 정리를 해보자. ✅ color-schemeMDN에서는 color-scheme을 사용하면 해당하는 색채 조합으로 웹페이지를 렌더링해준다고 설명하고 있다. 좀 더 쉽게 설명하면 light 또는 dark 로 설정된 값에 맞추어 시스템 전반에, 설정한 컬러 조합으로 렌더링해주는 것이다. 즉, color-scheme만 사용하면 간단하게 다크모드를 구현할 수 있다. 아래는 다크 테마를 적용한 예시이다. 해당 웹페이지는 다크 테마를 사용하겠다는 것을 브라우저에게 알려주는 내용이다. 그럼 브라우저는 다크 테마에 해당하는 컬러를 조합해서 각 요소들을 렌더링해준다. .. 2025. 5. 17. [Javascript] 원시타입에 전개연산자 사용 객체 또는 배열에 전개 연산자를 사용해서 쉽게 병합 또는 복사할 수 있는 기능을 제공한다. 🎈 원시타입값을 객체에 전개 연산자 사용아래와 같이 원시 타입의 값을 전개연산자를 사용하면 어떻게 될까? const obj = { ...1, ...'', ...undefined, ...null} 처음에는 오류가 날 것으로 생각하였다. 하지만 객체에 원시값을 전개 연산자를 사용하더라도 오류가 나지 않고 값이 무시된다. 빈 객체가 생성되는 것을 확인할 수 있다.console.log(obj); // {} 이걸 알기 전에는 오류가 날 것이라 생각해서 전개 연산자를 사용할 땐 값이 없는 경우도 존재한다면, 빈 객체로 초기화를 하도록 코드를 작성하였다. 아래의 예제 처럼 조건에 따라 병합 여부를 결정하는 경우에 조.. 2025. 4. 27. [Javascript] 소수점 표현 자바스크립트에서는 정수와 실수에 대해서 분리하지 않고 오로지 number 타입만 가지고 있다. 즉, 모든 숫자는 실수라고 생각하면 된다. 🎈 실수의 계산정수값에 대한 계산은 오차가 발생하지 않는다. 아래와 같이 1 더하기 1은 항상 2가 나온다. 절대 3이 나올 수 없다.1 + 1 === 2 // true 하지만 실수값에 대한 계산은 우리가 생각하는 값과 차이가 존재한다. 현실세계에서 아래와 같이 0.1과 0.2를 더하면 누구나 0.3이라고 대답할 것이다. 하지만 자바스크립트로 아래의 코드를 실행해보면 false가 나오는 것을 확인할 수 있다.0.1 + 0.2 === 0.3 // false 이는 소수의 표현 방식이 우리와 다르기 때문이다.컴퓨터는 2진법을 사용한다.10진법의 소수 중 일부는 2진법 변.. 2025. 4. 11. [Javascript] 클립보드 🎈 Document.execCommand예전에는 Document.execCommand 메서드를 사용해서 복사 및 붙여넣기 기능을 사용하였다. 아래는 복사 버튼을 클릭 시, id가 email인 태그의 값을 복사하는 기능이다. email@email.com 복사 Document.execCommand 메서드를 활용해서 다음과 같이 복사 기능을 사용할 수 있다. 복사 버튼 클릭 후 붙여넣기 기능을 수행하면 email@email.com가 클립보드에 정상적으로 복사된 것을 확인할 수 있다. 📯 Document.execCommand의 문제점 첫번째, Dom을 대상으로만 사용이 가능하다. 위의 코드를 보면 알 수 있듯이, Dom이 선택 된 상태에서만 가능하기 때문에 강제로 선택상태로 만든 후 복사가 완료되면 선.. 2025. 4. 6. 이전 1 2 3 다음
