Skip to content

VueJS #
Find similar titles

You are seeing an old version of the page. Go to latest version

Vue.JS #

VueJs_1 Vue.js

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

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

차이점(Angular vs React vs Vue) #

VueJs_2

앵귤러 (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 등 등 존재한다.

VueJs_3 VSCode

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

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

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

IDE 유료/무료 비고
VSCode 무료 가벼운 프로젝트에 사용, 플러그인 제공
Atom 무료 플러그인 제공
WebStorm 유료 실무 프로젝트에 이용
0.0.1_20210630_7_v33