본문 바로가기
Language/Vue.js

[개념] Vue.js란?

bestdevelop-lab 2025. 3. 6. 13:10
728x90
Vue.js란?

  • 사용자 인터페이스(UI) 개발에 초점을 맞춘 오픈소스 프론트엔드 프레임워크로, React와 Angular의 개념을 참고하여 가볍고 직관적인 문법을 제공하는 것이 특징
  • 대표적인 프론트엔드 프레임워크 중 하나로 React, Angular와 함께 널리 사용
  • SPA(Single Page Application) 및 MPA(Multi-Page Application) 개발 모두 가능하며, 상태 관리(Vuex, Pinia)와 라우팅(Vue Router) 기능을 활용하여 실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 등 다양한 웹 애플리케이션 개발에 사용
  • SPA(Single Page Application)는 전체 페이지를 새로고침하지 않고 필요한 데이터만 동적으로 업데이트하는 웹 애플리케이션을 의미
  • 기존의 다중 페이지 애플리케이션(MPA)은 사용자가 링크를 클릭할 때마다 서버에서 새로운 HTML을 받아오는 방식이지만, SPA는 초기에 필수적인 리소스를 로드하고 이후 필요한 데이터만 비동기적으로 요청하여 화면을 업데이트하는 방식으로 동작하여 빠른 사용자 경험과 높은 성능을 제공
Vue.js가 개발된 이유
  • Evan You는 Google에서 내부 도구를 개발하면서 AngularJS를 사용하여 강력한 기능을 경험했지만 AngularJS는 양방향 데이터 바인딩, DI(의존성 주입), 강력한 템플릿 기능 등으로 인해 대규모 프로젝트에는 유리하지만, 작은 프로젝트에서는 불필요하게 복잡할 수 있다는 문제점을 느낌
  • 그렇게 AngularJS에서 영감을 받고 React를 참고하여 개발된 Vue.js는 특히 작은 규모의 프로젝트에서도 쉽게 사용할 수 있도록 설계되었으며, 점진적으로 확장하여 대규모 프로젝트에도 적용할 수 있도록 발전
  • 이러한 동기로 Evan You는 2014년에 Vue.js 개발을 시작했으며, 2015년 2월에 첫 공식 릴리스를 발표
Vue.js를 선호하는 이유
  • 웹 애플리케이션 개발에서 프론트엔드 프레임워크로는 Vue.js, React, Angular가 주로 사용됨
  • React가 가장 인기 있는 웹 프론트엔드 프레임워크이지만 새로운 JSX 문법을 익혀야 하는 등 Vue.js보다 러닝 커브가 높음
  • 개발자들은 프로젝트에 적합한 프레임워크를 선택해야 하는데, Vue.js는 React에 이어 두 번째로 대중적인 프론트엔드 프레임워크로 평가받고 있음
기존 웹 애플리케이션 구성과 유사성
  • Vue.js의 가장 큰 장점 중 하나는 배우기 쉽다는 점이 있음
  • 기존에 HTML, CSS, JavaScript를 알고 있는 개발자라면 Vue.js를 빠르게 익히고 적용 가능
  • 특히 Vue.js의 Template 문법은 기존 HTML 기반 웹페이지 구조와 유사하여 기존 프로젝트를 Vue.js로 포팅할 때도 용이
개발자의 신규 프레임워크에 대한 높은 적응도
  • 새로운 프레임워크를 배우는 데 있어 러닝 커브는 중요한 요소임
  • React는 JSX 문법을 학습해야 하는 부담이 있는 반면, Vue.js는 기존 웹 개발 방식과 유사한 구조를 가지고 있어 진입 장벽이 낮음
  • 이러한 이유로 기존 웹 기술을 익힌 개발자들이 신규 프레임워크를 도입할 때 Vue.js를 선호하는 경향이 있음
