안녕하세요? "태민"입니다.
오늘은 제가 Vue를 선택한 이유, Vue를 쓰고 느낀 점에 대해서 포스팅 하려고 합니다.
저는 Vue.js를 이용해서 한달분량의 프로젝트를 2개 진행한 경험이 있습니다.
당연히 Vue가 이렇다 저렇다 논할 실력은 아니라고 하지만 나름대로 겪은 경험을 여러분들과 공유하려고 합니다.
내가 느낀 Vue의 장점
1. 작성 구조
저는 초기에 웹프론트를 JSP를 이용해서 작성했습니다.
JSP는 여러분도 알다 싶이 아래처럼 구조로 이루어져 있습니다.
<html>
<head>
</haed>
<body>
</body>
</html>Java 문법을 사용하고 싶다면 JSPScript를 이용해서 자바의 문법도 사용할 수 있습니다.
또한, <script>태그를 이용해 외부 링크를 가져올 수도 있고, 필요한 코딩을 할 수도 있습니다.
<script>태그는 개발자가 원하는 곳에 위치할 수 있는 장점을 가지고 있지만, 개발자끼리 약속을 정하지 않으면 중구난방 코드가 될 수 있다는 단점을 가지고 있는 것 같습니다.
하지만 Vue는 코드 구조가 깔끔합니다.
<template>
</template>
<script>
</script>
<style>
</style><template>에서는 화면구성 , <script>에서는 함수구현, <style>에서는 CSS!
화면구성코드와 함수구현코드가 분리되어 있어 코딩하기 편하고, 깔끔하게 코딩이 가능합니다.
2. 양방향 동적 바인딩(MVVM)
2-1. MVVM Pattern
데이터 바인딩에 대해 이해하려면 MVVM Pattern를 이해하는 것이 좋습니다.
- View
- 사용자에게 보여지는 화면입니다.
- 사용자의 Action을 View에서 받게 됩니다.
- Model
- 데이터를 저장하고 있는 장소입니다.
- 데이터를 처리 또한, 담당하고 있습니다.
- VIew Model
- View에 보여질 데이터를 유지합니다.
- 동작과정
- VIew에 사용자 Action이 들어옵니다
- VIew가 ViewModel에 Action을 전달합니다.
- ViewModel이 Model를 통해 필요한 전달받습니다.
- View에서는 데이터 바인딩을 통해 ViewModel의 데이터를 화면에 나타냅니다.
2-2. 데이터 바인딩
위에서 MVVM Pattern에 대해 간략하게 소개를 했습니다.
쉽게 설명하자면 데이터 바인딩은 [실제 데이터와 화면의 데이터를 일치시키는 과정]이라고 생각하시면 됩니다.
2-3. 양방향 데이터 바인딩
MVVM를 거쳐, 데이터 바인딩, 그리고 양방향 데이터바인딩 까지.
그렇다면 양방향 데이터 바인딩은 뭘까요?
View에서 변경된 데이터가 바로 실제 데이터에도 반영되고, 실제 데이터에 변경된 데이터도 바로 VIew에 반영되는 걸 뜻합니다. 주로 [v-model]를 이용해서 양방향 데이터 바인딩을 구현하는데 개발자가 데이터를 변경되었다는 신호를 주지 않아도 알아서 데이터의 변화를 감지해 데이터바인딩을 해주는 것이죠.
3. 컴포넌트 활용
Vue,js를 이용해 개발하면서 느꼈던 것은 컴포넌트 활용이 굉장히 편합니다.
Component 사용법도 굉장히 간단합니다.
<script>
import Component from './Component.vue'
export default {
components: { Component },
}
</script>
이런식으로 component를 해당 Component에 등록한 후,
<template>
<div>
<Component></Component>
</div>
</template>
이런식으로 사용하면 끝입니다!
또한, 자식Component에 데이터를 보내고 싶다면 [props]을 이용해 간단하게 구현할 수 있습니다.
이러한 특성으로 Vue에서 컴포넌트를 활용한 프로젝트를 만들기에 좋은 것 같습니다!
4. 러닝커브가 낮다!
아마 프론트 프레임워크를 어떤 것으로 선택하지 고민하셨던 분들이라면 다들 아는 장점이라고 생각합니다. 마찬가지로 프로젝트를 진행하면서 이 장점에 대해 많이 공감하기도 했습니다. 저 같은 경우에도 Vue.js를 공부한 시간을 합치면 대략 12시간? 정도 되는 거 같습니다. 막연하게 Vue.js책 하나 사서 눈으로 스르륵 보는 게 전부 였습니다. 심지어 중간에 "할만 한데?"라는 생각으로 읽는 중간에 프로젝트를 진행하기도 했습니다.
 |
|
(제가 읽었던 책입니다.)
이번 포스팅을 위해 자료를 찾아보던 중 놀랐던 사실이 Vue.js가 중국사람이 만들었던 것. 사실 중국이던 미국이던 누가 만든 건 중요하지 않습니다. 하지만, VUE 프로젝트 중 npm에서 패키지 찾아보면 중국어로 된 설명이 특히나 많이 나와서 "아 역시 중국도 프로그래밍에 대한 열정히 대단하군" 라고 넘겼는데 이런 사정이 있는지는 몰랐습니다😅
안녕하세요? "태민"입니다.
혹시 게시물을 보시고, 틀린 내용이나 부족한 내용이 있으시다면 댓글로 남겨주세요!
'Front > Vue.js' 카테고리의 다른 글
| [Vue.js] AWS(Ubuntu)에 HTTPS로 배포하기 (1) | 2020.05.01 |
|---|---|
| [Vue.js] AWS(Ubuntu), Nginx 를 이용해 Vue 배포하기 (0) | 2020.05.01 |
