728x90
반응형
Alpine.js 기초, 셋팅
#1
상황
- 간단한 화면 한 두개가 필요한데 앵귤러나, 리엑트, vue등을 사용하기엔 닭잡는데 소잡는 칼을 쓰는것같고.. (사실 앵귤러나 리엑트는 잘 모름), jquery처럼 간단하게 셋팅(cdn)하여 사용할 수 있는게 없을까 해서 찾은게 바로 Alpine.js 다.
- Vue와 거의 유사(v- 가 아닌 x- 로 사용) 하다.
- Alpine 사이트 참고.
Alpine.js
Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going. Alpine is a collection of 15 attributes, 6 properties, and 2 methods. There is no better way to
alpinejs.dev
샘플 확인
- Alpine.js 첫 화면에 샘플코드가 보이는데 웹페이지에(jsp/html등)에 넣고 브라우저로 호출 해보자
<script src="//unpkg.com/alpinejs" defer></script>
<div x-data="{ open: false }">
<button @click="open = true">Expand</button>
<span x-show="open">
Content...
</span>
</div>- x-data="{ open: false }" 가 변수 선언부로 open이라는 변수에 false를 셋팅.
- button에 버튼 클릭(@click)이벤트에 선언한 open이라는 변수를 true로 바꾸라는 뜻
- span에 x-show는 true가 오면 보여주고, false가 오면 보여주지마라는 속성.
개발 - 템플릿 & 데이터 바인딩 (x-data)
- 디자인은 나중에 입힌다.
- 타이틀, 이름, 핸드폰 번호, 인증번호, 확인버튼등 모든 텍스트 및 입력창은 데이터들은 재사용을 위해 Alpine.data로 관리한다.
- 형태는 아래와 같이 보여준다.
[h1 타이틀]
| 이름 | [input창] |
| 핸드폰 번호 ( '-' 는 제외 ) |
[input창] [인증번호 발송 버튼] |
| 인증번호 | [input창] |
[확인 버튼]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="//unpkg.com/alpinejs" defer></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('data', () => ({
title : '인증하기',
table : {
nameLabel:"이름",
nameInput: '',
phoneLabel: '핸드폰 번호<br>(\'-\'제외)',
phoneInput: '',
authNumSendBtnLabel: '인증번호전송',
authNumLabel: '인증번호',
authNumInput: ''
},
confirmBtnLabel : '확인하기',
}));
});
</script>
<style>
th, tr, td {
border:1px solid black;
}
</style>
<div x-data="data">
<h1 x-text="title"></h1>
<table>
<tr>
<!-- 단방향 바인딩 (x-text) -->
<th x-text="table.nameLabel"/>
<td>
<!-- 양방향바인딩 input -->
<input type="text" x-model="table.nameInput"/>
<!-- 테스트 -->
<span x-text="table.nameInput"/>
</td>
</tr>
<tr>
<!-- 단방향 바인딩 (x-html) -->
<th x-html="table.phoneLabel"/>
<td>
<!-- 양방향바인딩 input -->
<input type="text" x-model="table.phoneInput"/>
<span x-text="table.phoneInput"></span>
<button x-text="table.authNumSendBtnLabel"></button>
</td>
</tr>
<tr>
<!-- 단방향 바인딩 (x-text) -->
<th x-text="table.authNumLabel"/>
<td>
<!-- 양방향바인딩 input -->
<input type="text" x-model="table.authNumInput"/>
<!-- 테스트 -->
<span x-text="table.authNumInput"/>
</td>
</tr>
</table>
<button x-text="confirmBtnLabel"></button>
</div>
</body>
</html>
주의!!!!
- 하면서 알게된건데 닫힘 태그 ( /> ) 를 잘못쓰면, 그 이후로 바인딩해놓은 변수들에는 접근 시 오류가 발생한다.
<h1 x-text="title"></h1> 을 <h1 x-text="title"/> 로 바꿔놓고 console에 보면 h1 아래 바인딩 해놓은 모든 변수에 오류가 발생한다.
728x90
반응형