빌드 툴 없이 Vue.js를 제이쿼리처럼 사용하는 방법과 한계 정리
Vue.js를 제이쿼리처럼 쓰고 싶다면?
프론트엔드 프레임워크의 점유율이 높아진 요즘, 빌드 도구 없이도 간단하게 Vue.js를 사용할 수 있을까?라는 고민을 하는 개발자들이 많다. 특히 기존에 jQuery를 사용하던 환경에서 Vue로 전환을 고려하는 경우, 모듈 시스템 없이도 Vue를 사용할 수 있는지, 제약은 무엇인지 궁금할 수 있다.
빌드 없이 Vue.js 사용 가능 여부
Vue.js는 CDN 또는 로컬 파일 import를 통해 별도 빌드 도구 없이도 사용 가능하다. 아래처럼 HTML 파일에서 직접 Vue를 로드할 수 있다.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
이렇게 하면 브라우저 상에서 바로 Vue 인스턴스를 만들 수 있다. 기본적인 데이터 바인딩, 이벤트 처리, 템플릿 렌더링 등도 가능하다.
제이쿼리와 Vue의 핵심 차이점
- Vue는 반응형(reactive) 데이터 바인딩을 제공한다. 데이터가 바뀌면 뷰가 자동으로 갱신된다.
- Vue는 가상 DOM을 사용해 성능을 높이며, DOM 조작 중심인 jQuery와는 접근 방식이 다르다.
- Vue는 컴포넌트 기반 개발이 가능하지만, jQuery는 이 개념이 없다.
- 라이프사이클 훅(Lifecycle hook)으로 상태 변화에 따른 로직 구현이 가능하다.
싱글 파일 컴포넌트(SFC) 없이 Vue를 쓸 때의 한계
Vue의 강력한 기능 중 하나인 SFC(Single File Component)는 사용하지 못하게 된다. 주요 한계는 다음과 같다.
- 재사용성 저하: 컴포넌트를 파일 단위로 관리하지 못해 재사용이 어렵다.
- 스타일/로직/HTML 분리가 힘듦: SFC는
<template>,<script>,<style>블록으로 구성되지만, CDN 방식에서는 파일 분리가 어렵다. - 프로젝트 규모 확장에 불리: 파일 수가 많아질수록 코드 관리가 어려워진다.
- 코드 분할(Code splitting) 불가능: 빌드 도구 없이 모듈 분리, 자동 최적화 등을 쓸 수 없다.
그렇다면 어떤 선택이 합리적일까?
간단한 DOM 바인딩이나 마이크로 인터랙션이 필요한 경우 Vue를 CDN으로 불러와 사용해도 충분하다. 하지만, 다음과 같은 경우에는 빌드 도구 사용이 권장된다:
- 컴포넌트 수가 많아질 때
- 코드 유지 보수가 중요한 프로젝트
- 싱글 파일 컴포넌트를 통해 구조적 개발을 하고 싶을 때
즉, Vue는 제이쿼리처럼도 쓸 수 있지만, 그 접근 방식과 확장성 면에서는 근본적으로 다른 방향의 도구다.
마무리
jQuery처럼 Vue.js를 간단히 사용하려면 가능은 하다. 다만 Vue의 진정한 장점(컴포넌트 기반, 반응형 시스템 등)을 제대로 활용하려면 빌드 도구 환경을 갖추는 것이 좋다.
🔗 참고 링크
