Alpine.js란?

Alpine.js는 2019년 11월에 시작된 신생 라이브러리 또는 프레임워크입니다. 2020년 5월 6일 기준 v2.3.3까지 릴리즈되었습니다.

공식 레포지토리의 설명에 따르면 Alpine은 마크업(HTML) 내에서 JavaScript 동작을 구성할 수 있는 아주 작고 튼튼한 프레임워크입니다. 반응형의 선언적인 코드를 아주 적은 비용으로 작성할 수 있습니다.

이 프로젝트의 저자인 Caleb Porzio에 따르면, Alpine은 ‘바닐라 JS(또는 jQuery)와 Vue나 React같은 거대한 Virtual DOM 프레임워크의 간극을 메우는 것’을 목적으로 한다고 합니다. Alpine은 Vue나 React를 대체하는 것이 아니며, 함께 사용될 수도 있습니다. 서버사이드 렌더링을 사용하는 경우와도 잘 어울립니다.

이미 Vue도 충분히 가벼운 웹 프레임워크로서 잘 기능하고 있는 것 같은데 또 웬 놈의 경량 프레임워크냐! 라고 피로감을 호소하실 분들도 있을 것 같습니다. 하지만 Alpine.js는 웹페이지에 JS가 간단히 필요할 때 아주 유용한 선택지입니다. 한번 알아봅시다.

Get Started!

Alpine은 가벼운 만큼 세팅이 쉽습니다. 빌드를 필요로 하지 않으며, CDN이나 셀프 호스팅을 통해 alpine.js 파일 하나만 불러오면 스스로 initiate되며 모든 준비가 끝납니다. npm 패키지 이름은 alpinejs입니다.

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

이제 Alpine.js를 마크업에서 바로 사용할 수 있습니다.
대부분의 문법을 Vue에서 따왔기 때문에, Vue 사용 경험이 있다면 익히기가 매우 쉽습니다.

Alpine으로 구현된 드랍다운 예시:

<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>

Alpine은 Virtual DOM을 사용하지 않으며, 모든 것은 HTML markup 내에서 선언적으로 이루어집니다. DOM과 동작은 분리되지 않습니다. 그렇기 때문에 선언적인 코드를 쉽게 작성할 수 있습니다. Alpine에는 13개의 디렉티브와 5개의 Magic Properties가 존재하며, 이 모든 것에 대한 문서가 README.md에 포함되어 있습니다.

Why Alpine.js?

위에서 간략히 소개드린 내용에 따르면 Alpine은 다음과 같은 장점이 있습니다.

  • 가볍습니다. v2.3.3 기준으로, gzip 압축 시 8KB입니다.
  • 메뉴 내비게이션, 팝업 등 간단한 UI 요소를 최소한의 오버헤드로 빠르게 만들 수 있습니다.
  • 빌드 과정이 필요 없습니다.
  • 다른 프레임워크나 기존 시스템과 쉽게 결합될 수 있습니다.

또한 개인적인 의견으로, Alpine.js는 워낙 단순해서 미성숙한 프로젝트에서 나타나는 문제들이 덜 할 것 같습니다.

Reference