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

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

'Front-End > VueJS' 카테고리의 다른 글

[Vue] 6장(완) API 통신  (0) 2025.03.16
[Vue] 5장 상태관리  (0) 2025.03.08
[Vue] 4장 라우팅  (0) 2025.03.05
[Vue] 3장 리스트와 키  (0) 2025.02.28
[Vue] 2장 기본 컴포넌트  (0) 2025.02.23