웹개발을 위한 통합 프레임워크
  • Vue js는 React와 다르게 프레임워크으로 필요한 구성요소를 자체적으로 제공
  • React는 라이브러리로 UI 렌더링 요소에 집중한 반면 Vue js는 필요한 도구를 자체적으로 포함
  • 예를 들어 React는 전역적 상태 관리를 하려면 redux라는 3rd party 모듈을 사용하여야 하고, 페이지 전환을 하려면 3rd party 도구인 react router를 사용해야하지만, Vue js는 자체적으로 상태 관리 도구인 Vue jsx를 내장하고 있으며, 또한 페이지 전환을 위한 기능으로 Vue js Router를 제공

 

  • Vue.js는 UI 렌더링만 담당하는 React와 달리, 웹 애플리케이션 개발에 필요한 다양한 기능을 자체적으로 제공하는 프레임워크
    • 상태 관리 : React는 전역 상태 관리를 위해 Redux와 같은 외부 라이브러리를 사용해야 하지만, Vue.js는 Vuex(Pinia) 같은 상태 관리 도구를 기본적으로 제공
    • 라우팅 : React에서는 react-router와 같은 별도의 라이브러리를 설치해야 하지만, Vue.js는 공식적으로 Vue Router를 제공하여 페이지 전환을 쉽게 구현 가능

 

Vue.js의 특징
양방향 데이터 바인딩
  • Vue.js는 양방향 데이터 바인딩(Two-Way Data Binding)을 지원
  • 양방향 데이터 바인딩이란 데이터가 변경되면 자동으로 UI에 반영되고(UI 업데이트), 사용자의 입력이 데이터에 즉시 반영되는(데이터 업데이트) 방식
  • 이러한 특징은 React의 단방향 데이터 흐름과 다르며 Angular의 양방향 바인딩 방식과 유사
  • 양방향 데이터 바인딩은 데이터의 변화가 자동으로 화면에 반영되는 장점이 있어서 개발자가 데이터와 UI를 별도로 동기화할 필요가 없기 때문에 코드의 양이 줄어들고, 프로젝트를 더 빠르게 구축 가능
  • 특히 사용자 입력과 같은 상호 작용이 많은 폼 컨트롤 등의 UI 요소를 다룰 때 매우 유용
컴포넌트 기반 아키텍처
  • Vue.js는컴포넌트 기반 아키텍처(Component-Based Architecture)를 사용하여 UI를 재사용 가능한 작은 컴포넌트 단위로 구성 가능
  • 웹 애플리케이션은 버튼, 입력 폼, 이미지, 카드 UI 등 다양한 요소들로 구성되며, 이러한 요소들은 여러 페이지에서 반복적으로 사용되거나, 동일한 페이지 내에서 여러 번 렌더링 될 수 있음
  • Vue.js의 컴포넌트 시스템을 활용하면 각 요소를 독립적인 컴포넌트로 분리하여 개발할 수 있으며, 이를 조합하여 큰 규모의 웹 애플리케이션을 마치 레고 블록을 조립하듯이 구축 가능
  • 컴포넌트 단위 개발 방식은 유지보수성을 높이고, 코드 재사용성을 극대화하는 장점을 가짐
 가벼움과 빠른 실행속도
  • 가볍고 빠른 실행 속도를 제공하며 가상 DOM(Virtual DOM)을 사용하여 효율적인 렌더링을 구현
  • 가상 DOM이란, 실제 DOM을 직접 조작하는 것이 아니라 메모리 상에서 가상의 DOM을 먼저 변경하고 변경된 부분만 실제 DOM에 반영하는 방식
  • 이 방식은 필요한 최소한의 DOM 조작만 수행하므로 렌더링 성능이 향상되며, 애니메이션이나 동적인 UI 요소를 더 부드럽게 처리 가능
  • 가벼운 크기(초기 로딩 속도가 빠름)와 효율적인 렌더링 방식 덕분에 빠른 반응성이 요구되는 애플리케이션 개발에 적합
