Vue.js

1) Vue.js는 프론트엔드 웹 프레임워크로, 사용자 인터페이스를 개발하기 위한 라이브러리
2) MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리

장점

• 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
• 앵귤러의 데이터 바인딩 특성과 리액트의 Virtual DOM 렌더링 특징을 모두 가지고 있다.
• MVVM패턴 개발 방식으로 로직 분리 및 유지보수 용이

Vue CLI(Vue Command Line Interface)

• Vue CLI는 Vue.js 프로젝트를 생성, 관리하고 빌드할 수 있는 공식 CLI 도구입니다.
• Vue CLI를 사용하면 프로젝트 구성, 템플릿 선택, 의존성 관리, 개발 서버 실행 등을 쉽게 수행할 수 있습니다.
• Vue CLI를 통해 Vue 2 및 Vue 3 프로젝트를 생성하고 관리할 수 있습니다.

참고 : chatGPT

Vue 2

• Vue 2.x는 Vue.js의 이전 버전으로, 많은 프로젝트에서 아직 사용되고 있다.
• Vue 2는 가볍고 직관적인 문법을 가지며, Vue Router 및 Vuex와 같은 공식 플러그인들을 지원한다.

참고 : chatGPT

Vue 3

• Vue 3.x는 Vue.js의 최신 버전으로, Vue.js 핵심 코드를 완전히 재작성하여 향상된 성능과 새로운 기능을 제공한다.
• Vue 3는 Composition API라는 새로운 개발 방식을 도입하여 코드의 가독성과 재사용성을 향상시켰다.
• Vue 3는 TypeScript를 기본으로 지원하며, Vue 2에서 호환성을 유지하면서 업그레이드할 수 있도록 노력하고 있다.

참고 : chatGPT

vue create

vue create 명령어는 Vue CLI를 사용하여 새로운 Vue.js 프로젝트를 생성하는 명령어이다.

Vue CLI 버전에 따라서 vue create 명령을 사용하여 Vue.js 프로그젝트를 생성할 때의 환경과 설정이 바뀔 수 있다.

1. 프로젝트 템플릿
   Vue CLI 버전에 따라 기본 프로젝트 템플릿이 변경될 수 있습니다. 새로운 버전에서는 더 많은 기능이나 라이브러리를 포함하거나 다른 기본 설정을 사용할 수 있습니다.
2. 기본 의존성 버전
   Vue CLI의 새로운 버전은 일반적으로 빌드 도구, 라이브러리, 및 의존성 패키지의 버전을 업데이트합니다. 이로 인해 프로젝트 생성 시 사용되는 의존성의 버전이 변경될 수 있습니다.
3. 프로젝트 설정
   Vue CLI의 버전에 따라 프로젝트 생성 시 설정되는 기본 설정이 변경될 수 있습니다. 예를 들어, Babel, ESLint, CSS 전처리기, 테스팅 도구 등의 설정이 버전에 따라 다를 수 있습니다.
4. 플러그인 및 프리셋
   Vue CLI는 플러그인과 프리셋을 통해 추가 기능을 제공합니다. 새로운 Vue CLI 버전에서는 이러한 플러그인과 프리셋이 업데이트되거나 새로 추가될 수 있습니다.
5. 빌드 및 개발 환경 설정
   Vue CLI 버전에 따라 빌드 및 개발 환경 설정이 변경될 수 있습니다. 웹팩 구성 및 다른 빌드 도구의 설정이 변경될 수 있습니다.

결론

프로젝트 생성 시에는 항상 vue create 명령어를 사용하여 Vue CLI의 최신 버전을 기준으로 프로젝트를 생성하는 것이 좋다.

Vue Instance

1) 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다.
2) new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다.

형식

new Vue({
...
})

Vue Router와 Vue CLI 관련

• Vue Router 3의 경우, Vue CLI를 사용하여 Vue Router를 설치하면 자동으로 Vue2 기반의 설정이 생성된다.
• Vue Router 4의 경우, Vue CLI를 사용하여 Vue Router를 설치하면 Vue 3 기반의 설정이 생성된다.

Vue Router 3 과 Vue Router 4 차이

1. Composition API 지원
2. TypeScript 지원
3. Router 메서드 변경
4. 라우터 기능의 개선
5. 라우터 설정 구문 변경
6. 플러그인 방식 변경
7. 런타임 최적화

데이터바인딩

단방향 데이터 바인딩(React)
Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미

양방향 데이터 바인딩(Vue)
Javascript(Model)과 HTML(View) 사이에 ViewModel이 존재하여 하나로 바인딩 되어서 둘 중 하나만 변경되어도 함께 변경되는 것을 의미

참고 : https://adjh54.tistory.com/49

React 와 Vue 비교

공통점

• 가상 DOM을 사용한다.
• 반응적이고 조합 가능한 컴포넌트를 제공한다.
• 코어 라이브러리에만 집중하고 있고 라우팅 및 상태관리하는 컴패니언 라이브러리가 있다.
  리액트 라우팅 라이브러리 : React Router Dom & 리액트 상태관리 라이브러리 : Redux, Recoil, React-Query
  뷰 라우팅 라이브러리 : Vue Router & 뷰 상태관리 리아브러리 : Vuex

차이점

• React는 단방향 데이터 바인딩이고 Vue는 양방향 데이터 바인딩 방식을 이용한다.
• 리액트는 JSX 형태로 코드를 작성
• Vue의 Virtual Dom구현이 React보다 빠르고 오버헤드가 적다.
  *오버헤드 : 어떤 처리를 하기 위해 들어가는 간접적인 처리 시간, 메모리 등을 말한다.
• Vue는 템플릿을 사용해 쉽고 빠르게 제작이 가능하며 진입 장벽이 낮다.

참고 : https://80000coding.oopy.io/f27f6183-0523-43e1-ab90-8f8175bd4a88