Web 웹 개발자 기본기! 자바스크립트의 숨겨진 기능 쉐도우 돔. (A hidden feature of JavaScript Shado…
페이지 정보
본문
안녕하세요. 엔지엠소프트웨어입니다. 다들 한번쯤은 들어본 쉐도우 돔에 대해서 알려드릴텐데요. DOM(Document Object Model)은 웹 개발자라면 모를수가 없는 아주 중요한 개념입니다. 보통 돔이라고 읽지만, 문서상으로는 문서 객체 모델이라고 표현합니다. 아무튼~ 웹은 HTML로 이루어져 있는데요. HTML은 BOM(Browser Object Model)으로 이루어져 있습니다. DOM은 BOM의 하위 오브젝트들을 나타냅니다. 흔히 사용하는 window 객체는 BOM의 최상위 객체입니다. 여기서부터 노드를 타고 내려가면서 원하는 엘리먼트에 접근할 수 있게됩니다. 기본적인 내용은 이렇구요. 자바스크립트에는 깊이있게 알 필요는 없지만~ 알아두면 좋은 몇몇 기능들이 존재합니다. 그중에 하나가 오늘 소개해드릴 쉐도우 돔(Shadow DOM)입니다. 아래와 같이 코드를 작성해줍니다.
<html>
<head>
<title>Welcome to NGMsoftware!</title>
<head>
<body>
<input type="range" />
</body>
</html>
이 코드를 실행하면 아래와 같은 모양을 볼 수 있죠? 트레킹바가 하나 추가 되었습니다. 근데~ 기본적으로 HTML에서는 이런 컨트롤을 제공하지 않습니다. 이런 컨트롤들이 자동으로 만들어지는 이유는 쉐도우 돔이라는 기술을 사용했기 때문입니다. 그러면, 이게 어떻게 가능한지 확인을 해봐야겠죠?
아래와 같이 개발자 도구를 실행(F12) 해보세요.
그냥 단순한 인풋 태그로 보여집니다. 아래 동영상을 참고해서 설정에 "Show user agent shadow DOM"에 체크 해줍니다. 아마, 웹개발자 분들은 이미 다 체크가 되어 있을겁니다. 처음 웹을 접하시는 분들은 참고하시면 좋을거 같아요. 아무튼, 체크하고, 우측 상단에 X를 눌러서 닫으면 인풋 태그의 실제 내용을 확인할 수 있게됩니다.
이 기술은 웹 컴포넌트의 복잡한 내용 또는 숨기고 싶은 내용을 캡슐화 할 수 있습니다. 우리가 C#이나 Java할 때 이미 캡슐화에 대해서는 학습했기 때문에 잘 알고 있을겁니다. OOP의 핵심 이론중에 하나니까요. 쉐도움 돔은 마크업 구조와 스타일 그리고 동작을 페이지 내의 다른 코드와 분리하고 숨긴채로 유지하여 복잡한 업무 환경에서 서로 충돌하지 않으며 코드가 단순화되어 가독성을 높여줍니다. 물론, 컴포넌트에 버그가 있으면... 수정하기가 까다롭긴 하지만요^^; 이건 다른 언어도 동일하게 겪는 문제이니 논외로 합시다.
래인지 인풋 태그는 3개의 디브(Div)로 이루어져 있습니다. 이런식으로 만드는 기술을 쉐도우 돔이라고 부릅니다. 이렇게 컴포넌트를 만들면 여러가지 이점이 존재합니다. 위에서도 언급했듯이 불필요하게 해석해야 할 기능들을 숨기고, 빠르게 개발할 수 있도록 해줍니다. 쉐도우 돔으로 만들어진 컴포넌트를 잘 사용하면 개발자들에게 편리하겠죠? 언젠가 기회가 되면 쉐도우 돔을 어떻게 만드는지도 자세하게 한번 알아보도록 할께요~
※ Firefox (63 and onwards), Chrome, Opera, Safari에서 기본 지원하고, 새로운 Chromium 기반의 Edge (75 and onwards) 또한 지원하고 있습니다. 그러나, 구버전의 Edge 는 지원하지 않습니다.
개발자에게 후원하기
추천, 구독, 홍보 꼭~ 부탁드립니다.
여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~
감사합니다~
- 이전글vdproj는 VS 2022 에서 지원되지 않습니다. (vdproj is not supported in VS 2022.) 21.10.17
- 다음글머신 러닝 5부 - 욜로 딥러닝을 이용한 매이플 오토룬 풀기. 21.10.11
댓글목록
등록된 댓글이 없습니다.