개요
이번 프로젝트에서 프론트엔드 파트에서 선투입된 인원끼리 프레임워크 설계 및 공통 파트를 맡게되었다.
현재 시점 대부분의 업무가 완료된 후 돌아보며, 내가 배운 것들을 다시한번 돌아보고 확인하는 글이 되었으면 좋겠다.
내용은 IT본부 전체에 기술 세미나겸 발표한 자료를 바탕으로 진행하도록 한다.
기술셋 선정
가장 먼저 진행한 부분은 어떤 기술을 활용하여 프론트엔드 환경을 설계하는것 이었다. 각각의 선정된 기술과 이유에 대해서 말해보자.
React Vs Vue
먼저 SPA 프레임워크 혹은 라이브러리인 REACT / VUE 의 장점을 생각해보자.
- 풍부한 레퍼런스 및 커뮤니티 자료 (REACT > VUE)
- 풍부한 서드파티 라이브러리 (REACT > VUE)
- 프레임워크가 아닌 라이브러리의 성격으로 VUE 에 비해 자유로운 즉, 개발자 주도적인 컴포넌트 개발이 가능하다.(REACT > VUE)
- 러닝 커브(난이도) (VUE > REACT) ...
그 밖에도 수많은 비교점이 있지만, 회사의 입장에서 중요한건 러닝 커브(난이도) 였던것 같다.
물론 VUE 가 절대적으로 쉬운것은 아니나, 리엑트 특성상 JAVASCRIPT 기여도 및 상태의 변화에 따른 렌더링 관리 등 조금 더 손이가는것은 사실이다.
반면에, VUE의 경우 많은 기능들을 Native 기능으로 내장하여 제공하므로서, 프레임워크의 사용법을 이해하면 어느정도 해결되는것들이 많이 있다.
이러한 점에서 개인적으로는 REACT 를 굉장히 흥미롭게 생각하고 있고, 재밌어하는 나로써는 REACT로 가고 싶은 마음이었으나, 현실적인 상황에서는 넘어야할 산이 많았다.
그래서 결국 함께 일할 프리렌서 차장님과 함께 고민해보았고, 결국 Vue 로 가기로 결정이 되었다.
Vue 3버전이 공식이 되다
2022 년 1월20일 VUE의 창시자 Evan You는 "Vue 3 as the New Default" 라는 문구를 내뱉었다. 즉, 이제 기존 2버전이아닌 3버전이 'Default Version 이 된 것이고 이에따라 많은것이 변경되었다.
대표적으로 우리가 주목해야할 점을 몇가지 확인해 본다.
첫번쨰, Virtual Dom 알고리즘 개선으로 인한 렌더링 최적화이다.
기존 Vue 의 가상 DOM의 설계는 HTML 기반의 템플릿을 가상 DOM 트리로 변환 후 재귀적인 탐색을 통해 변경사항을 찾아 내는 방식으로 설계되었다.
그러나, 이러한 방식은 Static 한 구문또한 재귀적으로 탐색되기 때문에 불필요한 탐색이 일어나 비효율적인 측면이 있었습니다.
3버전에서는 이러한 부분을 개선하였다.
-
정적인 요소와 동적인 요소를 구분해서 트리를 순환할때 동적인 요소만 순환할 수 있도록하였기 때문에 정적인 요소는 재귀적으로 불필요한 탐색이 일어나지 않는다.
-
객체가 여러번 생성되어 메모리 사용량이 높아지는 것을 개선하기 위해, 렌더링 시 정적 요소, 서브트리, 데이터 객체등을 렌더러 함수 밖으로 호이스팅(hositing) 하여 다시 생성하지 않게 한다.
이러한 개선점은 빠른 렌더링에 큰 도움이 될거라 생각한다.
두번째, 트리쉐이킹 강화로 번들크기를 낮추었다.
앞서 말했듯이 Vue에서는 생각보다 많은 기능을 Native 모듈화 시켜 제공한다. 하지만, 그 많은것들 중 사용하지 않는 모듈까지 import 가 된다면 어쨋든 번들된 파일의 크기는 커질 수 밖에 없을 것이다.
이러한 부분을 개선하기 위해 트리쉐이킹을 개선하여 실제로 사용하는 코드만 import 하는 방식으로 개선하였다.
참조 사이트 : https://geckodynamics.com/blog/vue2-vs-vue3
Vue.js 3.0 개발팀은 릴리즈 노트에서 가상 DOM 최적화, 트리쉐이킹 강화 등을 통해 이전 버전에 비해 번들 크기가 최대 41% 감소하였고, 초기 렌더링은 최대 55% 빠르며 업데이트와 메모리 사용량은 최대 133% 향상되었다고 밝혔다.
세번째, 컴포지션 API 활용으로 인한 개발생산성 향상이다.
vue에서 기존 optional API에서는 생각보다 복잡한 부분이 많이 있다.
인터프리터방식에 익숙한 우리에게는 각각의 역할에 따른 option 영역이 나누어져 있는 규약이 강제되는것에 대해서 초기 진입시에는 불편함이 있다.
공식홈페이지에서 자주나오는 아래와 같은 이미지를 보면 이해가 쉽다.
출처 : https://vuejs.org/guide/extras/composition-api-faq.html
변수선언은 data 영역에, 함수는 method 영역 각각에 역할에 따라 위치가 고정되어 있어 복잡하지 않은 코드의 경우 장점이 있지만, 모던 프론트엔드 프레임워크에서 복잡하지 않는 코드를 만들기란 쉽지가 않은게 사실이다.
그래서, 운영을 하면서 점점 복잡해 가는 코드속에서 이러한 방식은 복잡성을 증대시키며 이로인해서 개발 생산성에도 영향을 미칠 수 있다.
이러한 부분을 Composition API 를 활용하면서 해결할 수 있다.
모든 코드를 독립적으로 각각의 기능을 모듈화시켜놓았기 때문에, 우리는 필요할 경우 해당 함수만 확인하면 된다.
더불어, 기존 복잡성을 증대시키는 MIXIN 을 없애고 대체로 React 의 hook 과 비슷한 개념의 composable 한 모듈화 방법론을 제시하여 재사용에 있어서 복잡성을 줄이는 방법을 선택하였다.
네번째, 반응형 기능 추가
React 에서 State 관리는 렌더링 성능에 크게 영향을 준다.
상태관리를 잘못하여 즉, 예를들어 useEffect 를 잘못짜게되면 계속해서 불필요한 페이지 리렌더링이 일어나는 등 컴포넌트를 개발할때 고려해야 될 점이 많다.
이에 맞춰서 Vue에도 비슷하게 ref 라는 반응형 기능을 추가하였다.
이제 개발자는 ref 라는 반응형 변수를 통해서 이 내부 value 값에 따라 tempalte 에서 원하는 값에 따른 렌더링 혹은 리렌더링을 진행할 수 있다.
이러한 부분도 어떻게 보면 React 의 장점을 조금씩 녹이고 있는 것 같다.
다섯번째, Typescript 지원 강화
사실, 2버전에서는 TYPESCRIPT 를 사용하지 않았기 때문에 확실히 와닫는 부분은 아니다.
다만 기존에는 타입스크립트를 사용하기 위해서 추가적인 도구가 필요했을 것이고 자체적으로는 불가능햇던것 같다.
그러나, 3버전에서는 이러한 단점을 보안하였다고 한다.
최정정리
그래서, 결국에 선택은 VUE3 버전을 선택하였다.
하지만, 변경점이 많은 만큼 어려운 부분이 많고 무엇보다 레퍼런스가 많이 없다.
현재까지는 공식문서에 전적으로 의존하는 부분이 많지만, 그래도 기존 버전보다 확실히 개선된점이 좋은 느낌을 받기는 한것 같다.
이제 다음 포스팅엔 TYPESCRIPT, VITE, PNPM 등 각각의 내용과 남기고 싶은 기록들을 차례로 포스팅할 계획이다.