vue 차이에 해당되는 글 2건

Angular.js vs Vue.js 차이점

웹 2024. 1. 16. 23:24

Angular.js와 Vue.js의 간단한 차이점 비교.

 

1. 설계 철학 및 크기:

  • AngularJS: AngularJS는 Google에서 개발하였고, 전체적인 프레임워크로서 기능이 많이 내장되어 있습니다. 따라서 프로젝트가 커지면서 복잡도가 증가할 수 있습니다.
  • Vue.js: Vue.js는 Evan You에 의해 개발되었으며, 더 경량하고 진입 장벽이 낮은 설계를 갖고 있습니다. 필요한 부분만 사용할 수 있도록 설계되었으며, 점진적으로 도입하기에 용이합니다.

2. 바인딩과 리액티브 시스템:

  • AngularJS: AngularJS는 양방향 데이터 바인딩을 강조하며, 데이터의 변경이 자동으로 뷰에 반영되고, 반대로 사용자의 입력이 모델에 반영됩니다.
  • Vue.js: Vue.js도 양방향 데이터 바인딩을 지원하지만, 단방향 바인딩도 사용할 수 있습니다. Vue.js의 리액티브 시스템은 컴포넌트 간에 데이터를 효과적으로 관리하고 업데이트하는 데 중점을 둡니다.

3. 컴포넌트 기반 접근:

  • AngularJS: AngularJS도 컴포넌트 기반의 아키텍처를 사용합니다. 그러나 컴포넌트 정의 및 구성이 AngularJS의 경우에는 조금 더 복잡할 수 있습니다.
  • Vue.js: Vue.js는 가장 간단한 형태의 컴포넌트 정의 및 구성을 가지고 있습니다. 이는 개발자에게 더 직관적이며 간편한 문법을 제공합니다.

4. 라우팅 및 상태 관리:

  • AngularJS: AngularJS는 기본적으로 라우팅 및 상태 관리와 관련된 모듈을 제공합니다.
  • Vue.js: Vue.js는 Vue Router를 사용하여 라우팅을 처리하며, Vuex를 사용하여 상태 관리를 합니다. 이는 각각 별도의 라이브러리로 존재하며 필요에 따라 처리할 수 있습니다.

5. 학습 곡선:

  • AngularJS: AngularJS는 기능이 많고 복잡한 구조를 가지고 있어 러닝 커브가 다소 까다롭습니다.
  • Vue.js: Vue.js는 간단하고 직관적인 API를 가지고 있어서 AngularJS에 비해 더 쉽게 학습할 수 있습니다.

* Anuglar js 샘플 코드

<!-- index.html -->
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="myCtrl">
  <h1>{{ message }}</h1>
  <button ng-click="changeMessage()">Change Message</button>
</body>

</html>
// app.js
angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.message = 'Hello, AngularJS!';

  $scope.changeMessage = function() {
    $scope.message = 'Message changed!';
  };
});

 - ng-app과 ng-controller 디렉티브를 사용하여 앵귤러 애플리케이션을 초기화하고, 컨트롤러에서 데이터와 메서드를 정의하여 템플릿에 반영합니다.

 

* Vue js 샘플 코드

<!-- index.html -->
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>

<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>

  <script src="app.js"></script>
</body>

</html>
// app.js
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!',
  },
  methods: {
    changeMessage: function() {
      this.message = 'Message changed!';
    },
  },
});

 - Vue 인스턴스를 생성하여 데이터와 메서드를 정의하고, 템플릿에서 데이터를 바인딩하고 메서드를 호출합니다.

 - @click은 Vue.js에서의 이벤트 처리 방식을 나타냅니다.

'웹' 카테고리의 다른 글

HTTP vs 웹소켓 단순 비교  (0) 2021.12.17
,

Vue2 vs Vue3 차이점

웹/Vue.js 2024. 1. 14. 21:20

Vue2와 Vue3의 간단한 차이점 비교.

 

* 공식문서

https://ko.vuejs.org/guide/introduction.html

 

 

1. 성능 개선:

  • Vue.js 3는 가상 돔(Virtual DOM) 업데이트 알고리즘을 개선하여 성능을 향상시켰습니다. 렌더링 성능이 개선되어 더 효율적인 업데이트를 가능케 합니다.

2. Composition API:

  • Vue.js 3에서는 Composition API가 도입되었습니다. 이는 코드를 더 모듈화하고 재사용 가능한 로직을 쉽게 추상화할 수 있도록 하는 새로운 방식의 API입니다.
  • Vue.js 2에서는 Options API가 주로 사용되었지만, Composition API는 더 유연하고 강력한 코드 구조를 제공합니다.
