1. 프로그레시브 프레임워크 Vue.js - part 1

Vue.js 철저입문 책을 읽으면서 간단하게 정리해 보고자 한다.

Vue.js는 뷰 레이어에 특화된 라이브러리이다. MVVM패턴의 영향을 받은 설계를 채택하고 있어서 대규모 애플리케이션 개발에도 사용할 수 있습니다. 이러한 특징은 애플리케이션의 규모와 상관없이 어떠한 경우에도 단계적으로 유연한 적용이 가능해지는 프로그래시브 프레임워크라는 Vue.js의 설계사상에서 기인한다고 한다. 이 설계사상으로 인해 프로젝트 초기에는 최소한의 학습비용만으로 시험 적용이 가능하며 대규모 시스템에서는 단계적으로 필요한 기능및 라이브러리를 조합해 덧붙여 가는 독특한 스타일의 개발이 가능하다.

Vue.js의 역사

Vue.js는 2013년 에반유(Evan You)가 시작한 개인 프로젝트로 출발

  • 2014년 2월 V0.8이 정식발표
  • 2015년 5월에 PHP웹 애플리케이션 프레임워크인 라라벨에 표준 탑재된 것을 계기로 라라벨 커뮤니티에서 화제
  • 2015년 10월 V1.0이 출시
  • 2016년 10월 1일 V2.0이 출시

복잡해진 모던 웹 프론트엔드 개발

모던 웹 프로트엔드 개발은 크게 고도화 되고 단일 페이지 애플리케이션(SPA)을 중심으로 프런트엔드 에서 복잡한 처리를 맡는 경우가 늘었으며 애플리케이션 데이터플로 설계, 라우팅, 유효성 체크 등 기존에는 백 엔드에서 맡았던 역할을 프런트 엔드가 맡게 됐다. 자바스크립트 역시 최근 몇년 사이 용도가 급격히 늘어났다. 이와 함께 업무와 관련된 개념과 도구가 함께 복잡해지는 경향을 보였다.

웹 탄생과 웹 기반 시스템의 발전

웹(World Wide Web)은 지금부터 20년도 더 전인 1991년에 인터넷상에 처음 등장. 탄생 초기에는 문서 열람만을 목적으로 했으므로 당연히 지금 사용하는 SNS나 스프레드시트 같은 인터렉티브한 콘텐츠 는 구현이 불가능 했다. 1990년 후반부터 CSS와 자바스크립트가 웹 브라우저에 탑재됐다. 당시의 자바스크립트는 매우 빈약해 CSS와 함께 문서를 꾸미는 용도에 주로 사용 됐다. 비록 제약은 많았지만. 이들의 등장으로 웹페이지를 GUI 애플리케이션처럼 꾸밀 수 있게 됐다.

  • CGI(Common Gateway Interface)로 대표되는 웹에서 사용되는 서버 사이드 프로그래밍 기술이 등장
  • 웹 브라우저를 프리젠테이션 계층으로 삼는 웹기반 3계층 아키텍처 시스템이 등장
  • 루비 온 레이즈로 대표되는 MVC기반 웹애플리케이션 프레임워크도 등장

당시 프런트엔드가 담당했던 기능은 css등을 이용한 시작적효과와 자바스크립트를 이용한 알림창, 입력을 받는 기능 정도가 고작이었다.

Ajax의 등장

프런트엔드의 기능은 보여주는 것에만 한정된다는 것이 상식이었던 적이 있다. 그러나 2005년에 구글이 지도 서비스 구글맵스를 출시하면서 이러한 상식이 뒤집어졌다. 같은 페이지 안에서 콘텐츠를 빠르고 인터랙티브하게 변화시키는 경쾌한 사용자 경험이 Ajax를 통해 가능해졌다. Ajax 의 등장 이후 클라이언트 사이드에서는 Ajax및 이를 이용한 DOM을 정교하게 조작하는 기능이 필요해졌다.

  • 필요에 따라 등장한 jQuery등이 인기를 얻었다.
  • 서버사이드 분야는 웹서버가 HTML 렌더링을 넘어 RESTful 기반 웹API 를 제공하게 됐다.
  • 2000년대 말에는 HTML5ECMAScript를 중심으로 웹이 다시 크게 진화
  • Node.js가 등장하면서 웹프런트엔드 개발이 한층 복잡해졌다.

HTML5의 등장

