앞으로 2주동안 끝낼 목표로... vue 책을 구매했다
사실 구매한지 몇달 됌 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이제서야... 첫 장을.....
거두절미하고 취뽀한 회사에서 vue를 주로 쓴다고 했다.
출근 전에 조금 공부하길 원하셔서 보름 좀 넘는 시간동안 열심히 머리에 넣기로 결심했다!!!!!
오늘 할당량 끝내고 얼른 타입스크립트도 해야한다 그럼, 빠샤
🌱 Vue 란?
: 웹 애플리케이션을 만들기 위한 라이브러리이자, 프레임워크
- MVVM(Model-View-ViewModel) 패턴을 표방하고 있지만 코어라이브러리는 ViewModel에 집중되어 있고, 코어라이브러리와 별개로 부가적인 라이브러리들을 제공해 종합적인 프레임워크를 제공한다.
- 개발을 진행하면서 요구사항들에 대해 유연하게 대처 가능 (프로그레시브 프레임워크이기 때문에)
- 가상 노드 구성 (속도 저하 방지)
Vue 3의 신규 기능들
1. 컴포지션 API (Composition API)
Vue는 Option API를 기반으로 하나의 객체를 하나의 모듈로 만들어 컴포넌트라 칭하는 라이브러리
-> 소규모 혹은 중간급 규모의 웹 애플리케이션 제작하는데 유리
하지만, 하나의 변수와 연관된 수많은 기능들이 하나의 SFC(Sigle File Component)에서 산포되고 이는 가독성을 떨어뜨리고 코드 유지 비용이 높아지는 문제점이 생김.
컴포지션 API는 컴포넌트를 작성할 때 함수 기반의 방법을 제시
특정 역할에 따른 함수의 분리 등을 통해 가독성이 높고 조직화된 코드를 만들 수 있게 됌.
컴포지션 API를 통해 은닉화된 코드는 컴포넌트들이 재활용할 수 있다.
Vue2에서도 Mixins를 이용하여 비슷하게 함수를 분리하고 재사용할 수 있었지만, 사용하는 컴포넌트들이 많아짐에 따라 상태관리의 어려움이 있었음
컴포지션 API는 간결한 상태관리 방법을 제공 (vue2에서도 vue/composition-api 플러그인을 이용해 컴포지션 API 사용이 가능하다)
2. Suspense
컴포넌트가 데이터를 받아오기 전까지 기본 컨텐츠를 표시할 수 있는 기능
(ex) 페이스북의 스켈레톤)
3. Teleport
어느 컴포넌트든 자신이 렌더링하고 싶은 위치가 있다면 Teleport 사용해 구현할 수 있다.
(react에서 Portals 를 사용)
4. 여러 개의 v-model 디렉티브
v-model 디렉티브는 양방향 결합 모델로, 기존의 Vue는 하나의 사용자 컴포넌트가 하나의 v-model 디렉티브를 가지는 것만 허용 ( + 추가적인 v-model 디렉티브가 필요할 경우 v-bind 디렉티브와 v-on 디렉티브를 함께 이용, 변수를 객체나 배열로 만들어 사용하기도 했다.)
예시 코드를 보자.
<MyComponent v-bind:param1 v-on:update="updateParam1" v-bind:param2 v-on:update="updateParam2" />MyComponent 라는 사용자 컴포넌트가 존재하고 이 컴포넌트가 두 개의 input 태그를 가지고 있다고 하면,
위와 같이 v-bind 디렉티브와 v-on 디렉티브를 이용해 구현했을 것이다.
Vue3 에서는 아래와 같이 여러 개의 v-model 디렉티브를 하나의 DOM 엘리먼트에 할당할 수 있다.
<MyComponent v-model="param1" v-model="param2" />5. 프록시(Proxies)로 진화된 반응성
Vue는 객체의 속성을 setter/getter로 변환하여 반응성을 가지도록 했지만, 미리 정의 되지않은 속성의 추가는 단순한 아이템 추가이기 때문에 객체 변경에 대해서 반응하지 않았다.
obj = {
item: 0
}obj.item2 = 1기존의 Vue는 item2의 추가를 알아채지 못한다. obj 객체 루트 속성을 추가하는 작업을 진행했기 때문에 getter/setter의 범위를 벗어나기 때문이다.
이러한 문제점을 해결하기 위해, Vue3는 컴포지션 API를 통해 데이터를 프록시로 변환하여 사용할 수 있는 방법을 제시한다. obj객체를 프록시 안에 담아두기 때문에 obj에 item2가 추가된 것을 즉시 알아차린다.
프록시란?
데이터와 프레임 워크 사이에서 데이터의 전달 및 변환, 관리를 담당
Proxy를 이용하기 위해서는 ref나reactive 함수를 이용하면 된다.
6. Fragments
하나의 컴포넌트가 여러 개의 루트 노드를 가지는 것
기존 Vue는 컴포넌트에 전달되는 Non-Props 속성을 컴포넌트에 정의된 루트 노드에 전달하도록 설계됨, 때문에 여러 개의 루트 노드를 가지면 어떤 노드에 속성을 전달할지 애매해 버그가 나타날 수 있다.
Vue3에서는 위와 같은 문제를 걱정하지 않고 여러 개의 루트 노드를 가질 수 있다. (다만, Non-Props 속성 전달이 필요할 경우 어느 노드가 전달 받을 것인지 명확히 해야한다)
7. Emit Option
$emit() 은 하나의 컴포넌트가 부모 컴포넌트에게 이벤트를 전달하기 위해 존재하는 함수이다.
Vue3에서는 컴포넌트 옵션 emit을 이용해 전송할 이벤트를 정의할 수 있다.
- 컴포넌트에서 사용하는 이벤트들을 한 눈에 볼 수 있음
- 해당 이벤트의 데이터에 대해 사전에 검증할 수 있음
만약 미리 정의된 이벤트명을 emits 옵션에 선언하지 않을 경우, 같은 이름의 네이티브 이벤트가 존대한다면, 네이티브 이벤트를 호출한다.
네이티브 이벤트란?
Vue가 재정의한 이벤트가 아닌 브라우저가 정의한 이벤트를 의미한다.
8. createRenderer
Vue3에서 제공하는 runtime-dom과 runtime-core 패키지는 사용자가 렌더링의 동작을 정의할 수 있게 해주는 createRenderer 라는 함수를 제공.
Host환경의 Node와 Element를 제네릭 인자로 받아 해당 노드와 엘리먼트의 렌더링 동작을 변경할 수 있게 해준다. 이때, 렌더링 동작을 변경할 수 있다는 것은 Renderer가 가지는 CRUD에 관련된 함수들을 재정의한다는 것을 의미한다.
createRenderer 함수는 하나의 객체를 인자로 받고 , 해당 객체 내에는 개발자가 재정의하고자 하는 함수가 선언되어 있으면 된다.
