vue3에 해당되는 글 8건

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
,

[CodingApple] Vue 로 만드는 웹앱 3

웹/Vue.js 2024. 1. 12. 23:08

Coding Apple 강의 4일차.

심심해서 만들어보는 Vue JS 강의 수강 1

 

Vue로 간단한 웹앱 만들어보기.

  1. 준비물

     > nodejs 설치

     > vs code 설치

     > vetur 설치 (vscode 확장 프로그램, vue 2 버전)

     > voloar 설치 (vscode 확장 프로그램, vue 3 버전)

     > HTML Css Surpport (vscode 확장 프로그램)

     > vue 3 snippets (vscode 확장 프로그램)

     > vue.js 설치

 

   2. App.vue (데이터 export, import를 통해 상품 리스트 구현)

<template>
  <!-- 
    * 동적인 UI 만드는법
    1. UI의 현재 상테를 데이터로 저장해둠
    2. 데이터에 따라 UI가 어떻게 보일지 작성
    v-if: 해당 HTML 을 보여줄지말지 결정
   -->
  <div class="black-bg" v-if="모달창열렸니">
    <div class="white-bg">
      <h4>상세페이지임</h4>
      <p>상세페이지 내용임</p>
      <button @click="모달창열렸니 = false">닫기</button>
    </div>
  </div>
  <div class="menu">
    <!-- Vue의 HTML 반복문 => <태그 v-for="변수명 in (몇회 혹은 Object)" :key="유니크값(보통 인덱스 사용)">-->
    <a v-for="(변수명, i) in 메뉴들" :key="i">{{ 변수명 }}</a>
  </div>
  <div v-for="(원룸, i) in 원룸들" :key="i">
    <img :src="원룸.image" class="room-img" />
    <h4>{{ 원룸.title }}</h4>
    <p>{{ 원룸.content }}</p>
    <p>{{ 원룸.price }}</p>
  </div>
</template>

<script>
//oneroom.js에서 export한 데이터 가져오기 export 하는 방법에 따라 {}로 감싸거나 단일 변수를 사용하면 된다
import 원룸데이터 from "./assets/oneroom.js"; //export default 로 했을 때 가져오는 방법
// import { a, b, ... } from "./assets/oneroom.js";  //export {a, b, ... }로 했을 때 가져오는 방법

export default {
  name: "App",
  data() {
    //데이터 보관함
    return {
      원룸들: 원룸데이터,
      모달창열렸니: false,
      신고수: [0, 0, 0],
      //변수 선언 영역 (Object 자료형으로 저장해야함)
      메뉴들: ["Home", "Shop", "About"],
      스타일: "color: blue",
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      prices: ["50만원", "70만원", "80만원"],
      이미지경로: ["assets/room0.jpg", "assets/room1.jpg", "assets/room2.jpg"],
      이미지파일명: ["room0.jpg", "room1.jpg", "room2.jpg"],
    };
  },
  //Vue 에서 함수를 만들고 싶으면 methods:{} 안에 선언하면 됨
  methods: {
    increase(i) {
      this.신고수[i] += 1;
    },
  },
  components: {},
};
</script>

<style>
body {
  margin: 0;
}
div {
  box-sizing: border-box;
}
.black-bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  padding: 20px;
}
.white-bg {
  width: 100%;
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.room-img {
  width: 100%;
  margin-top: 40px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: white;
  padding: 10px;
}
</style>

 

    3. oneroom.js (외부 데이터)

const data = [
  {
    id: 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000,
  },
  {
    id: 1,
    title: "Changdong Aurora Bedroom(Queen-size)",
    image: "https://codingapple1.github.io/vue/room1.jpg",
    content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
    price: 450000,
  },
  {
    id: 2,
    title: "Geumsan Apartment Flat",
    image: "https://codingapple1.github.io/vue/room2.jpg",
    content: "금산오거리 역세권 아파트입니다. 애완동물 불가능 ?",
    price: 780000,
  },
  {
    id: 3,
    title: "Double styled beds Studio Apt",
    image: "https://codingapple1.github.io/vue/room3.jpg",
    content: "무암동인근 2인용 원룸입니다. 전세 전환가능",
    price: 550000,
  },
  {
    id: 4,
    title: "MyeongIl Apartment flat",
    image: "https://codingapple1.github.io/vue/room4.jpg",
    content: "탄천동 아파트 월세, 남향, 역 5분거리, 허위매물아님",
    price: 680000,
  },
  {
    id: 5,
    title: "Banziha One Room",
    image: "https://codingapple1.github.io/vue/room5.jpg",
    content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
    price: 370000,
  },
];

// var apple = 10;

export default data; //data 변수 export
// export { data, apple }; //2개 이상의 변수 혹은 함수 export

 

 

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

[인프런] 웹 게임을 만들며 배우는 Vue 2  (97) 2024.01.24
[인프런] 웹 게임을 만들며 배우는 Vue 1  (132) 2024.01.23
Vue2 vs Vue3 차이점  (118) 2024.01.14
[CodingApple] Vue 로 만드는 웹앱 2  (98) 2024.01.11
[CodingApple] Vue 로 만드는 웹앱 1  (108) 2024.01.10
,
1 2 3

티스토리툴바