회사 프로젝트를 진행하며 사용한 Alpinejs의 간단한 사용법 및 후기를 남겨 보려고 합니다.
AlpinJS 란?
Alpinejs는 자바스크립트를 더욱더 가볍게 쓸 수 있게 만든 프레임워크 입니다.
Vue.js와 비슷한 구조를 가지고 있고, 더욱 간결하고 가벼운 코드로 DOM조작 및 UI를 다룰 수 있습니다.
빌드 도구가 따로 필요없고, 복잡한 설정 없이 사용할 수 있는 경량화된 라이브러리라 할 수 있습니다.
<기본 문법>
CDN 또는 npm / yard 통해 알파인 JS를 설치 합니다.
기본적으로 알파인JS는 x-??? 이런식으로 x 대쉬 xxx을 통해 여러 기능을 이용 할 수 있습니다.
기본적인 예시로
<div x-data={ text: 'HI' }>
<span x-text="text"></span> // HI 출력
</div> x-data - HTML 블록에 대한 새로운 Alpine 구성 요소와 해당 데이터를 선언
x-text - x-data 내부에 설정한 프로퍼티의 값을 표시
<div x-data={ count: 0 }>
<button @click="() => count += 1">UP</button>
<span x-text="count"></span> // UP 클릭 시 count가 1씩 증가
</div> x-on - 선택한 요소의 이벤트를 수신 하는 역할
@click - clcik 이벤트를 바인딩 시킵니다. x-on:click의 축약형
- @click.stop -> 이벤트 버블링 방지 === event.stopPropagation()
<div x-data={ isVisible: false }>
<button @click="isVisible = !isVisible">
<span x-text="isVisible ? '숨기다' : '보이다'"></span> // isVisiable이 클릭 이벤트에 토글로 수신되고있어서, true / false에 따른 text처리
</button>
<div x-show="isVisible" x-cloak>보여라!</div>
</div> x-show - 지정한 요소가 조건에 따라 숨김 / 보임 처리가 됩니다. ( display: none, block ) 형식
x-cloak - Alpine이 초기화를 완료하기 전 x-show로 숨김 html 요소를 숨깁니다. 렌더링 시 원치않는 로딩을 방지하기 위해 사용합니다.
x-cloak을 사용하려면 최상단 css에 설정이 필요 합니다.
<index.css>
[x-cloak] {
display: none;
}<div x-data={ isVisible: false }>
<button @click="isVisible = !isVisible">
<span x-text="isVisible ? '숨기다' : '보이다'"></span>
</button>
<template x-if="isVisible">
<div>보여라!</div>
</template>
</div> x-if - 렌더트리에서 요소를 조건부로 추가 / 제거합니다.
- x-if와 x-show의 차이
x-if는 template를 꼭 써야하고, html에 요소가 포함되지 않고 렌더링됩니다.
그와 반대로 x-show는 display가 none / auto 로 변하는 거기 때문에 화면에서 보이지 않을뿐 html에 포함되어 렌더링됩니다.
<div x-init="console.log('렌더링')"></div> // 첫 렌더링 시 alpinejs가 로딩되고 발생
<div x-init="posts = await (await fetch('/posts')).json()"></div> // fetch로 json 데이터 요청 및 사용가능
<div x-init="$nextTick(() => { 실행할 로직 })"></div> // 렌더링 후 실행 x-init - Alpine의 모든 요소의 초기화하는 역할
$nextTick - 렌더링을 완전히 완료한 후에 일부 코드를 실행
애니메이션 시작 시점
입력 필드에 포커스를 설정할 때 ( ref 설정 후 js에서 $refs로 포커스 설정 시 )
등등...
<div x-data={name: ""}>
<input type="text" x-model="name"> // e.target.value = 안녕하세요
<span x-text="name"></span> // 안녕하세요
</div> x-model - input의 입력 요소와 데이터가 동기화 됩니다. ( value -> x-model )
@change와 함께 사용 가능 - onChange와 동일
<div x-data={velogList: [{id: 1, name: "one"}, {id: 2, name: "two"}]>
<template x-for="(velog, index) in velogList">
<div :key="velog.id" x-text="`${index + 1} : ${velog.name}`"></div> // one two
</template>
</div>x-for - x-data에 지정한 배열을 html의 반복추가 하기 위한 문법
- 고유하게 식별할 수 있도록 하기 위해 :key를 사용 - list를 수정 및 삭제했을 때 고유한 식별값을 받아 정확한 처리를 위해 사용
- x-for을 쓰기위해서는
<template></template> 로 감싸주어야 렌더링 됩니다.
<div x-data="{ message: 'Hello world' }">
<div x-ignore>
<p x-text="message"></p> <!-- 이 부분은 무시됨 -->
</div>
</div>x-ignore - alpinejs에서 html의 블록이 초기화되고 바인딩되는것을 방지 / ignore 내부에서는 alpinejs가 사용되지 않도록 무시하는 역할
<template x-if="isShow">
div x-html="(await axios.get('경로')).data"></div> // 경로의 html을 innerHtml로 추가 시킵니다.
</template>x-html - HTML을 브라우저가 읽을 수 있도록 해석한 후 그 안의 태그를 실제 DOM 요소로 렌더링할 수 있도록 합니다. <-> x-text 와 대조되는 것으로 x-text 는 말 그대로 텍스트만 반환하기에 HTML 태그를 그대로 렌더링하지 않고 텍스트로 표시 즉 innerText와 동일한 동작
- x-html 사용시 주의 할 점
위 방식으로 사 용 시 XSS(크로스 사이트 스크립팅) 공격에 취약할 수 있습니다.
안전한 데이터 또는 취약하지 않고 노출되어도 괜찮은 html파일만 로드 할 수 있도록 해야합니다.
알파인 js 공식문서에서도 이부분을 강조하여 간단한 모달창이라던지, 그런 부분에서 사용하도록 하고, 왠만하면 권장하지 않습니다.
요약 & 정리
실제 프로젝트에 사용해보면서 느낀바로는 간단한 프로젝트나, 크지 않은 규모에서는 dom조작, 조건부 렌더링 등 바닐라 자바스크립트로 직접 구현하는 것 보다 훨씬 코드가 간결하고, 편하다고 생각 했습니다.
허나 대규모 프로젝트에서는 여전히 React / Vue // 등등 강력한 프레임워크, 라이브러리가 있기 때문에 사용하는 유저가 프로젝트 규모에 따라 사용하길 권장합니다.
- 추 후 실제 프로젝트에 적용한 예시들이나, 알파인JS를 모듈화시켜서 사용하는 법 등 실제 사용 예시를 글로 남길 수 있도록 하겠습니다.
