프론트엔드 프레임워크인 Vue.js를 소개하고 실무 적용 경험을 공유합니다. ||
요약
프론트엔드 프레임워크인 Vue.js를 소개하고 실무 적용 경험을 공유합니다.
1. 프론트엔드 도구 다각화의 필요성
현대에는 수많은 서비스들이 웹으로 구현되고 있고, 그만큼 기반 기술과 도구도 빠르게 발전하고 탄생합니다. 하지만 대부분의 사람들은 리스크를 줄이고 싶어 하기에 생태계가 잘 꾸려져 문제 해결과 확장이 쉬운 도구가 각광받습니다. 이렇게 선택받은 도구는 또다시 커지고 대중화됩니다. 그렇게 오랜 기간 인기 프론트엔드 도구 순위 최상위를 달리고 있는 것이 바로 React입니다.
React는 컴포넌트 기반 아키텍처로 UI 재사용과 모듈화에 용이하다는 장점이 있습니다. 또한 방대한 라이브러리 생태계로 고성능, 대규모 애애플리케이션 운용에 합리적인 도구들을 찾아볼 수 있어 편리합니다. 많은 개발자가 React를 경험했다는 것도 매우 큰 장점입니다. 그러나 새로운 시작을 할 때면 ‘이번에도 적합한가’에 대한 고민을 하게 됩니다.
1.1 The right tool for the job
React는 렌더링을 위한 Virtual DOM을 메모리에 유지하는데, 복잡한 화면일수록 커지며 최적화가 미비하다면 이는 초기 로딩 시간과 메모리 점유율 증가에 영향을 줍니다. 또한 상태 관리, 라우팅 등을 위해서는 또 다른 라이브러리를 도입해야 하며, 독특한 리렌더링 매커니즘 또한 익혀야 합니다. 이러한 초기 구축 리소스와 학습 곡선 문제는 늘 이야기되어 왔습니다. 이런 것들은 React가 ‘무겁다’는 인상을 줍니다. 따라서 가벼운 프로젝트에까지 대형 프레임워크를 적용할 필요는 없으며 다방면의 검토로 적합한 선택을 해야 합니다.
1.2 Vue.js
한컴싸인의 백오피스는 적은 리소스 투입으로 빠른 구축이 필요했습니다. 서비스를 관리하는 역할이기에 큰 기능을 요하지 않았으며, 최초에는 사내 서비스가 목표였습니다. 이러한 조건에 아래와 같은 전략으로 Vue.js를 채택하였습니다.
경량화와 효율화
TreeShaking에 친화적으로, 빌드 후 매우 작은 크기를 가집니다.
(최소 크기 16KB, Vue 제공 기능 모두 사용 시 27KB)
점진적 프레임워크 지향: 단순하게 시작 후 필요에 따른 기능의 점진적 도입이 용이
초기 구축 리소스를 줄여 빠른 개발 착수에 용이
성숙한 라이브러리 생태계의 확장 용이성
고성능
js-framework-benchmark의 성능 비교 결과에 따르면 React, Angular 등 다른 virtualDOM 프레임워크에 비해 빠르며, 비 virtualDOM 프레임워크에 비교하여도 준수한 성능을 보입니다.
유지보수성
직관적인 코드 구조로 HTML, CSS, JavaScript 와 친숙하다면 쉽게 개발에 참여할 수 있습니다.
대중적인 도구로 프로젝트의 장기 유지/보수를 꾀할 수 있습니다.
2. Vue.js
Vue는 사용자 인터페이스 구현을 위한 자바스크립트 프레임워크입니다. 표준 HTML, CSS, JavaScript 위에 구축되며, 선언적이고 컴포넌트 기반의 프로그래밍 모델을 제공하여 효율적으로 사용자 인터페이스를 개발할 수 있습니다. Vue의 대표적인 특징은 아래와 같습니다.
2.1 선언적 렌더링과 반응성
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<style scoped>
button {
font-weight: bold;
}
</style>
위는 Vue로 작성한 간단한 예시입니다. 여기서 두 가지 핵심을 볼 수 있습니다.
선언적 렌더링
순수 HTML과 JavaScript로 작성한 코드의 경우, HTML의 상태를 변경하기 위