📌 기술 면접 준비 관련_DOM

Q : innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해 주세요.

A : 두가지의 메서드는 DOM에서 요소의 콘텐츠를 조작하는 데 사용되는 두 가지 메서드입니다.

innnerHTML은 HTML 콘텐츠를 다루고 HTML을 파싱하므로 XSS 공격에 노출될 수 있습니다. textContent는 텍스트 콘텐츠만을 다루고 HTML파싱하지 않으므로 XSS 공격에 안전하며, 텍스트만 다루기 때문에 더 튼튼한 방법입니다.

innerHTML
: 요소 내에서 HTML과 XML 모두 의미

innerText
: 요소 내에서 사용자에게 보여지는 text만 의미

textContent
: < script >, < style >와 상관없이 해당 노드가 가지고 있는 text를 의미

---

Q : event.preventDefault 메서드는 언제, 왜 사용하는지 설명해 주세요.

A : 해당 메서드는 이벤트가 발생하였을 때 기본 동작(폼 제출, 링크 클릭시 페이지 이동 방지)을 막고, 대신에 프로그래머가 정의한 동작을 실행하도록 하는 메서드입니다. 주로 폼 제출 방지나 링크 클릭시 페이지 이동 방지 등에 사용되며, 사용자 정의 로직을 적용할 때 유용합니다.

---

Q : Real DOM과 Virtual DOM의 차이를 설명하세요

A : Real DOM은 직접 브라우저의 메모리에 존재하는 실제 HTML 나타내고 직접 조작하고, Virtual DOM은 메모리에 가상으로 존재하는 실제 DOM의 가상본이며, 변경 사항이 발생할 때마다 실제 DOM과 비교하여 최소한의 조작만을 수행하여 성능을 향상 시킵니다.

Virtual DOM을 사용함으로서 성능 최적화와 코드 유지보수 용이성을 높일 수 있으며 복잡한 웹 애플리케이션에서 화면 업데이트 및 관리를 효과적으로 다룰 수 있도록 도와줍니다.

---

Q : Shadow DOM의 개념과 브라우저 렌더링이랑 어떤 연관이 있나요?

A : Shadow DOM은 웹 컴포넌트의 스코프를 지정하기 위한 웹 표준 기술 중하나입니다. 웹 컴포넌트는 웹 애플리케이션에서 재사용 가능한 독릭접인 부분들을 나타내는데 사용되며, Shadow DOM은 이러한 컴포넌트의 스타일과 논리를 캡슐화하고 분리하기 위해 도입되었습니다.

Shadow DOM을 사용하면 컴포넌트 간의 스타일 충돌을 방지하고, 렌더링을 캡슐화하여 웹 애플리케이션의 모듈성과 유지보수성을 높일 수 있습니다.