안녕하세요. 에러노트입니다. 벌써 1월 셋째주가 되었네요.
개인적으로 1월 둘쨋주는 한달같은 한 주를 보냈습니다. 집주위에 화재로 인해 정신없이 짐을 옮겨 숙박업체에서 지낸 것부터 이런저런 일이 많았는데, 살면서 가장 롤러코스터같은 일주일이였답니다😅
곧 설 연휴인데 여러분도 사건사고에 유의하시어 항상 건강 잘 챙기시길 바랍니다.
저는 요즘 뷰와 라라벨을 통한 프로젝트를 많이 하는 중입니다. 처음 만난 Vue는 저에게 Javascript와는 또 다른 신세계였습니다.
저처럼 Javascript를 쓰다 Vue로 넘어와 낯설어 할 여러분들을 위해 간단히 정리해보았습니다. 도대체 이 Vue는 무엇이고, Vue2에서 Vue3로 넘어오면서의 변화들을 함께 살펴보도록 하겠습니다.
1. Vue.js 너, 뭐하는 친구니?
Vue란 무엇일까요? 나무위키 등에서 검색 시 나오는 웹 프론트앤드 javascript 프레임워크.... 듣기만 해도 말이 어렵죠?
쉽게 말하자면, 뷰는 사용하기 쉽게(웹, 앱의 장점이 가득 들어있어 개발자가 쓰기 쉬운) 만들어진 대중적인 javascript기반의 틀이라고 생각하시면 됩니다.
우선 Vue와 JavaScript의 차이점을 알기 위해 DOM을 알아야 합니다. DOM? 들어보신 적 있으신가요?
- DOM과 Virtural DOM
DOM은 JavaScript에서 쓰이는 방식으로, HTML과 자바스크립트를 이어주는 공간을 말합니다. 자바스크립트가 이해할 수 있는 객체로 변환하는 공간인 것이죠. 해당 공간에 다이렉트(ex - document getelementbyid() 등)로 들어가 매번 html을 처음부터 끝까지 전체를 읽어 넘겨주는 특징 탓에, 작은 수정 하나에도 전체를 읽어 메모리 낭비가 심한 편입니다.
//DOM코드(JavaScript)
<div class="MainMeun">
<p>출력하기 위해 작성해보았습니다.</p>
<span><i class="i-con"><svg src="...">...</svg></i></span>
...
</div>반면, Virtural DOM은 Vue.js, React 등에 쓰이는 방식으로, 가상DOM을 가지고 있습니다. 실제 DOM에 적용하기 전 가상DOM을 거쳐가는 특징이 있습니다. 가상 DOM에서 먼저 수정 작업 후 최종적으로 DOM에 수정된 부분만 적용되어 메모리 낭비가 적은 편입니다.
- Vue의 특징: 단일파일 컴포넌트
가장 큰 특징 중 하나는 바로, 객체가 아닌 내가 작업하는 단위만 작게 쪼개어 구현이 가능하다는 점입니다.
<div id="app">
{{ message }}
</div>var app = new Vue({
el: '#app',
data: {
message: '짜잔 message부분에 해당 글이 출력되게 됩니다.'
}
});만약, 이 부분을 자바스크립트로 작성한다면 다음과 같습니다.
const setMessage = function() {
const divElement = document.querySelector('#app')
divElement.innerHTML = '짜잔 message부분에 해당 글이 출력되게 됩니다.'
}
setMessage()
2. Vue2와 Vue3의 미세한 차이점: <scripct>
Vue2에서의 구문을 먼저 살펴보자면 다음과 같다.
<script>
export default{
setup(){
//이게 vue2 방식의 문법이다.
}
}
</script>Vue3의 구문은 아래와 같이 간단해졌습니다.
<script setup>
//Vue3의 버전으로 작성하면 훨씬 간결하게 작성이 가능하다.
</script>특징을 정리하자면 다음과 같이 정리가 가능합니다.
//예시
import axios from "axios";
import Header from "../../Layouts/Header.vue";
- import한 컴포넌트를 바로 템플릿 태그에서 사용이 가능합니다.(위의 예시 참고)
- export default 구문이 필요없어졌습니다.
- setup()함수를 정의하지 않아도 됩니다.
이전 구문들에 비해 많이 간단하게 사용이 가능해졌다는 것을 한 눈에 알 수 있습니다.
이외에도 더 있으나 아직까지는 저 또한 vue와 덜 친한 상태이기에 다음에 추가적으로 정리하여 올려보도록 하겠습니다.
이상, 서치하면서 궁금했던 vue구문의 형태 차이점을 버전별로 짧게나마 정리해보았습니다.
오늘도 읽어주셔서 감사드리고 설 연휴 행복하게 보내시기 바랍니다😉