[Vue] 1 - Vue등 프레임워크의 탄생 배경

in Dev on Vue



# 1990년대 중반 - Static Sites

사용자 브라우저가 서버에 접속하면 서버에 이미 배포되어 있는 HTML을 보여주는 형식이다

img

링크를 클릭하면 서버에서 HTML을 받아와 보여주므로 페이지 전체가 업데이트 된다. -> 사용성 저하

# 1996년 - iframe 도입

iframe이란 inline frame의 약자입니다.

iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있습니다

  <iframe src="삽입할페이지주소"></iframe>

# 1998년 - XMLHttpRequest API 개발

fetch API의 원조 XMLHttpRequest API이 개발되어서 HTML전체가 아니라 JSON과 같은 포맷으로

서버에서 필요한 데이터만 받을 수 있게 되었고 Javascript로 화면에 보여주는것이 가능해졌다.

function reqListener () {
  console.log(this.responseText);
};

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

2005년 - AJAX(Asynchronous JavaScript and XML) 발표

서버에서 필요한 데이터만 받을 수 있는 기능이 공식적으로 Ajax라는 이름으로 발표가 됨


$.ajax({
    url : '/user',
    data : {
      name:'smith', 
      phone:'010-9578-2154'
    },
    dataType : 'json', /*html, text, json, xml, script*/
    method : 'post',
    success : function(res){
        alert(res.name + ', '+res.phone);
        $('p').show();
    }
});

Vue, React, Augular등 프레임워크의 등장 배경

사용자 PC 성능 향상

사용자의 PC 성능이 향상되어 많은 Ajax를 이용한 CSR방식을 무리 없이 처리할 수 있게 되었다.

백엔드와 프론트의 분리

웹, 모바일웹, 네이티브 앱등 다양한 플랫폼에서 서버는 웹, 모바일웹, 앱 에서의 요청을 수행해야 했다.

그러나 서버에서 데이터만 받아 랜더랑하는 네이티브 앱과 다르게 웹과 모바일웹은 서버에서 랜더링된 HTML을 웹에게 돌려줘야 했기 때문에

같은 기능이라도 데이터만 리턴하는 API, 완성된 HTML을 리턴하는 API를 개발하여아 했으므로 서버 개발의 비용이 높아졌다.

이러한 중복된 부분을 최소화 하고 업무를 깔끔하게 분리 하기 위해

서버는 데이터만 RETURN 하고 (백앤드)

브라우저는 네이티브 앱처럼 데이터만 받아와서 스스로 랜더링 해야 했다.(프론트)

그렇게 서버에서 돌아가는 백엔드와 사용자의 브라우저에서 돌아가는 프론트앤드로 분리가 되었다.

SPA(Single Page Application)

처음 접속시 서버는 HTML,CSS,JS파일을 브라우저에게 보내주고

JS파일은 기존의 동적 웹에서 서버가 하던 것처럼 HTML을 랜더링하게 되었다.

이후 서버에 요청 후 필요한 데이터만 받아 사이트의 내용을 갱신한다.

사이트에서 액션이 일어날때마다 새로 접속하지 않고 한번 로드된 화면에서 많은 기능을 수행 할 수 있었고

이것을 Single Page Application이라고 한다.

SPA 장단점

  • 새로운 페이지 요청 시 전체를 렌더링 하지 않고 변경되는 부분만 갱신하기 때문에 전체적인 트래픽 감소와 렌더링에서 좋은 효율을 가진다.
  • 새롭게 갱신되는 부분만 렌더하기 때문에 새로고침이 발생하지 않아 화면 깜빡임 없이 빠른 화면 이동이 가능하다.
  • 트래픽의 감소와 속도,반응성의 향상으로 인해 앱처럼 자연스러운 사용자 경험(UX)를 제공하며 모바일 사용이 증가하는 시점에 이는 큰 장점이 된다.
  • 모듈화 또는 컴포넌트별 개발이 용이하다.
  • 백엔드와 프론트엔드가 비교적 명확하게 구분된다.

SPA 단점

  • 웹 애플리케이션에 필요한 정적 리소스를 한번에 다운로드 하기 때문에 초기 구동 속도가 느리다.
  • SPA 구조 상 데이터 처리를 클라이언트에서 하는 경우가 많은데, 해당 로직들은 JavaScript를 통해 구현되므로 코드가 외부에 노출되는 보안적인 문제가 있다.
  • 검색엔진 최적화(SEO)가 어렵다. - 구글등 검색엔진은 웹사이트의 HTML을 분석하여 미리 저장하여 빠른 검색을 도와주지만 CSR의 html 바디는 비워져있기 때문에 웹페이지를 분석하는데 어려움이 있다.



© 2017. by isme2n