Web의 역사(1)

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

JUST WRITE

Web의 역사(1) 본문

Network

Web의 역사(1)

천재보단범재 2021. 8. 20. 00:32

이 글은 YouTube 드림코딩 by 엘리의 서버사이드렌더링편을 정리하여 작성한 글입니다.

Static Sites

대부분 Web Site가 Static Sites로 구성되었다.

Server에 배포된 HTML을 그대로 Web Browser에서 전달하는 방식이었다.

Page내에서 Link를 클릭하면 Server에서 해당 HTML를 받아와서 Page 전체가 업데이트 되었다.

iframe

inline frame의 약자로 Page안에 다른 Page를 넣을 수 있게 해주는 태그이다.

iframe 태그를 통해 부분적으로 업데이트가 가능하게 되었다.

<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://developnote-blog.tistory.com/" title="Wonderful Blog!!!">
</iframe>
</body>
</html>

요소는 중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다.

developer.mozilla.org

XMLHttpRequest

XMLHttpRequest API를 통해서 HTML 파일이 아닌 필요한 데이터만 Server에서 받아오게 되었다.

받아온 데이터를 JavaScript를 통해 동적으로 HTML 요소를 생성할 수 있게 되었다.

var xmlHttp = new XMLHttpRequest();

xmlHttp.onreadystatechange = function () {
  if (xmlHttp.readyState === xmlHttp.DONE) {
    if (xmlHttp.status === 200) {
      // do something with xmlHttp.responseText
      console.log(xmlHttp.responseText)
    } else {
      // handle errors
    }
  }
};
  xmlHttp.open( "GET", 'https://test.com');
  xmlHttp.send(null);
}

XMLHttpRequest - Web API | MDN

XMLHttpRequest 는 이름으로만 봐서는 XML 만 받아올 수 있을 것 같아 보이지만, 모든 종류의 데이터를 받아오는데 사용할 수 있습니다. 또한 HTTP 이외의 프로토콜도 지원합니다(file 과 ftp 포함).

developer.mozilla.org

AJAX

Asynchronous JavaScript And XML

XMLHttpRequest API에서 발전, 공식적으로 출발하게 된게 AJAX.

Google에서 Gmail, Google Maps에 AJAX를 활용하였다.

Prototype.js, jQuery 등 AJAX를 활용한 다양한 framework가 등장하였다.

**추후에 상세 포스팅할 예정

AJAX - 웹 개발자 안내서 | MDN

Asynchronous JavaScript + XML(AJAX)은 그 자체가 특정 기술은 아닙니다. 2005년 Jesse James Garrett이 처음 만들어낸 말로, HTML 또는 XHTML, CSS, JavaScript, DOM, XML, XSLT, 그리고 제일 중요한 XMLHttpRequest 객체를 비롯해

developer.mozilla.org

728x90