Vue.js 란

1. vue.js

SPA(Single Page Application)을 개발하는데 있어 React.js에 이어 범용적으로 사용되는 프레임 워크이다. Vue.js의 개발자인 Evan You는 가벼우면서도 간단하고 유연한 프론트엔드 개발 도구를 원했습니다. 특히 작은 규모의 프로젝트부터 대규모의 복잡한 프로젝트까지 효과적으로 개발할 수 있는 프레임워크가 필요했습니다. Angular.js 는 기능이 많고 강력하지만, 사용이 어렵고 프로젝트 구조가 복잡해지는 단점이 있었습니다. Evan You는 이러한 Angular.js의 단점들을 보완하고자 2014년에 Vue.js를 개발하였습니다.

 

▶SPA(Single Page Application): 페이지 전환 없이 동적으로 콘텐츠를 로드하고 업데이트 하는 웹 어플리케이션, 초기에 전체 페이지를 로드하고, 사용자 인터랙션에 따라 필요한 데이터만 서버로부터 비동기적으로 로드하여 업데이트합니다.

2. 장점

• 가벼운 프레임워크  
  • 단순하고 직관적인 문법을 가지고 있어 러닝커브가 낮고 개발이 편리하다
• 가상 DOM 사용하여 렌더링 성능 향상
  • React.js의 가상 DOM과 유사한 방식을 채택하여 효율적인 랜더링을 구현하고, DOM 조작을 최소화하여 성능을 향상시킴
  • 메모리 상에서 가상 DOM을 변경하고, 최종 브라우저의 실제 DOM에 변경되는 부분은 이전 DOM과 차이점만 비교하여, DOM 변경을 최소화하는 기법을 사용합니다.갓
• 기존 웹 어플리케이션 구성과 유사성
  
  • Vue.js가 제공하는 Template 형식은 기존 html, css 기반의 웹페이지 구성과 유사합니다.
• 통합 프레임워크
  
  • React.js는 라이브러리로 UI 렌더링 요소에 집중한 반면, Vue.js는 필요한 도구를 자체적으로 포함합니다. 기본으로 상태 관리 도구 Vue jsx, 페이지 전환을 위한 Vue.js Router를 제공합니다.

3. 특징

• 양방향 데이터 바인딩
  
  • 양방향 데이터 바인딩은 데이터의 변경사항이 자동으로 화면에 반영되며, 화면에 입력한 입력 정보가 데이터를 업데이트하는 것이다. 단방향 데이터 바인딩을 사용하는 React.js와 다르게 Vue.js는 데이터의 변화가 자동으로 화면에 반영되는 장점이 있어 개발자가 데이터와 UI를 별도로 동기화할 필요가 없습니다.
• 컴포넌트 기반 아키텍처
  • 컴포넌트 기반 아키텍처를 사용하여 UI를 재사용 가능한 작은 컴포넌트로 조합하여 전체 화면을 구성할 수 있도록 해줍니다.
• 가벼움과 빠른 실행속도
  • 가상 DOM을 통해 변경된 부분만 업데이트하고v 최소한의 DOM 조작을 수행하여 빠른 렌더링 속도와 효율적인 업데이트 관리를 제공합니다.

4. 관련 도구

• Vue js Router
  
  • 라우팅을 관리하기 위한 공식 라우터 라이브러리. 페이지 전환과 URL을 기반으로 뷰를 동적으로 로딩하고 관리하는 기능을 제공합니다.
• Vue jsx
  
  • 상태 관리를 위한 라이브러리. 중앙 집중식 스토어로 애플리케이션의 데이터와 상태를 효율적으로 관리하고 상태 변경을 추적하는데 사용됩니다.
• Vue jstify
  • UI를 디자인하기 위해 재사용 가능한 컴포넌트와 스타일을 제공하는 머티리얼 디자인 컴포넌트 프레임워크입니다.
• Nuxt.js
  
  • SSR(서버 사이드 렌더링) 과 코드 스플리팅을 지원하여 SEO(검색 엔진 최적화)에 우수하고 더 빠른 로딩 속도를 제공하는 프레임 워크입니다.

▶SSR(서버 사이드 렌더링): 웹 페이지를 서버 측에서 렌더링하고, html을 클라이언트에게 전송하는 방식입니다.

▶코드 스플리팅: 웹 어플리케이션의 코드를 여러 개의 작은 번들로 분리하는 기법입니다.

▶SEO(검색 엔진 최적화): 웹 페이지가 검색 엔지 결과에서 더 높은 순위를 차지하도록 최적화하는 과정입니다.

 

참고문서:

https://www.elancer.co.kr/blog/view?seq=171

Vue js란, 프론트엔드 개발 시 Vue js를 선호하는 이유! I 이랜서 블로그

https://v2.ko.vuejs.org/v2/guide

시작하기 — Vue.js