Ajax란? : teach9186.tistory.com/43

 

Ajax란?

Ajax의 등장 배경 : teach9186.tistory.com/42 Ajax의 등장 배경 ■Ajax(Asynchronous Javascript And XML) 등장 배경 - 웹 브라우저의 정보 요청에 서버는 해당 정보를 포함한 전체 페이지를 전달했다. - 브라우..

teach9186.tistory.com

■Ajax(Asynchronous Javascript And XML) 등장 배경

- 웹 브라우저의 정보 요청에 서버는 해당 정보를 포함한 전체 페이지를 전달했다.

- 브라우저와 서버는 매번 전체 페이지를 렌더링, 생성해야 했기에 부담이 되었다.

* Ajax를 사용하지 않는 사이트가 특유의 깜빡거림 현상을 보이는 이유는 매번 페이지를 싹 지우고

  처음부터 렌더링 하기 때문이다.

 

■Ajax(Asynchronous Javascript And XML) 역사

- 1999.3  개념이 정립되어 IE5에 등장하였지만, 윈도우에 탑재된 ActiveX를 거쳐 사용해야 했기에 성능 문제로

  잘 사용되지 않았다.

- 2004.4  구글이 발표한 GMail과 구글 지도가 플러그인 없이 Ajax로 구현된 Web App이라는 사실이 밝혀진 열흘 후,

  Jesse James Garret에 의해 Ajax라는 용어로 불려 고유 명사로 굳어졌다.

* axios나 oboe등 라이브러리는 비동기 HTTP 요청을 전문적으로 처리한다.

 

출처 : namu.wiki/w/AJAX

 

AJAX - 나무위키

아래의 예제에서는 모두 "//namu.wiki/raw/틀:틀%20모음/" 의 내용을 가져와서 뿌려주는 자바스크립트 코드이다.

namu.wiki

 

반응형

'■ 웹 개발 > 웹 역사' 카테고리의 다른 글

HTML의 등장 배경  (0) 2020.11.13
Node.js의 등장 배경  (0) 2020.11.12
Javascript의 등장 배경  (0) 2020.11.12

■HTML 연대표

■배경 지식

1. HTML(Hyper Text Markup Language)

- HyperText(다른 페이지로 이동할 수 있도록 하는 링크가 달린 텍스트) 기능을 가진 문서를 만드는 언어이다.

- Markup언어는 문서를 <>태그로 표현하는 문서 작성 형식이며, HTML은 SGML을 계승했다.

 

2. 웹 페이지(Web Page)

- www(World Wide Web)상에 있는 개개의 문서를 의미한다.

- HTML은 .htm, .html의 확장자를 가지며, 웹 브라우저가 <>태그의 구조를 해석하여 화면에 표현한 것이 웹 페이지다.

 

3. www(World Wide Web)

- 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 의미한다.

- 간단히 웹(Web)이라고 부르는 경우가 많다.

- 웹과 인터넷은 동의어가 아니다. (인터넷은 모든 컴퓨터를 하나의 통신망에 연결(Inter Network)하고자 하는 의도에서 이를 줄여 InterNet이라고 명명한 것에 어원을 두고 있다.)

 

4. W3C(World Wide Web Consortium)

- www를 위한 표준을 개발하고 장려하는 조직으로 회원기구, 정직원, 공공기관이 협력하여 웹 표준을 개발한다.

 

5. 시멘틱 마크업(Semantic Markup)

- 종종 POSH(Plain Old Semantic HTML)라고도 불리며, 평범하고 오래된 의미론적인 HTML이라는 뜻이다.

- HTML은 문서의 콘텐츠 정보를 설명하는데 사용되는 마크업 언어이므로 그 역할에 집중하는 것이다.

- 적절한 HTML 요소를 올바르게 사용하는 것에서 시작한다.

ex) 웹 사이트의 제목은 <title> 태그를 사용하는 것.

 

HTML의 등장 배경

- '유럽 핵입자 물리 연구소'에 근무하던 '팀 버너스 리'가 기존의 'SGML(Standard Generalized Markup Language)'에

<a> 태그(하이퍼 링크 시스템)를 추가한 언어가 'HTML(HyperText Markup Language)'이다.

