Alpine.js๐
HTML์ ์ธ๋ผ์ธ JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋จํ ์ธํฐ๋ํฐ๋ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๋๋ก ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.
์ํ์ธ.js๋ ๊ฐ๋ฒผ์ฐ๋ฉด์๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ฉฐ, ๋ค๋ฅธ ๋ณต์กํ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋นํด ์ง์ ์ฅ๋ฒฝ์ด ๋ฎ๋ค.
๊ณต์ ์ฌ์ดํธ์ ์ฌ์ฉ๋ฐฉ๋ฒ์ด ๋งค์ฐ ์ ๋ํ๋ ์๋ค.
๊ณต์ ์ฌ์ดํธ :
https://alpinejs.dev/start-here
Start Here — Alpine.js
Start Here Create a blank HTML file somewhere on your computer with a name like: i-love-alpine.html Using a text editor, fill the file with these contents: Open your file in a web browser, if you see I โค๏ธ Alpine, you're ready to rumble! Now that you're
alpinejs.dev
Alpine.js ์์ํ๊ธฐ๐
๊ฐ๋ฐ ํด์ VS Code ๋ก ์์ ํ์๋ค.
index.html
<html>
<head>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<h1 x-data="{ message: 'I Love Alpine' }" x-text="message"></h1>
</body>
</html>
- ์ฆ๊ฐ ์นด์ดํฐ ๋ง๋ค๊ธฐ
CMD ๊ฐ์ ธ์ค๊ธฐ
์ํ์ธ.js ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด ์๋ ํ์ค์ ํค๋์ ์ถ๊ฐํ๋ค.
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{count:0}">
<button x-on:click="count--">minus(-)</button>
<span x-text="count"></span>
<button x-on:click="count++">plus(+)</button>
</div>
๊ฐ๋จํ๊ฒ ์ซ์๋ฅผ ์นด์ดํธ ํ ์ ์๋ ๋ฒํผ๊ณผ ๊ฐ์ ๋ํ๋ผ ์ ์๋ค.
์ด ์ฝ๋์์๋ 3๊ฐ์ ์์ฑ์ผ๋ก ์นด์ดํฐ๋ฅผ ๊ตฌ์ฑํ์๋ค.
1. ๋ฐ์ดํฐ ์ ์ธ
<div x-data="{ count: 0 }">
Alpine์ ๋ชจ๋ ๊ฒ์ x-data์ง์๋ฌธ์ผ๋ก ์์๋๋ค.
๋ด๋ถ์์๋ x-data์ผ๋ฐ JavaScript๋ก Alpine์ด ์ถ์ ํ ๋ฐ์ดํฐ ๊ฐ์ฒด๋ฅผ ์ ์ธํ๋ค.
2. ์ด๋ฒคํธ ์์
<button x-on:click="count++">Increment</button>
x-on์์๋ ๋ชจ๋ ์ด๋ฒคํธ๋ฅผ ์์ ํ๋ ๋ฐ ์ฌ์ฉํ ์ ์๋ ์ง์์ด์ด๋ค.
x-on:click์ click ์ด๋ฒคํธ๋ฅผ ์์ ํ๋ค.
mouseenter ์ด๋ฒคํธ๋ x-on:mouseenter ์ ๊ฐ์ด ์ฌ์ฉํ๋ค.
3. ๋ณํ์ ๋ฐ์
<h1 x-text="count"></h1>
x-text์์๋ ํ ์คํธ ๋ด์ฉ์ JavaScript ํํ์์ ๊ฒฐ๊ณผ๋ก ์ค์ ํ๋ ๋ฐ ์ฌ์ฉํ๋ Alpine ์ง์๋ฌธ์ด๋ค.
์์์ x-data๋ก ์ ์ธํ ๋ฐ์ดํฐ๊ฐ ์ฌ์ฉ๋๋ค.
- ๋๋กญ๋ค์ด ๋ง๋ค๊ธฐ
<div x-data="{open: false}">
<button @click="open =! open">Toggle</button>
<div x-show="open" @click.outside="open = false">about dropdown</div>
</div>
๊ฐ๋จํ๊ฒ ํ ๊ธ ๋ฒํผ์ ์์ฑํ์๋ค.
1. ์์ ์ ํ
<div x-show="open" ...>Contents...</div>
x-show ๋ ํ์ด์ง์์ HTML ๋ธ๋ก์ ํ์ํ๊ณ ์จ๊ธฐ๋๋ฐ ์ฌ์ฉํ๋ ์ง์์ด์ด๋ค.
2. ์ธ๋ถ์์๋ ํด๋ฆญ ์์ ํ๊ธฐ
<div ... @click.outside="open = false">Contents...</div>
@click.outside ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋๋กญ๋ค์ด ์ธ๋ถ๋ฅผ ํด๋ฆญํ ๋ open ๋ณ์๋ฅผ false๋ก ์ค์ ํ์ฌ ๋๋กญ๋ค์ด์ ๋ซ๋๋ค. ์ด ํธ๋ค๋ฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋กญ๋ค์ด์ด ์ด๋ฆฐ ์ํ์์ ๋ค๋ฅธ ๊ณณ์ ํด๋ฆญํด๋ ๋๋กญ๋ค์ด์ด ๋ซํ๋ค.
- ๊ฒ์ํ๊ธฐ
<div
x-data="{
search: '',
items: ['susu', 'kkang', 'Heo'],
get filteredItems() {
return this.items.filter (
i => i.startsWith(this.search)
)
}
}">
<input x-model="search" placeholder="Search...">
<ul>
<template x-for="item in filteredItems" :key="item">
<li x-text="item"></li>
</template>
</ul>
</div>
๊ธฐ๋ณธ์ ์ผ๋ก ๋ชจ๋ ํญ๋ชฉ์ด ํ์ด์ง์ ํ์๋๊ณ ํ ์คํธ ์ ๋ ฅ์ ํ๋ฉด ํํฐ๋ง์ ํ๋ค.
์ ๋ ฅํ๋ ๋์ ๋ชฉ๋ก์ ๊ฒ์์ค์ธ ๋ด์ฉ์ ๋ฐ์ํ์ฌ ๋ณ๊ฒฝ๋๋ค.
1. ๊ฒํฐ๋ฅผ ์ฌ์ฉํ์ฌ ๊ณ์ฐ๋ ์์ฑ
<div
x-data="{
search: '',
items: ['foo', 'bar', 'baz'],
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
)
}
}"
>
items ์ผ๋ก JavaScript ๋ฐฐ์ด์ ๊ฐ์ ์ค์ ํ๋ค.
get filteredItems()
x-data ๋๋ ํฐ๋ธ ๋ด์์ ์ ์ธ๋์ด JavaScript์ ๊ฒํฐ(getter) ๋ฉ์๋๋ก ์๋ํ๋ค.
๊ฐ์ฒด์ ์์ฑ์ฒ๋ผ ์ ๊ทผ๋์ง๋ง ํจ์์ฒ๋ผ ๋์ํ๋ ํจ์์ด๋ค.
get ํค์๋๋ฅผ ์ฌ์ฉํ๋ฉด, filteredItems๋ฅผ ๋ง์น ๋ณ์์ฒ๋ผ ์ ๊ทผํ ์ ์์ง๋ง ์ค์ ๋ก๋ ํจ์๋ก ๋์ํ๊ฒ ๋ง๋ค ์ ์๋ค. ๊ทธ๋ฌ๋ฉด ์ํ์ธ์ filteredItems๋ฅผ ํธ์ถํ ๋๋ง๋ค ์๋์ผ๋ก ํด๋น ํจ์๋ฅผ ์คํํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ค.
์ด๋ ๊ฒ ํจ์ผ๋ก์จ ์ฝ๋๊ฐ ๋ ๊ฐ๊ฒฐํ๊ณ ์ฝ๊ธฐ ์ฌ์์ง๋ฉฐ, ๊ณ์ฐ๋ ์์ฑ์ด ํ์ํ ๋๋ง๋ค ์๋์ผ๋ก ๊ฐฑ์ ๋ ์ ์๋ค.
filteredItems ํจ์๋ ํ์ฌ ๊ฒ์์ด์ ๋ฐ๋ผ ํํฐ๋ง๋ ํญ๋ชฉ๋ค์ ๋ฐํํ๋ ๋ฉ์๋๋ก ์ ์ํ์๋ค.
this
์์์๋ ์์ฑ์ ์ฐธ์กฐํ๋๋ฐ just ์์ฑ๋ช ๋ง ์ฌ์ฉํ์๋ค. ํ์ง๋ง x-data ๊ฐ์ฒด ๋ด์์ ์ง์ ์์ ํ๊ณ ์์ ๋๋ ๋ค๋ฅด๋ค.
x-data ๊ฐ์ฒด ๋ด์์ ์์ฑ์ ์ฐธ์กฐํ ๋๋ [property] ๋์ ์ this.[property]๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
2. ์ ๋ ฅ์ ๋ฐ์ธ๋ฉ
<input x-model="search" placeholder="Search...">
x-model ์ ์ ๋ ฅ ์์์ ๊ฐ์ ๋ฐ์ดํฐ ์์ฑ๊ณผ "๋ฐ์ธ๋ฉ"ํ๋๋ฐ ์ฌ์ฉ๋๋ค.
์ฆ, ์ ๋ ฅ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค "search" ์ ๊ฐ๋ ์ด๋ฅผ ๋ฐ์ํ์ฌ ๋ณ๊ฒฝ๋๋ค.
3. ๋ฐ๋ณต ์์
<ul>
<template x-for="item in filteredItems" :key="item">
<li x-text="item"></li>
</template>
</ul>
x-for
x-forํํ์์ [item] in [items] ํ์์ผ๋ก ์ทจํ๋ค.
์ฌ๊ธฐ์ [items]๋ ๋ฐ์ดํฐ ๋ฐฐ์ด์ด๊ณ [item]์ ๋ฃจํ ๋ด๋ถ ๋ฐ๋ณต์ ํ ๋น๋ ๋ณ์์ ์ด๋ฆ์ด๋ค.
x-for ๋๋ ํฐ๋ธ๋ฅผ ์ฌ์ฉํ์ฌ filteredItems ๋ฐฐ์ด์ ์ํํ๋ฉด์ ๊ฐ ํญ๋ชฉ์ ๋ํ <li>(๋ฆฌ์คํธ ์์ดํ )๋ฅผ ์์ฑํ๋ค.
:key
:key ๋ฐ์ธ๋ฉ์ ์ฌ์ฉํ์ฌ ๊ฐ ํญ๋ชฉ์ ๊ณ ์ ํ ํค๋ฅผ ๋ถ์ฌํ๋ค. x-text ๋๋ ํฐ๋ธ์ ํจ๊ป ์ฌ์ฉํ์ฌ ๊ฐ ๋ฆฌ์คํธ ์์ดํ ์ ํด๋น ํญ๋ชฉ์ ํ ์คํธ๋ฅผ ํ์ํ๋ค.
๋ํ, ๊ฐ ์์์ ๋ํด ํน์ ํ ๊ฐ์ ์ง์ ํ๋ฉฐ, ์ด ๊ฐ์ ํด๋น ์์๊ฐ ๋ณ๊ฒฝ๋์์ ๋ ํ๋ ์์ํฌ์๊ฒ ์ด๋ค ์์๊ฐ ๋ฐ๋์๋์ง ์๋ ค์ค๋ค.
