IT · 인터넷/CS 지식4 주경야독 - Virtual DOM이란? 어제 DOM에 대해서 알아본 김에 이어서 Virtual DOM에 대해서 알아보려 한다.✅ Virtual DOM 렌더링 흐름초기 렌더링 시, 실제 DOM과 Virtual DOM이 동일함 (동일한 DOM과 VDOM이 존재)상태(state) 변화 → 새로운 Virtual DOM 생성 (상태가 변화되면 새로운 VDOM 생성)이전 Virtual DOM과 새 Virtual DOM 비교(diff 알고리즘) (New VDOM과 DOM 비교, 이 때 diff알고리즘)바뀐 부분만 실제 DOM에 적용 (patch 과정)브라우저는 최소한의✅ Virtual DOM이 필요한 이유1. DOM 변경 시 렌더링 엔진이 layout → paint 등의 무거운 작업을 수행 (reflow/paint만 수행 → 성능 향상)2. 너무 자주 업.. IT · 인터넷/CS 지식 2025. 4. 11. 주경야독 - DOM 이란? 그리고 특징은? DOM (Document Object Model) 이란?HTML을 객체(트리 구조)로 표현한 것이다.🤔 왜 멀쩡한 HTML을 굳이 트리구조로 표현할까?브라우저가 HTML문서를 조작하고 싶은데 HTML 그 자체로는 조작이 불가능해그래서 HTML -> DOM 으로 파싱해서 DOM 을 조작하는거야.DOM의 특징1. 트리구조2. 모든 요소가 노드로 구성되어 있다.3. JavaScript로 조작할 수 있다. (동적 웹사이트) IT · 인터넷/CS 지식 2025. 4. 9. 주경야독 - 브라우저의 렌더링 과정 HTML 파싱 → DOM 트리 생성 : JS가 다룰수 있게 된다.CSS 파싱 → CSSOM 트리 생성DOM + CSSOM → Render Tree 생성Layout (Reflow) : 각 요소의 정확한 위치와 크기를 계산Paint IT · 인터넷/CS 지식 2025. 4. 8. 주경야독 - CORS 정책 위반 이슈 우선 이 정책을 이해하려면 SOP에 대해 알아야 한다.✅ SOP : Same-Origin Policy(동일 출처 정책) 웹 브라우저에서 서로 다른 출처의 접근을 허용하지 않는 정책이다.다르게 말하면 동일한 출처끼리의 접근만 허용하는 정책이다. (난 이말이 더 이해하기 편했다.)출처란 프로토콜(http, https), 도메인, 포트번호 이 3가지의 조합을 의미한다.http:www.naver.com:8080 따라서 이 출처가 같아야만 리소스를 공유한다. http:www.naver.com:8080 과 http:www.naver.com:1010은 출처가 달라 리소스를 공유할 수 없다.⭐ 출처가 다르면 리소스를 공유할 수 없는 것이 웹 브라우저의 규칙임을 알아두자.✅ CORS : Cross-Origin Resou.. IT · 인터넷/CS 지식 2025. 4. 7. 이전 1 다음
