본문 바로가기

이미지 매크로

웹 개발자 기본기! 자바스크립트의 숨겨진 기능 쉐도우 돔. (A hidden feature of JavaScript Shadow DOM.)

반응형

무료 매크로 프로그램 다운로드

http://ngmsoftware.com/bbs/board.php?bo_table=product1&wr_id=32 

 

엔지엠소프트웨어

엔지엠 매크로는 복잡한 반복작업을 자동화할 수 있습니다. PC 게임, 모바일 게임을 최적으로 지원하며 모든 PC 프로그램 및 업무에 적용할 수 있습니다.

www.ngmsoftware.com

#매크로 #매크로프로그램 #메크로 #g매크로 #마우스매크로 #키보드매크로 #엑셀매크로 #키매크로 #수강신청매크로 #로지텍마우스매크로 #매크로키보드 #파이썬매크로 #매크로뜻 #매크로마우스 #로지텍매크로 #ld플레이어매크로 #오토마우스매크로 #키보드마우스매크로 #오토핫키매크로 #이미지매크로 #이미지인식매크로 #하드웨어매크로 #화면인식매크로 #선착순구매매크로 #이미지서치매크로 #한글매크로


 

안녕하세요. 엔지엠소프트웨어입니다. 다들 한번쯤은 들어본 쉐도우 돔에 대해서 알려드릴텐데요. 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 는 지원하지 않습니다.


[ 초보자도 쉽게 따라할 수 있는 기초 학습 강좌 보기 ]

 

원본 글 보기

http://ngmsoftware.com/bbs/board.php?bo_table=tip_and_tech 

 

엔지엠소프트웨어

엔지엠 매크로는 복잡한 반복작업을 자동화할 수 있습니다. PC 게임, 모바일 게임을 최적으로 지원하며 모든 PC 프로그램 및 업무에 적용할 수 있습니다.

www.ngmsoftware.com

#비활성매크로 #g102매크로 #철권매크로 #레이저마우스매크로 #ghub매크로 #녹화매크로 #키보드반복매크로 #로지텍마우스광클매크로 #플라스크매크로 #윈도우매크로 #비활성g매크로 #오토매크로 #자동사냥 #주식매크로 #오토핫키키보드 #오토핫키마우스 #오토핫키이미지 #지존오토 #기계식매크로 #하드웨어매크로 #무한반복매크로 #대량이메일발송매크로 #엑셀VBA매크로 #주식모니터링매크로

반응형