웹개발자면서 이것도 모름? | DOM과 CSSOM, 렌더링 과정
Рет қаралды 13,087
Күн бұрын오늘은 브라우저의 동작 원리에 대해 살펴봅시다!
00:00 인트로
01:38 브라우저의 구조
04:50 1. naver.com을 입력하는순간 어떤일이 벌어질까? DNS란?
08:18 2. 리소스 요청
10:14 3. 토큰화
12:09 4. 노드
13:22 5. DOM tree
15:22 6. CSSOM tree
18:21 7. 자바스크립트태그가 항상 바닥에 있는 이유
21:36 defer과 async
22:20 왜 CSS link태그는 항상 위에 있는거야?
24:34 8. Render tree
26:25 9. layout
27:40 10. paint & composite
30:28 웹사이트에 성능을 좋게하려면 어떻게 해야할까?
HTML CSS 강의듣는 곳
codingnoona.thinkific.com/cou...
뇌를 살찌우러 올래?
누나 인스타 뭐야? 1008_shine
#브라우저동작원리 #브라우저 #DOM
@user-yu8so2ck1z 7 ай бұрын
오늘은 브라우저의 동작 원리에 대해 살펴봅시다! 00:00 인트로 01:38 브라우저의 구조 04:50 1. naver.com을 입력하는순간 어떤일이 벌어질까? DNS란? 08:18 2. 리소스 요청 10:14 3. 토큰화 12:09 4. 노드 13:22 5. DOM tree 15:22 6. CSSOM tree 18:21 7. 자바스크립트태그가 항상 바닥에 있는 이유 21:36 defer과 async 22:20 왜 CSS link태그는 항상 위에 있는거야? 24:34 8. Render tree 26:25 9. layout 27:40 10. paint & composite 30:28 웹사이트에 성능을 좋게하려면 어떻게 해야할까? HTML CSS 강의듣는 곳 codingnoona.thinkific.com/courses/f3851d 뇌를 살찌우러 올래?
@vbn0213 7 ай бұрын
오랜만에 보니까 좋네요 ㅎㅎ 내용도 시각화를 잘 해주셔서 이해가 잘돼용 항상 감사해요 :)
@user-du2ty6re8v 7 ай бұрын
강의 전달력이 뛰어나시네요! 훌륭한 자료 감사합니다!
@bebe7176 7 ай бұрын
부분부분 쪼개져있던 작은 지식들이 선생님 강의듣고 정리가 되면서 하나의 큰 그림으로 완성되는 기분이었어요. 항상 최고의 강의 감사합니다 ❤
@welcomeJava 7 ай бұрын
복잡하고 긴 흐름을 정리해주셔서 감사합니다!! 이 다음 영상은 React.js 의 V-DOM 에 대한 내용이겠네요 !!
@Busan_YeonSandong 7 ай бұрын
유익한 강의 감사합니다 ^^
@juchoi6023 7 ай бұрын
강의 폼 미쳤다. 감사합니다 누님
@sonice500 7 ай бұрын
참.. 설명 잘하시네요 멋진 선생님
@user-ie8sf4fb6x 2 ай бұрын
설명도 너무 잘해주시고 자료도 너무 깔끔해서 금방 이해했어요 !!!!!!!! 정말 감사합니다 ㅠ_ㅠ
@user-yu8so2ck1z 2 ай бұрын
좋은 댓글 감사합니다!
@user-nx7ov9sd3r 6 ай бұрын
코알누님, 증말증말 감사합니다. 강의 넘 재밌어요!
@user-yu8so2ck1z 6 ай бұрын
댓글감사해요!!
@user-td4eo5fk9j 7 ай бұрын
작년에 학원에서 처음 접했다가 이제서야 이해가 되네요!!
@eunkyongchoi5254 4 ай бұрын
부트캠프 중인데 너무 힘들어서 ㅜ 코알누님꺼 보고 머리 식히고 있어요..! 장고 배우고 있는데 이거 보고 좀 리마인드할게요....푸잉 감사해요
@user-kn3dm9cz7e 7 ай бұрын
좋은 강의 감사합니다! Token과 Node의 차이점을 조금 더 자세히 설명해주실 수 있을까요?
@jhkim8510 7 ай бұрын
잘배웠어요 감사합니다
@CHPark-wg9rq 7 ай бұрын
굿입니다~~!😂^^
@yangseungtoung 7 ай бұрын
ㅠㅠ저는 크쏘옴! 이라고 읽는데 쏨이 더 맞는 것 같아요. 많이 배우고 갑니다..
@user-by2dx1fd7p 7 ай бұрын
따따봉 있으면 누를텐데, 따봉 밖에 없어서 아쉬울만큼 멋진 교육이였습니다.
@user-yu8so2ck1z 7 ай бұрын
감사합니다! 주위에 홍보많이부탁드려요! 🥰
@Sanginjeongzzz 7 ай бұрын
코드를 잘짜는지 그런거 잘모르겠지만 강의를 잘하냐로봤을때 누나가 짱이야
@koesnimy 7 ай бұрын
최고
@min-hj6nd 7 ай бұрын
멋지네요.ㅋㅋ
@olimolim6556 7 ай бұрын
레전드
@seongwono6269 3 ай бұрын
누나... 최고야...
@user-yu8so2ck1z 3 ай бұрын
너도... 최고야....😊
@histori4731 Ай бұрын
DOMContentLoaded, load 이벤트는 저 과정 중 어디에서 발생할까요?
@ohneodavinci 7 ай бұрын
손이 예쁘시네요
@zuny25 7 ай бұрын
면접때 많이 물어보는 질문이죠
@user-yu8so2ck1z 7 ай бұрын
맞아요!
@sangdol-ef4gg 2 ай бұрын
9:35 바이트 형태를 인코딩하는게 아니라, 디코딩하는거 아닌가요? 개념이 헷갈려서 질문드립니다!
@user-tj8nj3hr6f 26 күн бұрын
저도 이 부분 설명이 잘못된 것 같아 gpt한테 캐물어봤는데 인코딩된 바이트 스트림을 해석 가능한 형태로 디코딩하는게 맞는 표현 같네요
@user-nd7vq3qs3d 6 ай бұрын
누나 이뻐요
@파부 7 ай бұрын
안녕하세요 백엔드 개발자 준비하는 학생인데, 공부도 할 겸 블로그에 내용을 정리해서 올리고 싶습니다. 출처를 밝히고 영상 화면을 캡쳐해서 같이 올려도 될까요?
@user-yu8so2ck1z 7 ай бұрын
네 출처랑 링크 꼭 남겨주세요 !
@user-zz5zb2hb8l 7 ай бұрын
15:43
@dowpaw Ай бұрын
css link 도 dom 의 생성을 막는 걸로 알고있는데 아닌가요?
@jaecheonlee5319 7 ай бұрын
야 내가 저 질문 받음 떨어지는 건 알겠는데 난 모르는.. 너 님이 설명해주면 매우 감사하겄다 하는 심정으로 되물을거 같음
@jwonchi 4 ай бұрын
바이트 스트림으로 준다고???? 진짜?