Vue.js2 Options API 
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js 2!',
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed!';
    },
  },
};
</script>

 - data 속성과 methods 옵션을 사용하여 상태와 메서드를 정의하고, 템플릿에서 해당 데이터와 메서드를 사용합니다.

Vue.js 3 Cpmposition API 
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue.js 3!');

    function changeMessage() {
      message.value = 'Message changed!';
    }

    return {
      message,
      changeMessage,
    };
  },
};
</script>

 - setup 함수를 사용하여 상태와 메서드를 정의합니다.

 - ref 함수를 사용하여 반응적인 데이터를 만들고, setup 함수에서 해당 데이터와 메서드를 반환합니다.

 - 이를 사용하여 템플릿에서 데이터와 메서드를 사용합니다.

 

3. 퍼포먼스 최적화:

  • Vue.js 3는 더 작은 번들 크기와 빠른 초기 로딩을 위해 모듈화된 설계와 Tree-shaking을 통한 최적화가 이루어졌습니다.
<!-- main.js -->
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

 

 

4. 타입스크립트 지원:

  • Vue.js 3는 타입스크립트를 공식적으로 지원합니다. 이는 개발자에게 코드를 더 안정적이고 유지보수하기 쉽게 만들어주는 장점을 제공합니다.
// App.vue
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello, Vue.js 3 with TypeScript!',
    };
  },
});
</script>

 

5. Fragment:

  • Vue.js 3에서는 더 이상 불필요한 DOM 래퍼 요소가 필요하지 않고 여러 노드를 그룹화하기 위한 Fragment 문법이 도입되었습니다.
Vue.js 3 Fragment:
<template>
  <div>
    <h1>Main App</h1>
    <FragmentExample />
  </div>
</template>

<script>
import FragmentExample from './FragmentExample.vue';

export default {
  components: {
    FragmentExample,
  },
};
</script>
// FragmentExample.vue
<template>
  <>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </>
</template>

 - <>와 </>를 사용하여 Fragment를 생성하고 여러 요소를 묶어서 사용합니다.

 - 이를 통해 불필요한 래퍼 요소를 생성하지 않고 여러 요소를 그룹화합니다.

 

6.  Teleport:

  • Vue.js 3에는 Portal의 개념을 기반으로 하는 Teleport라는 새로운 컴포넌트가 추가되었습니다. 이를 사용하면 DOM 트리에서 자식을 특정 위치로 이동시킬 수 있습니다.
Vue.js 3 Teleport:
<template>
  <div>
    <h1>Main App</h1>
    <TeleportDestination />
  </div>
</template>

<script>
import TeleportDestination from './TeleportDestination.vue';

export default {
  components: {
    TeleportDestination,
  },
};
</script>
// TeleportDestination.vue
<template>
  <Teleport to="#destination">
    <h2>Teleported Heading</h2>
  </Teleport>
</template>

<script>
import { Teleport } from 'vue';

export default {
  components: {
    Teleport,
  },
};
</script>

 - Teleport 컴포넌트를 사용하여 자식 컴포넌트의 요소를 다른 위치로 이동시킵니다.

 

7.  데이터 반응성( Reactivity ) 개선:

  • Vue.js 3는 반응성을 개선하여 더 많은 상황에서 반응적인 데이터를 더 효과적으로 처리할 수 있게 되었습니다.
<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue.js 3!',
    });

    function changeMessage() {
      state.message = 'Message changed!';
    }

    return {
      message: state.message,
      changeMessage,
    };
  },
};
</script>

 

 - reactive 함수를 사용하여 상태를 만들고, setup 함수에서 해당 상태를 반환합니다.

 - 함수형 API를 사용하여 상태를 조작하고 템플릿에서 사용할 수 있습니다.

'웹 > Vue.js' 카테고리의 다른 글

[인프런] 웹 게임을 만들며 배우는 Vue 2  (97) 2024.01.24
[인프런] 웹 게임을 만들며 배우는 Vue 1  (132) 2024.01.23
[CodingApple] Vue 로 만드는 웹앱 3  (104) 2024.01.12
[CodingApple] Vue 로 만드는 웹앱 2  (98) 2024.01.11
[CodingApple] Vue 로 만드는 웹앱 1  (108) 2024.01.10
,
1

티스토리툴바