- 연구자들의 자료, 논문을 하이퍼링크 기술을 통해 손쉽게 참조하려는 목적이 아니었을까 유추해본다.

 

HTML 1.0 등장

- 텍스트 위주의 정보전달 목적으로 사용되었다.

 

W3C(World Wide Web Consortium) 등장

- 팀 버너스 리를 중심으로 한 웹의 표준을 정의하는 국제 기구이다.

- HTML 사용자 증가에 따라 문서가 다양한 브라우저에서 동일하게 표현되기 위한 표준을 정의한다.

 

HTML 2.0 ~ 3.2

- 당시 각 브라우저들은 표준화되어 있지 않아 브라우저마다 표현되는 태그가 각기 달랐다.

- www 일반 사용자가 증가하고, 사용자는 더 많은 정보를 표현하기를 원했다.

- 웹의 열풍으로 다양한 브라우저가 보편화되어 공통적으로 태그를 표현할 수 있도록 표준 정의에 관심을 가진다.

 

HTML 4.01

- 'CSS(Cascading Style Sheet)'가 등장하여 디자인적인 요소를 구분하고, HTML은 문서의 구조만 명시할 수 있게 되었다.

- 정보와 디자인을 구분하여 생각한 것이다.

 

XHTML 1.0

- W3C는 XML과 HTML을 합성, 태그를 확장하고 엄격한 문법 검사를 적용한 새로운 표준인 XHTML을 만들었다.

- 단, XML은 버전과 버전사이의 하위 호환성을 지원하지 않아서 이전의 태그들로 작성된 문서가 표현되지 않는 문제와 문법의 엄격함에 따른 높은 진입장벽으로 인해 사용자가 등을 돌렸다.

 

* 'XML(eXtensible Markup Language)'

  - W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다.

  - XML은 SGML의 단순화된 부분 집합으로, 더 많은 종류의 데이터를 기술하는 데 사용할 수 있다.

  - XML은 주로 다른 종류의 시스템, 특히 인터넷과 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의    한계를 극복할 목적으로 만들어졌다.

 

WHATWG(Web Hypertext Application Technology Working Group)

- W3C가 XHTML을 표준으로 삼으려는 움직임에 대항하여 기업들이 HTML을 계승하는 자신들만의 표준을 만든다.

- 이는 HTML5의 시초가 된다.

 

HTML5

- W3C도 XHTML을 표준에서 탈락시키고 WHATWG에서 정의한 표준을 따르기로 한다.

- HTML5와 CSS가 표준으로 확정되고, 지금의 HTML 표준이 완성된다.

 

출처

hyoje420.tistory.com/22

 

[HTML]HTML의 역사

문득 우리가 웹페이지를 생성하기 위해 사용하는 HTML이 어떻게 탄생하게 되었는지 궁금해져서 이 글에 정리해볼까 한다. 아래의 그림은 대략적인 HTML의 발전과정을 연도별로 그린 것이다. SGML(S

hyoje420.tistory.com

webclub.tistory.com/608

 

#1 HTML 이란 무엇인가?

HTML 이란 무엇인가? HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사

webclub.tistory.com

 

반응형

'■ 웹 개발 > 웹 역사' 카테고리의 다른 글

Ajax의 등장 배경  (0) 2020.11.13
Node.js의 등장 배경  (0) 2020.11.12
Javascript의 등장 배경  (0) 2020.11.12

■Node.js

 

1. 개요
- 서버 환경에서 동작하는 자바스크립트 프레임워크로 DB-클라이언트-서버를 모두 자바스크립트로 구성할 수 있게 되었다.

2. 등장 배경
- 자바스크립트 활용도의 증가
- 웹 브라우저를 벗어나 사용하려는 움직임이 시작
- 2008/9~ 구글 크롬 발표, V8 자바스크립트 엔진의 등장, 자바스크립트의 단점인 '속도'가 개선, 코드를 공개
- 2009/1~ 자바스크립트를 웹 브라우저 외에서 사용하기 위한 표준을 만들자는 의견 증가로 CommonJS 표준 발표

- Ryan Dahl은 CommonJS 표준과 V8 자바스크립트 엔진을 기반으로 Node.js를 개발


3. 기존 어플리케이션과 Node.js 어플리케이션의 차이

- 기존 웹 서버는 대부분 스레드를 기반으로 하는 동기 방식으로 네트워크 입출력을 처리

- Node.js는 이벤트를 기반으로 하는 비동기 방식으로 네트워크 입출력을 처리

 

4. 이벤트 기반 비동기 방식이란?
예) 재래 시장에서 4개의 가게를 들러 장을 보는 상황이다.
- 동기 방식(멀티 스레드, 멀티 프로세스)
: 몸을 복제해 동시에 여러 가게에 가서 줄을 선다.
- 비동기 방식(이벤트 기반)
: 시장에 대기 시스템을 도입 후, 각 가게를 돌면서 대기표를 받고, 번호가 불리면(이벤트 발생) 물건을 받아온다.

