DOM & CSSOM - 프론트엔드 개발자 필수지식

#DOM #coding #programming
이번 영상에서는 웹 페이지의 작동 방식과 프론트엔드 개발의 핵심 요소인 DOM(Document Object Model)과 CSSOM(CSS Object Model)에 대해 다룹니다. DOM은 HTML 문서를 읽는 브라우저가 HTML의 구조와 내용을 확인하고 해당 구조에 맞는 '객체'를 만들어 내는 것이며, 이 과정을 '파싱'이라 합니다. 모든 HTML 태그, 태그의 속성, 태그 내부의 텍스트 등은 모두 DOM 내부에서 노드로서 자리를 차지하게 됩니다. 이렇게 만들어진 DOM은 마치 나무와 같은 트리 구조를 형성하게 됩니다. 또한, CSSOM은 CSS로부터 생성되며, DOM과 함께 브라우저가 Web 페이지의 구조를 이해하고 렌더링하는데 사용됩니다. 가장 중요한 점은, 웹페이지가 한 번 로드된 이후 자바스크립트를 사용해서 동적으로 변화를 가하는 것이 DOM을 통해 이루어진다는 것입니다. CSSOM도 자바스크립트를 통해 CSS rule들을 변경하는 기능이 제공되지만, 보통은 DOM을 통해 스타일을 변경하는 것이 일반적입니다. 결국, DOM과 CSSOM은 웹페이지가 단순히 HTML 설계도 위에 디자인된 모습을 화면에 투영하는 것에 그치지 않고, 웹페이지가 다양한 방식으로 조작될 수 있도록 해주는 중요한 요소입니다.
= = =
🏠 얄코사이트: www.yalco.kr
📖 얄코 도서: www.yalco.kr/b...
🧑‍🏫 얄코 강의: www.yalco.kr/#...
🎥 제대로 파는 Git & GitHub: • 제대로 파는 Git & GitHub (대...
🎥 제대로 파는 자바: • 제대로 파는 자바 - Java 끝.장.내...
🎥 제대로 파는 파이썬: • 제대로 파는 파이썬 - Python 끝장...
🎥 제대로 파는 자바스크립트: • (구판) 제대로 파는 자바스크립트 - 고...
🎥 제대로 파는 HTML & CSS: • 제대로 파는 HTML & CSS (대학생...
🎥 갖고 노는 MySQL 강좌: • 왕초보용! 갖고 노는 MySQL 데이터베...
🎥 반응형 프로그래밍 RxJS 강좌: • 반응형 프로그래밍이 뭔가요? (+ Rea...

[@yalco-coding]

🎫 얄코 강의 선착순 반값쿠폰 (매주 갱신) bit.ly/yalco-fcfs-coupon 예제코드 확인 : yalco.notion.site/DOM-CSSOM-13c42af030bd417c832d343a4172b260?pvs=4 얄코 강좌들 보기: www.yalco.kr/#lectures 얄코 책 보기: www.yalco.kr/#books

[@justhighway]

와 지금까지 그 어떤 설명을 봐도 무슨 소리인지 똑바로 이해를 못했는데 직관적으로 바로 이해할 수 있었습니다. “여기저기 추상적으로 설명되어 있다”라고 시원하게 꼬집어주시고 실제로 document가 무엇이고, 그 document object에 들어가는 내용을 보여주시니 이해가 확 되네요.

[@yalco-coding]

열심히 고민한 내용이 도움이 되어드려 기쁩니다! 감사합니다!!

[@user-km3tn5kd7g]

정말 단언컨데 개발 유튜버 중 탑클래스 설명이십니다... 유치원생도 이해할 수 있는 퀄리티예요. 항상 양질의 영상 올려주셔서 감사합니다!!

[@yalco-coding]

많이 고민하고 만든만큼 도움되어드려 기쁩니다! 감사합니다!!!

[@djlata462]

요즘 영상 너무 맛있네요 감사합니다!

[@yalco-coding]

감사합니다!!

[@wonsuknet]

정 ~~~~~ 말 유익한 영상이네요 너 ~~~~~ 무 잘 보고 가요^^

[@yalco-coding]

감사합니다!

[@user-ki2uv7fd3v]

와 딱 오늘 필요하던 정보인데 이걸 오늘 올리셨네요

[@yalco-coding]

영상내용이 도움되어드렸길 바랍니다 🙂

[@tisoessiao2036]

설명 너무 좋네요. 감사합니다.

[@yalco-coding]

감사합니다!

[@user-bt4nt3nr6d]

기가 막힌 설명 👍

[@yalco-coding]

감사합니다!

[@good_nara]

지식의 깊이가 있으시군요. 근데 비유가 오히려 이해를 어렵게 하기도 하네요. ㅠㅠ 실제로 좀더 해보고 다시 올게여.

[@godseng_seok]

맛잇다…

[@Home-Gavity]

저 혹시 자바 스크립트로 chrome runtime sendmessage 관련 정보도 가능할까요... 예제가 쉽지 않네요

[@yalco-coding]

질문을 좀더 구체적으로 주실 수 있을까요? 정확히 어떤 것을 물어보시는건지 알기 어렵습니다. 자바스크립트로 그걸 할 수 있냐는 것인가요(크롬의 런타임 API로 가능합니다) 아니면 관련 영상을 만들어달라는 것인가요?(그것 자체로 영상을 만들기엔 너무 지엽적이고 수요가 적습니다. ChatGPT 등에서 매우 잘 알려주고요)

[@Home-Gavity]

​@@yalco-coding크롬 확장프로그램 기준으로 POPUP 창에서 Input, button 등의 선택으로 데이터를 background > cotnent로 보내서 DOM조작을 하고싶은데 예제하고 관련 정보가 꽤 어렵네요.

[@yalco-coding]

그렇군요. 그런 것도 어느 부분이 잘 안 되는지 예제코드 등이라도 보여주셔야 제가 검색이라도 해 볼 수 있습니다. 지금 주신 질문으로는 뭘 어떻게 도와드릴 수 있는 것인지 알기 어려워요 😅 저는 크롬 확장 프로그램이나 크롬 런타임은 아직 다뤄보지 않았습니다. 질문을 주신다 해도 AI에게 물어보는 정도가 될 거예요. 관련해서 개발 경험이 있는 분들께 여쭤보시는 것이 보다 도움이 되어드릴 것 같습니다.

[@Home-Gavity]

​@@yalco-coding그렇군요. 😢