Vue.js의 장점
  • Vue.js는 가벼우면서도 유연한 프론트엔드 프레임워크로, React와 Angular의 장점을 결합하면서도 배우기 쉽고 프로젝트 구성이 간단하다는 장점을 가짐
  • 특히, 컴포넌트 기반의 SPA(Single Page Application) 개발을 위한 프레임워크로서, Angular와 유사한 구조를 가지면서도 몇 가지 차별점과 개선점을 제공
가벼운 프레임워크
  • Angular는 강력한 기능을 제공하지만, 초보자가 익히기 어렵고 프로젝트 구성이 복잡하며 상대적으로 용량이 큰 프레임워크임
  • 반면, Vue.js는 단순하고 직관적인 문법을 제공하여 배우기 쉽고, 비교적 가벼운 구조로 되어 있어 개발이 더욱 간편
가상 DOM을 이용한 렌더링 성능 최적화
  • Vue.js는 가상 DOM(Virtual DOM) 을 활용하여 효율적인 렌더링을 구현하며, 불필요한 DOM 조작을 최소화하여 성능을 향상시킴
  • 가상 DOM의 동작 방식
    1. Vue.js는 메모리 상에 가상 DOM을 생성하고, 변경 사항을 이 가상 DOM에 먼저 적용
    2. 변경된 가상 DOM과 기존 가상 DOM을 비교하여 차이점(변경된 부분)만 계산
    3. 실제 DOM에는 변경된 부분만 반영하여 렌더링 성능을 최적화
  • 이러한 방식 덕분에 Vue.js는 UI가 동적으로 변경되는 웹 애플리케이션에서 성능 저하 없이 원활한 렌더링을 제공
  • 반면, Angular는 실제 DOM을 직접 조작하는 방식을 사용하기 때문에 애플리케이션 크기와 복잡도가 증가할수록 렌더링 속도가 저하될 수 있음
  • Vue.js는 React와 마찬가지로 가상 DOM을 채택하여 이러한 문제를 해결
Vue js가 가지는 코드 상의 개발 편의성 
기존 html과 유사한 Template 형식 제공

Vue.js의 Template 문법과 React의 JSX 문법을 사용한 동일한 코드 예시

  • HTML과 유사한 구조
    • Vue.js는 <template> 태그를 사용하여 기존 HTML과 유사한 방식으로 UI를 구성 가능
    • React와 달리 JSX 문법을 사용하지 않으므로 순수한 HTML 문법을 유지 가능
  • 기업에서의 도입 용이성
    • HTML을 기반으로 한 기존 프로젝트에서 Vue.js를 점진적으로 적용하기 쉬워 새로운 SPA 웹 애플리케이션을 도입하려는 기업들에게 적합
    • HTML에 익숙한 개발자도 Vue.js의 템플릿 문법을 빠르게 익힐 수 있어 러닝 커브가 낮음
  • 직관적인 데이터 바인딩
    • Vue.js는 {{ }} 구문을 활용한 Mustache 스타일의 데이터 바인딩을 제공하여 HTML 요소와 JavaScript 데이터를 쉽게 연결 가능
    • 이벤트 바인딩도 @click="methodName" 형식으로 제공되어, 기존 HTML의 onclick 속성과 유사
  • React와 비교하면?
    • React는 JSX(JavaScript XML) 문법을 사용하여 HTML과 JavaScript를 결합하는 방식
    • Vue.js는 순수한 HTML 기반 템플릿을 유지하면서도, React와 같은 컴포넌트 기반 개발 방식을 지원
    • 기존 HTML 개발자들은 Vue.js의 문법이 더 익숙하게 느껴질 수 있으며 빠르게 적응할 수 있음
