간단한 Vue 정리
0. 잠깐!
얼마전 캡틴판교님의 Vue.js 초급강의를 모두 수강하게되어 수강 배경 및 강의 내용을 가볍게 정리하고 넘어가고자 합니다. 이 글의 내용은 캡틴판교님의 강의 자료를 참고하였습니다. 링크
1. 저희는 Vue 써요.
현재 제가 다니고 있는 VIRNECT에 입사 면접을 볼 당시에 들었던 이야기였습니다.
Vue가..뭐야???????
저는 Ext JS 및 React를 주로 다루었고 Vue는 당시 처음 들어보는 js 프레임워크였기에 매우 당황했던 기억이 납니다. 현재는 어떻게 합격하게되어 R&D 챕터 웹 클라이언트를 담당하게 되었네요. 무튼 저는 본격적인 개발을 하기 위해 Vue.js를 단기간에 습득할 필요가 있었고 인프런의 캡틴판교님이 강의하신 Vue.js 시작하기 - Age of Vue.js 초급 강의를 수강하게 되었습니다.
2. Vue?
Vue는 Evan You 가 만든 자바스크립트 프레임워크입니다. 발음대로 뷰(View)에 최적화된 프레임워크로 react와 같이 MVVM(Model-View-ViewModel) 패턴을 기반으로 하고 있으며 컴포넌트를 사용하여 재사용을 적극적으로 권장하고 있습니다.
3. 강의에 언급된 Vue의 요소들
Reactivity
- Vue.js가 추구하는 중심 사상이자 핵심.
- 데이터에 대한 변화를 Vue에서 감지.
- 화면 조작에 대한 API, 속성을 제공.
Vue는 React에 비해 좀더 즉각적이고 쉽게 화면을 조작하는 방법을 제공하고있습니다. 아래 코드에서 message가 어떤 이유로 변화한다면 화면에 출력되는 message의 내용이 바로 반영됩니다.
Vue.component('example', {
template: '<span></span>',
data: function () {
return {
message: '안녕하세요!'
}
}
})
인스턴스
- 필수로 생성해야하는 단위
- 인스턴스에 내용을 추가하여 개발
컴포넌트
- 화면의 영역을 구분하여 개발하는 방식
- 대부분의 UI는 컴포넌트 기반으로 개발됨
- 코드의 반복을 최대한 줄이는것이 컴포넌트 개념의 핵심
컴포넌트 통신
- 데이터 통신에 대한 제약을 부여함으로서 여러사람이 함께 개발하여도 통신 흐름을 예측할수 있음
- props : 상위에서 아래로
- event emit : 하위에서 상위로
- 형제간 : 자식 -> 부모 -> 자식 순으로
이 부분은 굉장히 react와 흡사한 부분이라고 느껴졌습니다. vue는 철저하게 부모, 자식간의 통신방법을 규정하고 있습니다. 이를 통해 데이터의 흐름을 명확하게 추적할 수 있습니다.
제가 과거에 사용했던 Ext js는 제한없는 양방향 데이터 바인딩을 사용하고 있었기 때문에 성능 문제는 물론이고 디버깅 난이도를 높힌 주범이였습니다. 현재 개발 패러다임을 보았을때 데이터 흐름에 제한을 주는것은 바람직하다고 느껴지네요.
템플릿 문법
화면을 조작하기위한 Vue의 문법들
- 데이터 바인딩
- Reactivity와 비슷한 개념
- 데이터와 화면을 엮어내는 부분
- 뷰 디렉티브(지시자)
- 화면을 조작하기 위해 Vue가 제공하는 추가적인 문법
v-xxxx
- Vue CLI
- 프로젝트를 생성할때 명령어를 이용하는 방식
- 싱글 파일 컴포넌트
- template, js, style을 한 파일로 관리하는 컴포넌트
<template>
<!-- 마크업 -->
</template>
<script>
// 컴포넌트 js 코드
export default {
}
</script>
<style>
/* css or scss */
</style>
참조하면 좋은 자료
마무리
Vue 초급 강좌를 들으면서 어느 부분은 React, 또 어떤 부분은 angular와 비슷하다고 느꼈습니다. 다만 확실하게 다르다고 느낀것은 러닝 커브였습니다. 머리가 저절로 아파오던 React보다 좀 더 쉽고 빠르게 익혀진다는게 느껴질 정도였으니까요. 다음에는 중급 수강 및 Vue-jest를 좀더 연구해보려고 합니다.
Leave a comment