작년 말, Vue.js라는 프런트앤드 기술에 대하여 리서치를 진행하였다.
목적은 회사 내 기술 스택으로 쌓기 위하여 인턴십을 진행하기 위함이였다.
급하게 리서치를 진행하였고 그때는 이해한다고 생각하였으나 어느 순간인가 사용하지 않게 됨으로 인하여 모두 잊어버린 상태가 되었다.(배우는 것보다 잊는게 더 빠르게 진행된다)
이를 해결하고자 기존 정리 내용을 리마인드하며, 다시 한번 Vue.js에 대해 학습하며 기록 남기려 한다
이 기술이 왜 시장에 나왔는지, 그러기 위해서 어떤 일들이 있었는지가 나에게는 매우 흥미로운 주제여서 이 역시 같이 기록한다.
(항상 틀릴수 있고 다를 수 있다는 것을 전제로 글을 씁니다. 잘못된 점에 대해서 피드백 주시면 고맙습니다)
자바스크립트와 프론트앤드
자바스크립트(Javascript)는 매우 특이한 언어입니다. 과거에는 언어냐 스크립트냐 논란이 있었지만 지금은 확실히 언어라고 부를 만한 많은 조건들을 가지고 있다고 생각합니다.
역사
브라우저는 DOM(Document Object Model)과 통신할 수 있는 방법이 필요하였고 이를 위해 간단한 스크립트 언어를 필요로 하게 되었습니다. 이를 개발하여 자바로 유명했던 썬 마이크로 시스템과 계약을 맺게 되었고 이를 통해 자바스크립트라는 이름으로 불리며 사용하게 되었습니다.
춘추전국시대, 브라우저마다 서로 달랐던 자바스크립트를 구현을 통합하기 위하여 ECMA 인터네셔널이 표준화 작업을 진행하였고, ECMA script3이 발표되면서 자바스크립트에 표준이 정립되었습니다. 가장 큰 특징으로는 XMLHttpRequest라는기능이 포함되었고 이는 서버로부터 비동기적으로 데이터를 받아 올 수 있다는 특징이 있습니다. 오늘날 사용되는 Ajax(Asynchronous Javascript and XML)가 바로 이때의 정리된 결과물이며, Web 2.0과 함께 자바스크립트로 구현된 애플리케이션의 현대적 아키텍처로 널리 쓰이게 됩니다.
이때까지만 해도 웹에서 사용되는 하나의 스크립트 언어 정도밖에 치부되지 않던 자바 스크립트는 2009년 Node.js의 발표와 이를 사용하는 패키지 매니저인 NPM으로 인하여 큰 변화를 맞이하게 됩니다. 단순히 HTML파일을 읽고 사용하는 방식이 아닌, 많은 수의 파일을 하나로 묶어 사용할 수 있는 빌드 환경과 이를 통하여 손쉽게 프로그래밍을 작성할 수 있는 환경을 갖추게 된 것입니다.
이러한 흐름 속에 스티브잡스가 발표한 플래시에 대한 생각이라는 글을 통하여 모바일 환경에서 플래시의 대체제로서 자연스럽게 자바스크립트는 프런트앤드의 역할을 담당하게 됩니다.
이후 많은 프런트앤드 프레임워크들이 개발되었고 웹 서비스에서는 좀더 빠른 반응성과 많은 기능을 프런트 앤드단에서 제어 할 수 있기를 희망하였습니다. Vue.js도 이런 역할을 하기 위해 만들어진 수많은 라이브러리의 발전 과정에서 등장한 하나의 프레임워크입니다.
다른 많은 프런트앤드 프레임워크들이 존재하지만 Vue.js를 선택하였던 이유는
- 부분적, 전반적인 적용이 수월
- 웹페이지의 표현(뷰 레이어)에 초점을 맞춰 다른 자바스크립트 라이브러리보다 조금 더 단순화 시킬 수있다.
입니다.
Vue.js를 이해하기 위해서는 기본적으로 알아야 할 것이 몇가지 존재하며 이를 살펴 본 후
Vue.js의 컨셉 및 주요 개념에 대해 알아보겠습니다.
가상 돔(Virtual DOM)
SPA (Single Page Application)
MVP(Model-view present), MVC(Model view Controller), MVVM ( Model View ViewModel)