웹프레임워크 | Vue.js 프론트엔트 프레임워크 소개

 

Angular와 React의 장점은 살리고 단점은 보완한 대표적인 프론트엔드 개발 프레임워크 Vue.js를 소개합니다. 

 

 

목차

 

 

「 Vue.js 」 소개

 

Vue.js 란?

사용자 인터페이스 개발에 초점을 맞춰 복잡하고 동적인 웹 페이지를 쉽게 개발할 수 있는 프레임워크입니다. 가볍고 직관적인 문법으로 SPA 개발에 매우 적합한 프레임워크죠.

SPA (Single Page Application)
단일 페이지 애플리케이션으로 페이지 전환 없이 동적으로 콘텐츠를 로드하고 업데이트하는 웹 애플리케이션

 

SPA는 초기에 전체 페이지를 로드에 사용자의 요청에 따라 필요한 데이터만 서버로부터 비동기적으로 로드해 업데이트합니다.

 

 

「 Vue.js 」 장점

 

1) 가볍고 간단한 프레임워크

 

 Angular.js 는 기능이 많고 강력하지만 복잡하기 때문에 개발자들의 많은 시간과 노력이 필요합니다. 그래서 더 가볍고 간단하고 유연한 프론트엔드 프레임워크가 필요해졌고 그래서 개발된 것이 Vue.js입니다.

 

2) 렌더링 성능

 

또한 Angular는 실제 DOM을 직접 조작해 애플리케이션의 크기에 따라 렌더링 성능이 저하됩니다. 하지만 Vue.js는 가상 DOM을 사용하여 렌더링 성능을 향상시킵니다.

 

3) 개발 접근성

 

무엇보다 배우기가 쉽습니다. html, css, javascript 를 안다면 Vue.js 에 쉽게 적응할 수 있습니다. 또한 통합 프레임워크 안에 필요한 도구를 자체적으로 포함하고 있습니다. 라이브러리나 3rd Party 모듈을 사용하지 않고도 개발이 가능합니다.

 

4) 양방향 데이터 바이딩

 

양방향 데이터 바인딩이란 데이터의 변화가 화면에 자동으로 반영된다는 것입니다. 그렇기 때문에 개발자가 데이터와 UI를 별도로 동기화할 필요가 없습니다. 사용자 입력이 많은 폼 컨트롤 등에서 매우 유용한 특징입니다. React는 단방향 데이터 바인딩을 사용하는 처리방식인데 반해 Angular와 유사한 방식입니다.

 

5) 컴포넌트 기반 아키텍처

 

버튼, 입력폼, 이미지와 같은 재사용 가능한 작은 컴포넌트를 조립해 전체 화면을 구성할 수 있습니다.

 

 

 

 

「 Vue.js 」 생태계와 도구

 

Vue Router

Vue 기반 애플리케이션은 보통 한 화면으로 구성된 SPA로 개발됩니다. 한 페이지 내에서도 다른 페이지로 이동할 필요 없이 마치 여러 개의 페이지가 있는 것처럼 작동하게 해주는 것이 바로   Vue Router 입니다.

 

Vue x / Pinia

  Vue x 는 애플리케이션의 상태 관리를 위한 공식 라이브러리입니다. 중앙화된 Store 안에 State 를 통해 애플리케이션의 상태를 관리합니다.

 

  Pinia 는 기존에 사용되던 라이브러리인 Vuex를 대체하는 신규 라이브러리입니다.

 

Vue tify

 Vuetify 는 머터리얼 디자인 컴포넌트 프레임워크입니다. 애플리케이션에 사용자 인터페이스를 디자인하기 위해 재사용 가능한 컴포넌트와 스타일을 제공합니다.

 

Nuxt.js

넉스트는 Vue.js 애플리케이션을 위한 프레임워크입니다. 서버 사이드 렌더링(SSR)과 코드 스플리팅을 지원해 검색 엔진 최적화(SEO)를 제공하며 더 빠른 로딩 속도를 보장합니다.

 

관련포스트

웹프레임워크 | Nuxt.js 프레임워크 개념과 구조

웹프레임워크 | PHP 프레임워크 소개와 폴더 구조

개발환경 | 웹프레임워크의 종류

웹사이트 풀스택 개발자. 무엇을 개발하나?