안녕하세요.
12장 연습문제 4번은 이제 인터넷 익스플로러로 개발자 도구로 실행이 안 되나요?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How Many</title>
<link href="a.css" type="text/css" rel="stylesheet">
</head>
<body>
<img src="1.png">
<img src="2.png">
<img src="3.png">
</body>
</html>
위와 같이 책 그대로 코딩하고 href="mystyles.css" 부분만 제가 가지고 있는 "a.css"로 대체하여 html 파일을 만들었습니다.
그 파일을 인터넷 익스플로러로 열었고 웹페이지에 잘 보여졌습니다.
그런데 F12를 눌렀을 때 DOM7011 에러가 뜨고 아무 HTTP 세션도 안 보입니다.
DOM7011 을 검색해보니(https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265017(v=vs.85)?redirectedfrom=MSDN)
Back navigation caching 이라고 해서
캐시하려면 웹 페이지가 5개를 충족하라고 하는 것 같던데요.
2번째 조건에 페이지에 미리 로드 이벤트 처리기가 정의되지 않았다고 하던데
그럼 코드를 추가해야 하나요?
코드로 구현하지 않고 생각만으로 이 문제를 푸는 방법을 알고 싶습니다.
지금 현재 생각하는 걸로는 우선 저 연습문제12-4.html로 들어가니까
캡처 단계라 한 번 HTTP 요청 되고
이미지 출력 3번 하고
버블 단계를 거쳐서 다시 돌아가니까
이 HTML 페이지를 출력하기 위해
브라우저는 웹 서버에 총 5번 HTTP 요청을 보낸다고 생각했습니다.
이렇게 생각하는 게 맞을까요?
좋은 질문입니다.
1. 우선 정상적인 웹 시스템에서는 브라우저가 웹 서버를 통해서 웹 페이지를 가져와서 화면에 출력합니다.
그러니까, 문제의 웹 페이지 역시 웹 서버가 설치된 곳(같은 컴퓨터나 다른 컴퓨터 상관없이, 책의 35페이지 웹 서버와 웹 사이트를 보세요)에 있어야 하고 전적으로 웹 서버에 의해 출입이 통제됩니다.
그리고 익스플로러에서 사용자가 (만일 웹 서버의 주소가 111.111.111.111이고 그곳에 웹 페이지가 a.html이라면)
URL 부분에 http://111.111.111.111/a.html 을 입력하면, 익스플로러는 웹 서버(111.111.111.111 컴퓨터)에 접속하고 익스플로러가 a.html 페이지를 달라고 요청하면서부터 HTTP 프로토콜이 시작되지요.
그리고 이것은 12장 앞부분에서 열심히 설명하고 있습니다.
그러니까 윤세아님이 익스플로러를 이용하여 문제에 주어진 웹페이지를 로딩하려면,
먼저 웹 서버를 설치하고(이 책에서는 몽구스라는 매우매우 간단한 웹 서버를 사용하여 테스트 하기를 권하고 있습니다만)
그 곳에 윤세아님이 작성한 웹 페이지를 두어야 합니다.
그래서 12장 앞부분에서 설명하는 익스플로러의 개발자 도구의 작동을 볼 수 있습니다.
어쨋던 웹 서버 없이 로컬에서 바로 웹 페이지를 로딩하였기 때문에
익스플로러가 오류를 출력한 것입니다. 그러니까 익스플로러가 출력한 아래의 오류는 신경쓰지 마세요.
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265017(v=vs.85)?redirectedfrom=MSDN)
Back navigation caching
2. 이 문제는 이론적으로 생각하고 답을 쓰라는 취지입니다.'
우선, 윤세아님이 5번 이라는 답은 맞지만, 이벤트 버블이나 캡쳐 뭐 이런 것하고는 관계가 없어요. 그것은 사용자가 출력된 웹 페이지에 마우스나 키보드 등의 이벤트를 발생시킬 때 이벤트가 흘러가서
처리되는 과정인데, 웹 페이지가 웹 서버로부터 로딩되어 출력되는 과정하고는 아무 상관없습니다.
사실 그림 12-2를 참고하세요.
그러면 제가 설명을 해보곘습니다.
먼저 웹 브라우저에 사용자가 웹 페이지의 URL을 적었겠죠.
(1)그러면 웹 브라우저는 웹 서버에 웹 페이지(a.html)을 요청하는 HTTP 요청을 보냅니다.
(2) 웹 브라우저가 a.html을 받아 태그들을 해석하다가 mystyle.css를 가져와야함을 알고 mystyle.css를 달라는 http 요청을 보냅니다.
태그의 해석은 위에서부터 아래로 이루어집니다.
(3) 웹 브라우저는 mystyle.css 파일을 받은 후 태그 해석을 계속합니다. 그러다가 <img> 태그를 만나 이미지를 그리기 위해 다시 1.png를 달라는 http 요청을 보냅니다. 이것을 받은 후 이미지를 출력합니다.
(4) 그리고 두번째 <img> 태그를 만나 2.png를 달라는 http 요청을 보냅니다. 이것을 받은 후 이미지를 출력합니다.
(5) 그리고 세번째 <img> 태그를 만나 3.png를 달라는 http 요청을 보냅니다. 이것을 받은 후 이미지를 출력합니다.
나머지 태그들을 해석하여 DOM 트리를 만들고 화면에 출력합니다.
결론적으로 웹 브라우저는 웹 서버에 총 5번의 http 요청을 보내고 웹 서버로부터 웹 요소들을 받아서 출력하게 됩니다.
이상입니다. 더 궁금한 것이 있으면 질문주세요