메뉴 건너뛰기

조회 수 641 댓글 1

안녕하세요.

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 요청을 보낸다고 생각했습니다.

 

이렇게 생각하는 게 맞을까요?

 

 

?
  • ?
    관리자 2020.06.10 23:59

    좋은 질문입니다.
    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 요청을 보내고 웹 서버로부터 웹 요소들을 받아서 출력하게 됩니다.
    이상입니다. 더 궁금한 것이 있으면 질문주세요


QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18173
262 예제 9-18번 질문 1 초보 2020.06.21 84
261 선 색 변경이 안됩니다 1 모르겠어요 2020.06.19 196
260 11장 실습문제 4번 1 웹프 2020.06.17 456
259 궁금한점이 있습니다. 1 hayio 2020.06.17 80
258 11장 실습문제 7번 응용 ㅇㅇ 2020.06.16 154
257 6장 오픈챌린지 1 이민수 2020.06.15 232
256 6장4번 1 이민수 2020.06.15 129
255 6장 7번 1 이민수 2020.06.15 198
254 6장 7번 좀 알려주세요 ㅜㅜ 1 어려워여 2020.06.15 583
253 예제 7-6 에서 응용을 하고 싶어서 여쭙고 싶습니다. 1 file 배우고 익히는 초심자 2020.06.14 242
252 13-7 예제 1 궁금이 2020.06.14 146
251 선생님 재질문 드립니다. 1 file 입문한 사람 2020.06.12 150
» 12장 연습문제 4번 HTML 요청 1 file 윤세아 2020.06.10 641
249 setTimeout 질문드립니다. 3 file 웹프공부중 2020.06.09 126
248 스크립트에서 document.write로 표 만들기 질문드립니다. 1 file 입문한 사람 2020.06.08 1104
247 실습문제 1 키보드 향기 2020.06.07 120
246 6단원 실습문제 관련 질문합니다. 1 질문 2020.06.06 110
245 예제 6-24관련 질문드립니다. 3 초보 2020.06.05 67
244 질문드립니다. 1 ㅇㅇ 2020.06.03 306
243 7장 실습문제 8번에서 질문입니다 1 JAVAscript공부중이에요 2020.05.27 403
목록
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 ... 21 Next
/ 21
위로