브라우저가 화면을 표시하는 과정3 : Parsing the HTML
1. Navigation 2. Fetching Data 3. parsing the HTML 4. parsing the CSS 5. executing the Javascript 6. creating the accessibility tree 7. the Render Tree 단계 중 세 번째입니다. 두 번째 단계 Fetching Data에서 서버로부터 html을 받았습니다. 이제 서버로부터 받은 html 파일을 parsing(파싱)할 차례입니다. 파싱이란 무엇일까요? 파싱이란 한국말로 하면 '구문분석'인데요, 파싱을 이해하는데 큰 도움은 되지 않지만 알고 보면 적절한 단어인 것 같습니다. 단지 텍스트로 이루어진 파일(html)을 브라우저가 이해할 수 있고 작업할 수 있는 코드로 변환하는 것입니다. JSON...
브라우저가 화면을 표시하는 과정2 : Data Fetching
1. Navigation 2. Fetching Data 3. parsing the HTML 4. parsing the CSS 5. executing the Javascript 6. creating the accessibility tree 7. the Render Tree 단계 중 두 번째입니다. Navigation과정을 통해 서버와 통신할 준비를 마쳤습니다. 이제 본격적으로 Data를 요청하는 순간입니다. 첫 요청은 Markup Document, 바로 HTML파일을 요청하는데, HTTP프로토콜을 이용합니다. HTTP 프로토콜은 HTML과 같은 자원을 가져오기 위한 프로토콜입니다. 이것은 웹에서 모든 데이터 교환의 기반이고 클라이언트-서버 프로토콜입니다. 즉, 자원의 요청은 수신자에 의해 발생하고 이것은 ..
브라우저가 화면을 표시하는 과정1 : Navigation
목적: 브라우저가 화면을 띄우는 과정을 다시 한번 정리한다. 이 글은 https://dev.to/arikaturika/how-web-browsers-work-part-1-with-illustrations-1nid 과 https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work 을 종합해서 번역했습니다. url 주소바에 방문하고자 하는 웹사이트의 url을 입력하면 필요한 데이터를 웹서버로부터 전달받아서 화면에 표시합니다. 예를 들면 www.naver.com을 입력하면 브라우저가 네이버가 가지고 있는 서버에게 첫 화면을 구성하는 파일을 요청합니다. 그리고 네이버의 웹서버는 네이버 첫 화면을 구성하는 html, css, js파일(프론트엔..