- 동기 방식은 작업 요청이 들어올 때마다 스레드를 여러 개 만들어 동시에 일을 처리한다.
  일과 스레드의 양은 비례하므로 메모리 사용량이 증가한다는 단점이 있다.

 

- Node.js가 사용하는 '이벤트 기반 비동기 방식'은 스레드를 단 하나만 생성하므로 몸은 하나이고, 이벤트를 사용하므로
  빠르게 일을 처리할 수 있다. 일은 많아도 어쨋든 몸은 하나이므로 메모리 사용량과 같은 시스템 리소스 사용량에는 변화가 거의 없다.
  따라서 대규모 네트워크 프로그램을 개발하기 적합한 형태이다.
  단점은, 그 한명이 쓰러지는 순간 프로그램 전체에 문제가 발생한다.

  * Node.js 내부는 여러 스레드가 스레드 풀로 동작한다. 또한 실제 웹서버를 운용할 때에는 코어를 분산해서

    관리하므로 하나의 스레드만 사용한다고 볼 수 없다. 중요한 것은 스레드의 운용을 플랫폼이 담당하며, 

    개발자는 스레드를 의식하지 않고 프로그래밍을 할 수 있다는 점이다.

 

5. Node.js의 장단점

- 장점
  1) 자바스크립트를 사용하기 때문에 웹 개발자의 진입 장벽이 낮다.
  2) 구글의 V8 자바스크립트 엔진을 사용하기 때문에 앞으로도 계속 성능 개선의 여지가 있다.
  3) C++을 이용한 기능 확장이 가능하다.
  4) 'Non-blocking I/O'와 '단일 스레드 이벤트 루프'를 통한 높은 Request 처리 성능을 가지고 있다.
      DB에서 대량의 데이터를 취득, 웹페이지에 표시하는 처리의 경우, 일반적으로 DB 처리에 대기시간(blocking)이 

      발생하기 때문에 웹페이지 표시가 지연되는 현상이 발생한다.
      'Non-blocking I/O'는 비동기 처리를 실시하므로 DB 처리와 웹페이지 표시를 별도 진행하여 

      스트레스 없이 웹페이지 표시가 가능하다.

  5) Node.js에는 Socketio라는 실시간 통신을 실현하는 라이브러리가 있어 대량의 데이터 처리와 실시간 통신을 

     구현할 수 있는 기능을 모두 갖추고 있다.

- 단점
  1) 자바스크립트를 사용하기 때문에 C나 C++로 개발된 서버 어플리케이션보다 느리다.

 

출처 : zbulletjournal.tistory.com/85

 

[nodejs] 등장 배경과 장단점

* <모던 웹을 위한 nodejs프로그래밍>, http://poiemaweb.com 를 참고하여 정리 Node.js는 서버 환경에서 작동하는 자바스크립트이다. 자바스크립트의 활용도가 높아지자 웹 브라우저를 벗어나 자바스크

zbulletjournal.tistory.com

반응형

'■ 웹 개발 > 웹 역사' 카테고리의 다른 글

Ajax의 등장 배경  (0) 2020.11.13
HTML의 등장 배경  (0) 2020.11.13
Javascript의 등장 배경  (0) 2020.11.12

