YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Korean subtitles

← 02-02 Converting HTML to the DOM

Get Embed Code
6 Languages

Showing Revision 10 created 04/14/2016 by nc_review1.

  1. 여러분들이 URL을 요청하고 엔터를 누르면
    브라우저가 서버로 요청을 보냅니다
  2. 예를 들어, 우리는 이것을 커맨드 라인에서
    시뮬레이션해볼 수 있는데요
  3. 여기에서 볼 수 있는 HTML처럼
    브라우저가 한번 응답을 받으면
  4. 브라우저는 모든 마크업을
    여기 보이는 화면으로 변환합니다
  5. 어떻게 이런 일이 일어나는지 궁금하지 않나요?
  6. >> 말이 나왔으니 말인데요, 약간 마법처럼 느껴지네요
  7. >> 이건 마법이 아니에요
  8. 브라우저는 잘 정의된 몇 단계를 따르는 것 뿐이죠
  9. HTML을 처리하고 DOM을 만드는 것부터 시작해서요
  10. HTML 표준안은 받은 데이터 처리 방식에 대한
    일련의 규칙을 포함하고 있죠
  11. 예를 들어 텍스트가 꺾쇠 괄호를 포함하는 것은
  12. HTML에서 특별한 의미가 되고
    그건 태그로 설정되죠
  13. 그리고 그 태그를 만날 때마다
    브라우저는 토큰을 만들어요
  14. 이 경우에는, 시작 태그가 HTML 토큰이죠
  15. 그다음 시작 태그는 head 토큰이네요, 이런 식이죠
  16. 이런 전체적인 과정은 Tokenizer가 하게 되는데
    Tokenizer가 일을 하는 동안
  17. 이런 토큰을 받아서 node 객체로 바꾸어주는
    또 다른 과정이 있어요
  18. 예를들어 먼저 HTML 토큰을 변환하고
    HTML 노드를 만들죠
  19. 그리고 다음 토큰을 받고 그에 대한 노드를 만듭니다
  20. >> 노드 간에 어떤 관계가 있나요?
  21. 그렇죠, Tokenizer가 시작과 종료토큰을 만들면
  22. 그것이 노드 간의 관계를 말해주는 거죠
  23. 시작 태그인 head 토큰은
    종료 태그인 html 토큰 뒤에 오고
  24. 그건 head 토큰이 html의 자식이라는 것을 말해주죠
  25. 비슷하게 meta와 link 노드는 head 노드의 자식이 되고
  26. 계속해서 연결이 됩니다
  27. 결국, 모든 토큰을 받아들이면
  28. 간략히 DOM이라고 불리는
    Document Object Model을 생성하고
  29. 이는 노드 간의 관계, HTML의 내용, 속성을 가지는
    트리 구조가 되는 거죠
  30. >> 멋지네요, HTML을 DOM으로 바꾸어봤어요
  31. 왜 이게 DOM 트리로 불리는지 이해가 가네요
  32. >> 그래요, 그리고 이 객체들은
    그들의 모든 속성들을 포함하고 있어요
  33. 예를 들어 이미지 노드는 source 속성을 가지고 있고
    여기에 있는 노드 또한 같은 속성을 가지게 되죠
  34. DOM은 HTML 마크업의 모든 부분에 대한 표현입니다
  35. >> 그렇군요
    그럼 우리는 HTML을 모두 받고 DOM을 생성했어요
  36. 알겠네요, 그럼 다음은 뭐죠?
  37. >> 실제로, 브라우저는 점진적으로 DOM을 생성하고
  38. 여러분들은 페이지의 렌더링 속도를
    향상시키기 위해 이를 이용할 수 있어요
  39. 실제로, 이는 구글 검색 페이지가 매우 잘하는 일이죠
  40. 제가 보여드릴게요