, 이름 = Alpine.js
, 장르 = 웹 프레임워크, 자바스크립트 라이브러리
, 개발 = Caleb Porzio
, 발표 = 2019년 11월
, 최신 버전 = 3.x
, 언어 = JavaScript
, 라이선스 = MIT 라이선스
, 사이트 = 공식 홈페이지
)]
1. 개요
Alpine.js는 HTML 마크업 내에서 직접 동작을 정의하는 저용량의 JavaScript 프레임워크이다."JavaScript를 위한 Tailwind CSS"를 표방하며 등장했다. Vue.js나 React 같은 거대 프레임워크가 제공하는 반응성(Reactivity)과 선언적 렌더링 기능을 제공하면서도, 빌드(Build) 과정 없이 CDN 스크립트 태그 하나만으로 가볍게 사용할 수 있는 것이 특징이다.
복잡한 SPA(Single Page Application)보다는, 서버 사이드 렌더링(SSR) 위주의 전통적인 웹페이지에 약간의 상호작용(드롭다운, 모달, 탭 전환 등)을 더할 때 최고의 효율을 발휘한다.
2. 특징
- 가벼움: Gzip 압축 기준 약 7kB 정도로 매우 가볍다. jQuery를 대체하는 현대적인 대안으로 꼽힌다.
- DOM 중심: 별도의 자바스크립트 파일이나 컴포넌트 선언 없이, HTML 태그의 속성(Attribute)에 직접 로직을 작성한다. (`x-data`, `x-bind`, `x-on` 등)
- Vue.js와의 유사성: 문법이 Vue.js와 매우 흡사하여(v-if → x-if, @click → x-on:click), Vue 개발자라면 배우지 않고도 바로 쓸 수 있을 정도다.
3. Laravel과의 관계 (TALL Stack)
PHP 프레임워크인 Laravel 생태계에서 매우 사랑받는 도구이다.라라벨의 풀스택 프레임워크인 Livewire와 찰떡궁합을 자랑하며, 이 둘을 합쳐 TALL Stack(Tailwind CSS + Alpine.js + Laravel + Livewire)이라는 용어가 탄생했을 정도다. 라라벨의 공식 스타터 키트인 'Breeze'의 프론트엔드 스택으로도 채택되었다.
4. 사용법
4.1. 설치
CDN을 헤더에 추가하면 끝이다.#!syntax html
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
4.2. 예제 (카운터)
버튼을 누르면 숫자가 증가하는 간단한 예제.#!syntax html
<div x-data="{ count: 0 }">
<button x-on:click="count++">증가</button>
<span x-text="count"></span>
</div>
- `x-data`: 해당 HTML 영역(Scope)의 로컬 상태(State)를 선언한다.
- `x-on:click`: 클릭 이벤트를 감지한다. (`@click`으로 줄여 쓸 수 있다.)
- `x-text`: 요소의 텍스트 내용을 상태 값과 동기화한다.