■Javascript

 

1. 개요
- 동적으로 반응하는 웹 페이지를 만들기 위한 스크립트 언어.

 

2. 등장 배경
- www의 일반인 사용의 증가로 상대에 따라 다르게 반응하는 웹 페이지가 필요.
- 1995. HTML 페이지에 움직임을 주고 싶었던 NetScape사의 의뢰로 Branden Erich가 제작.
  → 웹 문서의 내용을 동적으로 변경하거나 이벤트를 적용할 수 있게 됨.

 

3. 등장 후 흐름
- 타 브라우저 회사에서 유사 언어를 출시, 개발자들은 각 브라우저의 호환성으로 인해 고생.
  → NetScape사는 표준화 단체인 ECMA International에 표준화를 요청, 1997.7에 표준 완성.
  → 당시, SUN사가 'JAVA'라는 이름을 상표로 등록해놓았기 때문에, 표준 언어 이름을 'ECMA Script'로 결정.

- 1997. 페이지의 DOM을 다뤄 컨텐츠, 스타일을 변화하고 요소를 보여주거나 숨기는 동적 HTML이 등장함.
- 1999. IE5에서 소개된 XMLHttpRequest API가 나와 Client측 Script를 HTTP(S)로 서버에 요청하고, 텍스트 형식으로
  데이터를 받을 수 있게 됨.

- 2001. Douglas Crockford가 텍스트 형식으로 데이터를 저장하는 자바스크립트 문법을 'JSON'이라고 명명하여 문서로 만들음.
- 2004. 규모가 큰 자바스크립트 프로그래밍을 위한 프레임워크인 Dojo Toolkit이 등장함.
- 2005. Ajax를 이용해 구글이 구글Maps를 소개, 이후 Ajax의 인기가 상승하고, XML 대신 JSON의 사용이 증가함.

- 2006. 크로스 브라우징을 위해 고생하는 개발자를 위해 jQuery가 등장하여 브라우저의 차이를 넘어선 추상화와
  DOM을 손쉽게 쿼리 및 수정하기 위한 API를 제공.
  * jQuery는 같은 코드로 여러 브라우저에서 같은 동작을 하게 해주고, CSS 형식의 선택자로 

    DOM을 쉽게 선택, 제어하는 방법을 제공.

- 2008. V8이라는 빠른 자바스크립트 엔진이 탑재된 구글 크롬이 등장하여 자바스크립트가 느리다는 인식을 바꿈.

- 2009. Ryan Dahl에 의해 Node.js가 개발되어 자바스크립트의 영역을 서버 사이드로 넓힐 수 있게 됨.

  클라이언트, 서버 둘 다 자바스크립트로 프로그래밍 할 수 있었기 때문에 풀스택 개발자가 증가함.

- 이후, 클라이언트 사이드에도 MVC 패턴을 활용하려는 움직임이 증가하여 여러 자바스크립트 프레임워크가 탄생함.

  Backbone.js, Ember.js, javascriptMVC, knockout.js, AngularJS

  * AngularJS는 구글 팀에 의해 등장하여 MVW(Model-View-Whatever)를 표방하고

    View와 Model간 양방향 바인딩, SPA, Promise/A 스펙 비동기를 지원함.

 

출처 : edu.goorm.io/learn/lecture/557/%ED%95%9C-%EB%88%88%EC%97%90-%EB%81%9D%EB%82%B4%EB%8A%94-node-js/lesson/174353/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%97%AD%EC%82%AC

 

구름EDU - 모두를 위한 맞춤형 IT교육

구름EDU는 모두를 위한 맞춤형 IT교육 플랫폼입니다. 개인/학교/기업 및 기관 별 최적화된 IT교육 솔루션을 경험해보세요. 기초부터 실무 프로그래밍 교육, 전국 초중고/대학교 온라인 강의, 기업/

edu.goorm.io

 

반응형

'■ 웹 개발 > 웹 역사' 카테고리의 다른 글

Ajax의 등장 배경  (0) 2020.11.13
HTML의 등장 배경  (0) 2020.11.13
Node.js의 등장 배경  (0) 2020.11.12

+ Recent posts