[구버전 - 고정댓글에 새 영상 확인] 웹개발 필수개념! DOM이 뭔가요? (+ Web API)
Vložit
- čas přidán 11. 07. 2022
- #dom #웹개발 #자바스크립트
= = =
🏠 얄코사이트: www.yalco.kr
📖 책 - 혼자 공부하는 얄팍한 코딩지식: www.yalco.kr/book/
🎥 제대로 파는 Git & GitHub: • 제대로 파는 Git & GitHub (대...
🎥 제대로 파는 HTML & CSS: • 제대로 파는 HTML & CSS (대학생...
🎥 갖고 노는 MySQL 강좌: • 왕초보용! 갖고 노는 MySQL 데이터베...
🎥 반응형 프로그래밍 RxJS 강좌: • 반응형 프로그래밍이 뭔가요? (+ Rea...
🎵 엔딩송 : 권민호, 김한영 - Let's Dance
🎼 자료출처 : gongu.copyright.or.kr
🎼 Music promoted by DayDreamSound : • Video - Věda a technologie
영상보면서 함께 정리해봐요!!
- 추가적으로 이 영상을 보면서 CRP도 함께 알아두면 좋을 것 같아서 가져와봤어요!
- 다들 파이팅해요!!
### 1) BOM (2:30)
- 모든 서비스는 웹 브라우저를 바탕으로 실행되기 때문에, 웹 서비스 개발은 브라우저와 밀접한 관련이 있다.
- 이 브라우저와 관련된 객체 집합이 브라우저 객체 모델(BOM)
- 이 BOM을 이용해 브라우저와 관련된 기능을 구성한다.
- DOM은 BOM 중 하나
- BOM의 최상위 객체는 window객체
- window.location
- window.navigator
- window.screen
- window.history
- …
- DOM은 window 객체의 하위 객체
- window.document 객체를 DOM이라고 분류한다.
### 2) DOM (2:40)
- Document Object Model의 약자. 문서객체 모델
- 우리가 웹 사이트에 접속하면, 웹 브라우저는 HTML 문서를 읽어들이고 해석한다. 이 브라우저가 HTML코드를 해석하는 과정을 ‘파싱’이라 부른다.
- 파싱 결과물을, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면에 보여주는 과정이 렌더링이며, 결과물로 DOM이 만들어진다.
- 브라우저는 HTML 코드를 해석하여, HTML 요소들을 트리 형태로 구조화하여 표현하는 웹 문서를 생성한다. 이 트리 전체를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다.
- 트리를 구성하는 요소 하나하나를 Node라고 한다.
- 자바스크립트로 웹 페이지 요소를 제어할 수 있는 것은 이것들 하나하나가 모두 API이기 때문
- API(PRI아님. 잘못알면 난닝구할아버지 찾아옴) : API는 소프트웨어 개발에서 호환성을 위해 지켜야 하는 추상적인 원칙.
- 애플리케이션을 서로 연결해서 서로 통신할 수 있도록 하는 인터페이스 원칙이라고 생각하자!
- DOM은 XML이나 HTML문서에 접근하기 위한 일종의 인터페이스로, 문서 내의 모든 요소를 정의하고 각 요소에 접근하는 방법을 제공한다.
### 3) 웹 페이지가 만들어지는 방법 : CRP
- CRP(Critical Rendering Path) : 웹 브라우저가 원본 HTML문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정
- DOM트리 구축
- CSSOM 트리구축
- JS 실행
- 렌더 트리 구축
- 레이아웃 생성
- 페인팅
- CRP 과정을 렌더트리 구축 기점으로 간소화하면 2단계로 나누어짐
- 1단계 : 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정한다. (렌더트리 생성됨)
- 2단계 : 브라우저는 해당 렌더링을 수행한다.
- 렌더 트리 : 웹 페이지에 표시될 HTML, 스타일 요소로 구성된다. 브라우저는 렌더트리를 생성하기 위해 두 모델을 필요로 한다.
- **DOM(Document Object Model)** : HTML 요소들의 구조화된 표현
- **CSSOM(Cascading Style Sheets Object Model)** : 요소들과 연관된 스타일 정보의 구조화된 표현
### 4) DOM의 목적
- DOM은 자바스크립트를 활용해 문서에 대한 스크립트를 작성하는 것에 목적이 있다. 즉, 문서 내의 각 요소들에 대해 자바스크립트를 활용해 여러 작업을 시도할 수 있다는 뜻이다.
- 뷰 포트에 무엇을 렌더링할지 결정하기 위해 사용된다.
- 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다.
- 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다.
- 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다.
- 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다.
- 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다.
- 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다.
- 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있다
- HTML코드는 정적인 텍스트이므로, 웹 화면이 사용자와 동적 상호작용을 하기 위해서는, DOM의 존재가 중요해진다.
항상 고마워요 매일같이
와.. 너무 감사합니다 이렇게 쉽게 개념정리를 해주시다니 ㅠㅠ
강의가 학교 과목으로 들어가도 될 정도로 좋네요!
영어자막이나 영어더빙이 들어가면 더 많은 분들이 볼것 같네요
개념정리 깔끔해요!
항상 유용한 영상을 만들어주셔서 감사합니다!!!
감사합니다!!
좋은 강의 감사합니다.!
Dom에 대해 잘 안다고 생각했는데
영상보면서 처음 알게된 것도 있네요.
유용한 영상 감사합니다
와.. 진짜 설명이 너무 깔끔하네요
감사합니다!
알~겠나요? 텍스트만 보고도 얄코님 목소리가 들리는 거 같습니다ㅋㅋㅋㅋㅋㅋ 항상 좋은 강의 만들어주셔서 감사합니다!!
너무 조왕 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ
이 영상은 구버전입니다. DOM에 대한 시즌2의 보다 새롭고 자세한 영상을 확인하세요!
czcams.com/video/07Lppn7UdIs/video.html
감사합니다!
예능보다 재미있어요! ㅋㅋㅋ 오늘도 잘배우고 갑니다!ㅎ
재밌게 봐주셔서 감사합니다! ㅠ
밑으로 말인가요? 에서 뿜었네요 ㅋㅎㅋㅎ
0:35 위험한 발언을 하려는 오토
미토가 오토가 되었네요?
오늘도 영상 잘 보았습니다!
인프런에서 강의 보고 여기까지 왔습니다 ㅜㅜ 한 달 전에 첫걸음으로 시작했는데 벌써 마지막 세션이네요. 정말 너무 유익했습니다. 덕분에 정말 정말 깊이 있게 배웠습니다. 선생님 이제 유튜브는 더 안올리시나요 ㅠㅠㅠㅠㅠ 편집이 빡셔보이긴 합니다 ..
ㅋㅋㅋ 구스타프 목소리 개웃겨요
브라우져에서 제공하는 widnow 객체의 한 요소가 document이고
그 window.document가 DOM이라고 불리는 것이군요
웹개발자들 대부분 이거 모르고 쓸텐데 진짜 강제로 이영상 보게해야한다
버튼에 알겠나요 미치겟넼ㅋㅋㅋㅋㅋㅋㅋㅋ 알~겠나요?
개쩌네요... 혼자공부했으면 10시간은 들였을거같은데 1~2시간 만에 이해끝났어요
어른들의 돔ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
안녕하세요. 웹개발 열심히 공부중인 학생인데 티스토리에 공부하면서 정리하고 있는데 동영상 부분 캡처해서 사용해도 괜찮으신가요??
출처만 밝혀주시면 괜찮습니다. 😀
♡
지크프리트 폰 슈넬
빠른 출신의 승리평화
ㅆㅅㅌㅊ
미토가 진짜 미쳤네 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
크흠 그 슈넬이 그 저희가 아는 슈넬인가요? ㅋㅋㅋㅋ
독일치킨 ㄷㄷ
개추
광기가느껴진다
왜 김계란이 느껴지는거죠!!??ㅋㅋㅋㅋㅋ
앗 ㅎㅎㅎ 그런가요 ㅋㅋㅋ
미토가 그립다...
미토 목소리를 힘들어하는 분들이 계셔서 비중을 줄였습니다 😅
ㅠㅠ
대사 끝나고 '음.' 하는 말버릇을 컷편집으로 날린다면 훨씬 깨끗하고 오래 들을수 있을거 같아요~
편집이 안 되거나 한 게 아니라 해당 캐릭터의 말투입니다;; 😅 모든 분들의 취향에 맞추지 못하는 점 양해 부탁드립니다.
저는 슈넬 말투 재밌어요 ㅋㅋ@@yalco-coding