NodeJS Fundamentals: DOM 요약
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, 웹 애플리케이션 개발자, 성능 최적화 담당자
핵심 요약
- DOM 조작 최적화:
createDocumentFragment()사용으로 레이아웃 재계산(reflow) 및 재그리드(repaint) 최소화 - 가상 DOM(Virtual DOM): React, Vue의 가상 DOM 비교 알고리즘으로 직접적인 DOM 조작 감소
- 보안 고려사항: XSS 방지 위해
DOMPurify사용,Content Security Policy(CSP)적용
섹션별 세부 요약
1. DOM 기본 개념
- DOM은 HTML, XML, SVG 문서를 트리 구조로 표현하는 인터페이스
document객체를 통해 DOM 접근 가능- W3C Living Standard에 정의됨
- 브라우저별 DOM API 지원 차이 존재 (예:
isConnected(),getRootNode()지원 여부)
2. 성능 최적화 전략
- Reflow/Repaint 최소화:
- createDocumentFragment()로 DOM 조작 일괄 처리
- CSS Transform 사용 (레이아웃 변경 속성 대체)
- 가상 DOM 활용:
- React/Vue의 가상 DOM 비교 알고리즘으로 최소한의 DOM 변경 적용
- Svelte의 빌드 시 최적화
3. 보안 및 테스트
- XSS 방지:
- 사용자 입력 데이터 삽입 시 DOMPurify 사용
- Content Security Policy(CSP) 설정으로 외부 리소스 제한
- 테스트 도구:
- Jest + jsdom으로 DOM 기능 단위 테스트
- Playwright/Cypress로 실제 브라우저 환경 통합 테스트
4. 성능 분석 및 최적화
- 프로파일링:
- 브라우저 DevTools의 Performance 탭 활용
- Lighthouse로 성능 점수 분석
- Web Workers 활용:
- 복잡한 계산 작업을 메인 스레드에서 분리
결론
- 실무 팁:
createDocumentFragment()로 조작 일괄 처리, 가상 DOM 활용, CSP 설정,DOMPurify사용 - 예제:
updateTableBody()함수에서createDocumentFragment()로 레이아웃 재계산 최소화 - 성능 향상: 가상 DOM의 diff 알고리즘으로 직접 조작 감소,
Web Workers로 CPU 집약적 작업 분리