Vue.JS #

Vue.js

Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였으며 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 용이하다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원한다.

시작과 기본 문법에 대해서는 공식문서인 이미지 옆 상단의 링크로 확인이 가능하다.

프로그레시브 프레임워크(Progressive framework) #

웹 프런트 엔트 분야에는 React와 Angular 등 라이브러리와 프레임워크가 여러 가지 있다. 프레임워크는 애플리케이션 개발의 복잡성을 해소해주는 도구다. 그러나 애플리케이션과 마찬가지로 프레임워크에도 프레임워크 자체의 복잡성이 있다. 프레임워크라는 도구를 사용하려면 도구 자체의 복잡성에서 오는 비용과 애플리케이션 개발의 복잡성에서 오는 비용이 균형을 이루도록 적합한 프레임워크를 선택하는 것이 중요하다.

제공하는 단계적 영역

- 선언적 렌더링
- 컴포넌트 시스템
- 클라이언트 사이드 라우팅
- 대규모 상태관리
- 빌드 시스템
- 클라이언트-서버데이터 퍼시스턴스

차이점(Angular vs React vs Vue) #

앵귤러 (Angular) #

앵귤러는 프로젝트 생성에서부터 코드 최적화 작업에 이르기까지 모든 작업에서 사용할 수 있는 폭넓은 프레임워크이기 때문에, 전체적인 개발 과정에 있어서는 가장 다루기 힘든 프레임워크라고 할 수 있다. 하지만 앵귤러는 선택할 수 있는 많은 기능들이 있기에, 개발자들은 어떠한 호스트(host)앱이라 하더라도 간단한 명령을 통해 완전히 최적화된 번들(bundle)앱을 만들 수 있다.

용도

- 기능이 풍부하고 규모가 큰 애플리케이션을 개발할 때
- 믿을 수 있고 확장 가능한 프레임워크가 필요할 때
- 채팅 앱이나 메시징 앱과 같은 실시간 애플리케이션을 개발할 때
- 장기프로젝트이며, 투자규모도 상당한 네이티브 앱이나 하이브리드 앱, 또는 웹앱을 개발할 때
- 타입스크립트(TypeScript)로 코딩해야 할 때
- 객체지향(Object-oriented)프로그래밍을 해야 할 때

리액트 (React) #

리액트에는 앵귤러나 뷰에서와 같은 도구들이 없지만 대신에 유연성을 제공하고 있다. 본인이 원하는 어떠한 라이브러리라도 리액트에 맞춰 넣을 수 있는 것인데, 크리에이트 리액트 앱(Create React App)이나 넥스트(Next.js)와 같은 명령줄 인터페이스(CLI) 도구들도 있생겨나고 있다.

용도

- 빠른 일정 안에 엔터프라이즈 수준의 가벼우면서도 현대적인 애플리케이션을 개발해야 할 때
- 웹사이트 개발 솔루션을 안전하게 보호할 수 있는 유연한 프레임워크가 필요할 때
- 크로스 플랫폼(cross-platform) 애플리케이션이나 싱글 페이지 애플리케이션(SPA)을 개발할 때
- 기존의 앱에서 기능성을 확장할 때
- 강력한 커뮤니티 지원과 솔루션이 필요할 때

뷰 (Vue) #

앵귤러나 리액트와 비교해서 뷰는 프리코딩(pre-coding) 구조를 가지고 있어서, 그 성능을 양보하지 않고도 애플리케이션을 빠르게 개발할 수 있게 해줍니다. 그리고 명령이 쉽기 때문에, 개발과정에서 원하는 것을 정확하게 이용할 수 있습니다. 뷰를 사용하면 앱개발이 쉽고 빠르다. 따라서 스타트업에게 아주 좋다고 할 수 있다.

용도

- 시장 진입 단계에서 필요한 프레임워크를 선택할 때
- 작고 가벼운 애플리케이션을 개발할 때
- 기존의 프로젝트에서 현대적이지만 제한된 리소스를 가진 프레임워크로 마이그레이션을 해야할 때
- 기업이 아니라 사용자 커뮤니티의 지원을 받는 프레임워크를 원할 때

VusJS IDE #

VueJS를 더 효율적이고 생산성있게 도와주는 IDE(Integrated Development Environment, 통합 개발 환경) 중에는 VSCode, WebStorm, Atom 등 등 존재한다.

VSCode

대개 뷰는 작고 가벼운 애플리케이션 등을 선호하기에 보다 가벼운 VSCode와 Vuter의 조합으로 많이 사용한다. 하지만 소스 코드 규모가 커지다보면 수 많은 파일들을 거쳐가야 하는 것에 대해 한계가 느껴진다.

그래서 실무 프로젝트로는 WebStorm을 사용하여 보완하는 방법도 사용된다. 최근에는 Jetbrains(WebStorm)에서 제공하는 Vue.js 플러그인이 상당한 수준까지 업데이트 되었고, 코드 간 점프 및 vuex state 까지 자동완성 된다고 한다.

하지만 유료서비스와 무료서비스의 차이가 있다. Atom, VSCode은 무료서비스 인 만큼 플러그인을 추가로 설치해야하는데, 사용하다 보면 거의 유료 IDE 버금가는 수준의 기능을 제공한다.

VueJs 생태계 #

Vue.js는 뷰 계층에 초점을 맞춘 라이브러리이므로 엄밀히 말해 프레임워크는 아니다. 단일 페이지 애플리케이션을 구현하기 위한 라우팅 기능처럼 UI외적인 기능을 이용하는 웹애플리케이션을 개발하려면 추가 라이브러리가 필요하다. 웹애플리케이션 테스트 및 빌드, 개발 환경역시 직접 구축하지 않으면 안 된다.