Vue3 컨퍼런스인 Vue.js Nation이 지난 25,26일 양 일 간 진행되었습니다.
앞으로 Vue3을 메인으로 쓸 일은 많이 없을 것 같지만,
나름 Vue3 코어까지 깊게 공부해 보았던 사람으로서, 어느 정도 관심은 남아있는데요.
생각보다 재미있는 변화가 보여서 정리해보고자 합니다.
TL;DR
- 버추얼 돔에서 사전 컴파일로: Vapor Mode
- reactivity transform의 제거
- 계속되는 안정화
1. Vapor Mode
Vue3은 리액트에서 영향을 받은 Composition API를 도입했습니다.
이번에는 Svelte에서 영감을 받은 Solid.js를 따라서, Virtual-Dom을 제거한 아키텍처를 도입할 모양입니다.
즉, 컴파일러의 도움을 받아 네이티브 DOM을 생성 및 조작하는 것이죠.
디테일한 내용이 궁금하시면 아래 내용을 참조하시길 바랍니다.
https://itchallenger.tistory.com/822
Svelte 코드 컴파일러는 어떻게 동작할까?
스벨트는 내부적으로 Virtual Dom을 사용하지 않는 것으로 알고 있습니다. 그렇다면 컴파일러가 상당히 많은 일을 해줘야 할텐데, 어떻게 이것이 가능할 것일까요? 요새 Vue3을 이용해 신규 프로젝
itchallenger.tistory.com
2. R.I.P Reactivity Transform
많은 분들이 이런 기능이 있는지 모르셨을 수도 있으나,
스벨트의 $(reactive value)에 영향을 받은 문법이 기존에 experimental로 존재했습니다.
모르셨다면 영원히 모르셔도 될 것 같습니다. 3.4 버전부터 코어에서 삭제될 예정이라고 합니다.
Vue3이 리액트에 비해 호불호가 많이 갈렸던 이유가,
컴파일러 (탬플릿)영역과 코드 영역의 동작을 이해하고 사용했어야 했다는 것인데요.
예를 들어 탬플릿 영역에서는 ref.value를 하지 않아도 되지만, 코드 영역에서는 ref.value를 해야 하는 등의 동작이죠.
탬플릿 영역에서도 .value를 하지 않아도 되게끔 해주는 것이 해당 기능이었습니다.
물론 이제<script setup/> 문법을 사용하면서 스크립트(코드) 영역에도 컴파일러가 동작하면서,
생각보다 난해한 동작이 꽤 많이 발생하게 되고,
컴파일러의 동작을 알아야만 이해할 수 있는 현상도 발생합니다. (ex 타입스크립트 제네릭 임포트해서 못쓰는 이유)
결과적으로 에반 유는 $의 도입은 복잡성을 높이고 DX에 악영향을 끼치는 요소라 생각한 모양입니다
솔직히 말하면, 이건 계속 해야 하지 않았나 싶습니다.
Vue3가 그나마 경쟁력이 있을 수 있는게, Svelte의 대체제로서 였던 것 같은데요.
Svelte보다 성능도 느리고 DX도 별로고 커뮤니티와 엔터프라이즈 급 지원도 별로라면 앞으로 쓸 일이 더더욱 없을 것 같습니다.
Vue3, 정말 계속 써야 할까?
Vue3은 여러 경쟁자들의 장점을 합쳐 더 나은 프레임워크를 만드려던 컨셉이, 뭔가 어중간한 위치에서 끝난 듯한 느낌인데요,
일간 다운로드 수도 react가 아닌 nextjs와 경쟁해야 하는 처지가 1년 내내 계속되고 있는 건 좀 더 분발해야 할 필요가 있는 것 같습니다.
또한 state of js 2023 서베이에서 B티어라는 뭔가 저조한 성적표를 받았는데요,
Nuxt도 3버전 stable 릴리즈가 11월이니, 사실상 저 평가는 Vue2 기반이라고 보는게 맞는 것 같네요.
나름 Vue3도 장점이 있는 프레임워크라 생각하긴 하지만,
굳이 저물어가는 기술을 새로운 프로젝트에서 도입하진 않을 것 같네요.
Vue.js Nation의 영상은 아래에서 보실 수 있습니다.
'FrontEnd' 카테고리의 다른 글
| Javascript로 Python range 함수 구현하기 (0) | 2023.01.31 |
|---|---|
| [번역]CSS 셀렉터 성능 최적화 (0) | 2023.01.31 |
| 리액트 이벤트 리스너는 어떻게 등록되고 처리되는가 (0) | 2023.01.28 |
| 멀티쓰레드 자바스크립트 : 메세지 패싱 추상화 패턴 (0) | 2023.01.27 |
| typescript(타입스크립트)의 satisfies 연산자 제대로 알아보기 (0) | 2023.01.26 |