HTML5는 2014년에 권고안이 나온 표준규격이다.
그중 중요한 것은 Histrory API 인데 덕분에 페이지이동을 웹브라우저대신 자바스크립트로 핸들링할 수 있게 됐다. 이를 통해 화면이동없이 URL과 히스토리를 관리하며 전환할 수 있는 단일 페이지 애플리케이션을 만들수 있게 됐다. 이러한 변화에 따라 프리젠테이션 레이어의 프로그램이 서버사이드 에서 클라이언트 사이드로 옮겨오게 된다. 기존에는 HTML렌더링을 서버에서 수행했지만, 웹 API로 데이터를 받아올수 있게 되면서 클라이언트에서도 HTML 렌더링이 가능해졌기 때문이다. 이런 방식이 화면이동이 적기 때문에 더 뛰어난 사용자 경험을 제공할 수 있다.

Node.js 와 자바스크립트 생태계의 진화

2009년 에는 Node.js 가 등장

  • 첫번째 변화는 자바스크립트 실행환경이 브라우저를 벗어난 것이다. Node.js 는 프런트엔드 개발과 테스트에 매우 유용한 환경이다.
  • 두번째 변화는 패키지 관리자이자 패키지 리포지토리인 npm의 보급이다.

이에 따라 모듈(패키지)을 사용할수 있게 됐고 개발된 산출물을 다시 모듈화해 npm을 통해 배포하는 문화가 정착했다.

ES2015 와 프로그래밍 언어로서의 진화

웹 프런트엔드 개발이 고도화되던 와중에 문제가 된것이 자바스크립트의 빈약한 언어 기능이었다. 그래서 대대적인 규격 업데이트가 필요 했고 이에 ES2015(ES6) 가 등장했다.
ES2015 는 자바스크립트 역사상 가장 큰 규모의 업데이트였다. 문법이 확장되고 constlet등이 널리 쓰이게 되는 등 작성스타일에도 대대적인 변화가 있었다. 표준규격이 제안 됐다고 해서 곧바로 모든 브라우저에 구현이 적용되지는 않는다. 그러나 새로운 규격에는 기존의 불만을 해소할수 잇는 매력적인 것들이 많았고 그래서 이러한 규격을 브라우저에 구현해 사용하려는 움직임이 있었다.
Babel 은 이러한 수요에 대응해 자바스크립트를 자바스크립트로 번역하는 컴파일러다. 차세대 문법을 따른 자바스크립트 코드를 아직 해당 규격이 구현되지 않은 브라우저에서 사용할 수 있는 자바스크립트 코드로 변화하는 것이다.

React등 프런트엔드 라이브러리의 출현

애플리케이션 데이터플로를 프런트엔드로 가져오는 등 설계 단계부터 개발 난이도를 상승시키는 것이 많았다. DOM을 웹 API와 연동시키는 것도 생각 없이 할수 있는 일이 아니다.
애플리케이션을 구조화 할수 없는 jQury등을 사용해서는 구현하기가 어렵다 그러므로 MVC와 같은 애플리케이션구조를 지원하는 프레임워크가 필요해졌다. 그에따라 Backbone.js, AngularJS등 새로운 웹 애플리케이션 프레임워크 및 라이브러리가 속속 나타났다. 이런 상황에서 나타난 것이 페이스북이 개발한 ReactFlux 다.
React는 뷰 라이브러리이고, Flux는 애플리케이션 아키텍처다. React 중심의 개발 스타일은 가상 DOM을 이용해 DOM 조작을 빠르게 수행했고, Flux 는 혼란스러워지기 쉬운 아케텍처에 방향을 제시해 큰 인기를 모았다.

현재 당면과제와 Vue.js

모던 프런트 엔드 개발은 현재에 이르기까지 다음과 같은 변화와 새로운 문제점을 낳았다.

  • HTML5 이후 웹이 애플리케이션 플랫폼으로 기능하게 되면서 API가 고도화 됨
  • Node.js 생태계의 발전과 개발 환경 구축의 난이도 증가
  • ES2015 이후 문법이 보강되면서 학습할 내용이 증가
  • React 이후 프런트 엔드 개발이 프레임워크화되면서 그에 따른 학습비용증가

정리하다보니 모던 프론트엔드 개발의 역사와 같이 나와있어서 생각보다 정리해야될 내용이 많았다.
그래서 2파트로 나누어서 정리하기로 했다.

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×