Front-End/VueJS

[Vue] 1장 Vue란 무엇인가?

Tinkies 2025. 2. 23. 04:20

1. Vue의 탄생 

Vue.js는 2014년 2월 Vue의 개발자 Evan You에 의해 개발된 사용자 인터페이스(UI)를 구축하기 위한 프로그레시브 자바스크립트 프레임워크입니다. Vue는 컴포넌트 기반 아키텍처를 지원해, 재사용 가능한 UI 컴포넌트를 만들 수 있고, 반응형 데이터 바인딩과 가상 DOM을 사용해 성능을 최적화할 수 있는 언어입니다.


2.Vue의 탄생 계기

Vue.js는 2014년 에반 유(Evan You)라는 개발자가 Google에서 AngularJS를 사용해 개발하면서 Angular를 기반으로 가벼운 프로그래밍 언어를 만들어볼까?라며 개발하게된 언어입니다. Vue.js는 다음과 같은 목표를 가지고 있습니다.

  • 간결함: 학습 곡선이 낮고 간단한 API를 제공함
  • 유연성: 점진적인 채택이 가능해 필요에 따라 점진적 도입이 가능
  • 컴포넌트 기반: 재사용 가능한 컴포넌트를 만들어 효율적인 개발이 가능함

Vue의 장단점

  • 장점
    • 간단한 학습: JavaScript와 HTML에 흐름을 이해하는 개발자라면 VueJS를 쉽게 배울 수 있음
    • 컴포넌트 기반: 코드의 재사용성과 유지 보수성이 높음
    • 반응형 데이터 바인딩: 데이터의 변화를 UI에 즉시 반영할 수 있음
    • 가상 DOM: 성능 최적화를 통해 빠른 렌더링을 지원
    • 생태계: Vuex(상태 관리), Vue Router(라우팅) 등 다양한 공식 라이브러리와 플러그인 
  • 단점
    • 상대적으로 적은 커뮤니티: React에 비해 커뮤니티가 작아서 자료가 적을 가능성
    • 대규모 애플리케이션에서 복잡성: 프로젝트가 커질수록 구조 관리와 유지 보수에 어려움
    • 문서화: 문서화는 잘 되어 있으나, 일부 경우 예제가 부족할 수 있음 

3.Vue로 개발 할 수 있는 프로젝트 

  • 단일 페이지 애플리케이션(SPA): Vue Router를 사용한 SPA를 쉽게 만들 수 있음
  • 대시보드 애플리케이션: 데이터 시각화를 위한 대시보드 UI 구현
  • 블로그 및 포트폴리오 사이트: Vue의 컴포넌트를 활용한 개인 포트폴리오 사이트 개발 
  • 모바일 애플리케이션: Vue Native를 사용한 모바일 앱 개발 
  • eCommerce: 상품 목록, 장바구니, 결제 시스템 등 구현

4.Vue 세팅하기 

  • Vue CLI 설치: Vue CLI를 사용해 간단하게 Vue 프로젝트를 생성할 수 있음
npm install -g @vue/cli
  • 새 프로젝트 생성하기: Vue CLI를 사용해 새로운 Vue 프로젝트를 생성합니다.
vue create my-project
  • 프로젝트 디렉토리 이동 && 프로젝트 서버실행: 생성한 프로젝트 폴더로 이동해 vue를 실행합니다.
cd my-project && npm run serve 
cd my-project && yarn serve

 

실행 후 locahost:8080으로 이동하면 Vue의 화면이 뜨는 걸 볼 수 있습니다. 


 

 

 

GitHub - Koras02/vue-tutorial: https://thinky.tistory.com/category/Front-End/VueJS

https://thinky.tistory.com/category/Front-End/VueJS - Koras02/vue-tutorial

github.com

 

 

 

LIST