개발 방식의 단순함(통일된 방식)

  • Vue.js vs React 조건부 렌더링 방식
    • Vue.js : v-if와 v-else를 사용하여 조건부 렌더링을 단순한 방식으로 제공
    • React : ? :(삼항 연산자), && 연산자, if문 등 다양한 방식으로 조건부 렌더링을 구현
  • Vue.js의 장점: 단순한 개발 방식과 협업 용이성
    • 특정 기능을 구현하는 방식이 통일된 문법(v-if 등) 으로 제공되므로 초급 개발자도 쉽게 학습 가능
    • React는 여러 방식으로 같은 기능을 구현할 수 있어 개발자마다 스타일이 달라질 가능성이 높으며, 초급 개발자에게는 부담이 될 수 있음
    • 팀 프로젝트에서 Vue.js를 사용하면 코드 스타일이 통일되므로 협업이 쉬워지고 유지보수도 용이
Vue js의 다양한 생태계와 도구
Vue js Router

 

  • Vue.js 애플리케이션에서 클라이언트 사이드 라우팅을 관리하는 공식 라이브러리
  • 페이지 간 전환을 쉽게 구현하고, URL 기반으로 동적 뷰를 로딩할 수 있도록 지원

 

Vuex

 

  • Vue.js 애플리케이션의 상태 관리를 위한 공식 라이브러리 (현재는 Pinia가 권장됨)
    → Vuex는 현재 Vue 3에서는 Pinia라는 더 가벼운 상태 관리 라이브러리로 대체되는 추세
  • 중앙 집중식 스토어 패턴을 사용하여 데이터와 상태를 효율적으로 관리
  • 상태 변경 추적이 용이하여 대규모 애플리케이션에서 활용

 

Vuetify

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

 

  • Vue.js 애플리케이션에서 머티리얼 디자인 스타일을 적용할 수 있는 UI 컴포넌트 프레임워크
  • 버튼, 입력 폼, 카드 등 재사용 가능한 UI 컴포넌트 제공
  • 반응형 디자인과 접근성을 지원하여 빠르게 UI 개발 가능

 

Nuxt.js

 

  • Vue.js 기반의 SSR(Server-Side Rendering) 프레임워크
  • SEO 최적화 및 코드 스플리팅을 지원하여 빠른 로딩 속도 제공
    • SEO 최적화 (Search Engine Optimization, 검색 엔진 최적화)
      • 일반적인 SPA(Single Page Application) 방식의 Vue.js 애플리케이션은 초기 로딩 시 HTML이 거의 비어있고, JavaScript가 실행된 후에 콘텐츠가 채워지는 구조
        →         하지만 검색 엔진 크롤러(Google, Bing 등)는 JavaScript 실행이 어려운 경우가 있어, SPA는 SEO가 불리할 수 있음
      • 하지만 SEO 최적화는 서버에서 미리 HTML을 생성하여 제공
        → 검색 엔진이 쉽게 페이지 내용을 인식 가능
        → 따라서, 검색 결과에서 더 높은 순위를 얻을 가능성이 커짐
    • 코드 스플리팅 (Code Splitting)
      • 기본적으로 Vue.js 같은 프론트엔드 프레임워크는 모든 JavaScript 코드를 한꺼번에 다운로드하는데, 이 파일이 크면 로딩 속도가 느려짐
      • 코드 스플리팅을 사용하면 필요한 코드만 동적으로 로드하여 초기 로딩 속도를 빠르게 함
        Ex) 사용자가 특정 페이지에 접근할 때만 해당 페이지의 JS 파일을 로드할 수 있음
  • 정적 사이트 생성(SSG), 서버리스 렌더링도 가능하여 다양한 프로젝트에 활용됨

 

참고 자료

https://www.elancer.co.kr/blog/detail/171

 

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

Vue js는 자바스크립트 대표 프레임워크로, 사용자 인터페이스(UI) 개발에 초첨을 맞춰 복잡하고 동적인 웹 페이지를 쉽게 개발할 수 있는 개발 도구인데요. 어떤 특징과 이점이 있는지 이랜서와

www.elancer.co.kr

 

728x90

티스토리툴바