Offcanvas

개발자

뷰(Vue) 3.2 출시··· “반응성 시스템 성능 개선”

2021.08.12 Paul Krill  |  InfoWorld
인기 있는 자바스크립트 프레임워크 ‘뷰(Vue)’의 새 릴리즈(v3.2)가 지난 8월 5일 출시됐다. 단일 파일 컴포넌트(SFC) 및 웹 컴포넌트 개선뿐만 아니라 향상된 성능을 제공한다는 게 이번 업데이트의 골자다. 

개발팀에 따르면 버전 3.2에서 상태 관리를 간소화하는 뷰의 반응성 시스템(reactivity system)의 성능이 개선됐다. 구체적으로 효율적인 참조(ref) 구현(260% 빠른 읽기/50% 빠른 쓰기), 40% 빠른 종속성 추적, 17% 감소한 메모리 사용량을 지원한다고 개발팀은 덧붙였다. 템플릿 컴파일러의 성능도 향상돼 가상노드(Vnodes)의 생성 속도가 빨라졌다. 
 
ⓒPeter Griffin (CC0)

또한 템플릿 트리의 일부를 ‘메모화(memorize)’하는 기능을 제공하는 새 v-memo 지시문이 도입됐다. v-memo hit를 사용하면 뷰에서 가상 DOM 디핑 및 새 가상노드 생성을 건너뛸 수 있다. 이 기능은 특정 시나리오(예: 대규모 v-for 목록)에서 성능을 향상시킬 수도 있다. 

웹 컴포넌트에서는 뷰 컴포넌트 API(Vue component API)를 사용해 기본 사용자 정의 요소를 생성하는 defineCustomElement 메소드가 도입됐다. 이 API를 통해 개발자는 모든 프레임워크에서 사용할 수 있거나 아니면 프레임워크 없이 사용할 수 있는 뷰 기반 UI 컴포넌트 라이브러리를 구축 가능하다. 

.vue’ 파일이라고도 하는 단일 파일 컴포넌트(SFC)에서는 2가지 기능이 실험 상태에서 안정 상태로 전환됐다. SFC 내에서 컴포지션 API(Composition API)를 사용할 때 인체공학을 개선하는 컴파일 타임 문법적 설탕인 <script setup> 그리고 SFC <style> 태그에서 컴포넌트 상태 기반 동적 CSS 값을 활성화하는 <style> v-bind다. 

뷰 설치 지침은 이곳(v3.vjs.org)에서 확인할 수 있다. 이 밖에 뷰 3.2의 새로운 기능은 다음과 같다. 

• 서버측 렌더링의 경우 @vue/server-renderer 패키지가 이제 노드.js(Node.js) 빌트인에서 분리된 ES 모듈 빌드를 제공한다. 이를 통해 클라우드플레어 워커스(Cloudflare Workers) 또는 서비스 워커스(Service Workers)와 같은 비-노드.js 런타임 내에서 @vue/server-renderer를 활용하거나 번들로 사용할 수 있다. 또한 웹 스트림 API(Web Streams API)로 렌더링하기 위한 새 메소드를 사용해 스트리밍 렌더 API(streaming render API)를 개선했다. 

• 이펙트 범위 API(Effect Scope API)가 도입돼 리액티브 이펙트(연산 및 관찰자)의 처리 시기를 직접 제어할 수 있다. 이를 통해 컴포넌트 컨텍스트에서 뷰의 반응성 API를 더 쉽게 활용하고 컴포넌트 내부의 고급 사용 사례를 잠금 해제할 수 있다. 이 하위 수준의 API는 주로 라이브러리 작성자를 대상으로 한다. 

한편 뷰 3.2에는 몇 가지 버그 수정도 포함돼 있다. 퍼블릭 API에 관한 주요 변경사항은 없지만 몇 가지 호환성 관련 참고사항이 있다. 이를테면 뷰 3.2 이상에서 템플리 컴파일러로 생성된 코드는 새로운 런타임 도우미를 사용하기 때문에 이전 런타임 버전과 호환되지 않는다. 뷰 3.2의 전체 변경 로그는 깃허브에서 확인할 수 있다. ciokr@idg.co.kr





 
추천 테크라이브러리

회사명:한국IDG 제호: CIO Korea 주소 : 서울시 중구 세종대로 23, 4층 우)04512
등록번호 : 서울 아01641 등록발행일자 : 2011년 05월 27일

발행인 : 박형미 편집인 : 천신응 청소년보호책임자 : 한정규
사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2024 International Data Group. All rights reserved.