vue3
-
[Vue.js] Vue 3 가 도입되면서 달라진 점Front-End(Web)/Vue 2022. 3. 13. 20:12
🧐 서론 올해인 2022년 1월, Vue3의 안정화 버전(3.2.28)이 정식 릴리즈가 되면서, Vue 프로젝트의 기본 템플릿이 Vue3로 대체될 예정이다. Vue 2에 비해 함수형 프로그래밍화 된 점, 이에 따른 다양한 문법의 변화와 기능의 추가 등이 동반되었다. (Vue devtools 도 Vue3 버전으로 마이그레이션 되었으며, Vue 공식문서 역시 Vue3 개선점들을 기반으로 새로이 단장을 했다.) 지금 회사에서 사용중인 Composition API를 공부하면서 Vue3의 가장 큰 특징이자 코드포맷을 알아볼 수 있었다. 이를 계기로, 정식 릴리즈된 Vue3가 이전의 Vue2에 비해 보여주는 대표적인 차이점들은 어떤 부분들이 있을지 한 번 정리해보고 싶어졌다!! 📗 Vue 3 달라진 점들 1. 성능..
-
[Vue] Composition APIFront-End(Web)/Vue 2022. 3. 12. 05:44
이번에 새로 맡게 된 프로젝트에서는, Nuxt.js(Vue2)에 Composition API를 적용하는 기술스택으로 개발이 되고있다. Vue3가 정식 릴리스되면서 Vue2와의 큰 차이점중 하나인 Composition API에 대해 학습할 필요성을 느꼈다. 두 버전의 문법이 매우 상이했으며, 그래서 Composition API를 모르면 기존의 data(state), computed, methods, lifecycle 등의 기본적인 프로퍼티들마저도 원만하게 사용할 수 없었다. 본격적으로 개발을 시작하기 전에 Composition API의 차이점과 사용법 등을 공부하고자 하여 이 포스팅을 시작하게 되었다. 📗 Composition API 란? Composition API는 컴포넌트 내에서 사용하는 코드구조를 ..
-
[Vue.js] Template 문법Front-End(Web)/Vue 2021. 6. 3. 01:37
Vue에서도 React 처럼 state, props 등의 데이터를 HTML 요소에 바인딩할 수 있다. (이러한 연관성을 Reactivity 라고 칭한다.) 이러한 방법을 data를 활용한 선언적 바인딩이라고 한다. 이렇게 화면을 조작하기 위한 Vue의 문법들에 대해 학습해보았다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue Template 위에서 언급한 선언적 바인딩을 포함해서 Vue로 화면을 조작하는 문법들을 "Vue Template" 이라고 한다. Template 문법은, 1) Vue 인스턴스에서 관리하는 데이터를 화면에 연결하는 데이터 바인딩, 2) 화면조작을 편하게 하게 해주는 Vue 디렉티브 2가지가 있다. 1. 데이터 바인딩 //..
-
[Vue.js] 컴포넌트(Component), Props & EventFront-End(Web)/Vue 2021. 5. 26. 21:04
이번에는 비교적 친숙한! 뷰의 컴포넌트 개념에 대해 알아보고자 한다. React와 마찬가지로 화면을 구성하는 요소이다. 현대의 모던 프레임워크들은 대부분 컴포넌트 개념을 차용하고 있기 때문에 뷰 역시 이를 기반으로 하고 있는 것 같다. 컴포넌트와 관련된 개념과 영상이 많기 때문에 포스팅 분량이 길어지고 몇 부분으로 나눠질 것 같다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue 컴포넌트 React와 마찬가지로 화면을 영역 단위로 쪼개서, 재사용 가능한 코드로 캡슐화하는 개념이다. 뷰에서 컴포넌트를 등록하는 방법은 2가지가 있다. 전역 등록, 지역 등록이 바로 그것들이다. - 전역 컴포넌트 // 전역 컴포넌트 Vue.component('컴포넌트..
-
[Vue.js] 인스턴스 (Instance), 라이프사이클(LifeCycle)Front-End(Web)/Vue 2021. 5. 26. 02:09
React는 파일(혹은 모듈) 자체를 클래스형, 함수형의 컴포넌트로 제작하는 방식이었다. 이와는 달리, Vue는 컴포넌트를 포함한 다양한 정보가 담긴 인스턴스(new Vue)에 정보를 담는 것으로 보인다. 이에 해당하는 Vue 인스턴스에 대해 학습 및 포스팅할 예정이다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue 인스턴스 인스턴스는 뷰로 개발할 떄 필수로 생성해야 하는 코드라고 소개된다. Vue.js로 화면을 구성하기 위해 꼭 생성해야 하는 필수 단위인 것이다. new Vue() // 변수할당 var vm = new Vue({ // options... }); Vue 앱은 Root Vue 인스턴스를 기점으로, 선택적으로 중첩이 가능하고 재사..
-
[Vue.js] Vue 개요 및 세팅(CLI)Front-End(Web)/Vue 2021. 5. 10. 18:06
🧐 인생은 한 치 앞 도 모르는 것 약 5개월간 React 개발을 공부해왔고, 프로젝트와 기술과제도 React로 진행한 내가 Vue.js 공부를 시작하게 되었다. 아무래도 가장 큰 이유는 이번에 입사하게 된 첫 회사가 Vue.js를 사용하고 있기 때문이다. React 지식이 아깝긴 하나 생각해보면 그리 오래한 것도 아니고, 오히려 양대산맥인 Vue도 경험하는게 좋겠다는 생각을 항상 하고 있었다. 특히, 컴포넌트 같은 개념은 React와 크게 다르지 않으면서도, Vue만의 프레임워크나, 양방향 데이터 바인딩 등 차이점을 직접 겪으면 흥미롭겠다는 기대 반 걱정 반으로 Vue.js 공부를 시작해본다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue...