[Web] Alpine.js 사용법
업데이트:
1. 사용 배경
아무리 백엔드 개발자라 할지라도 프론트 개발을 완전히 외면할 수는 없습니다.
디자인이 예쁘지는 않아도, 간단한 Admin 개발이나 Portal 개발은 필수(?)적입니다.
최근 주간회의에서 시니어 개발자 분께서 Alpine.js 사용 후기를 말씀해주셔서
저도 빠르게 Portal 개발에 적용해 보았습니다.
제가 좋아하는 니콜라쓰 선생님도 Alpine.js 을 소개해주었답니다~! 😆
바로 사용법 갑니다.
2. Alpine.js (세팅)
사용할 곳에 script를 추가해줍니다.
<head>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
끝~!
3. Alpine.js (적용)
공식 홈페이지 에서 나온 설명으로는 부족한 부분이 있어서 직접 사용하면서 느꼈던 필요한 부분을 함께 적어보았습니다.
1) 변수 선언 (x-data)
x-data는 Alpine.js에서 사용할 변수를 선언합니다.
자바스크립트의 Object 처럼 key:value 로 정의하며,
x-data로 선언된 변수는 마치 로컬 변수처럼
x-data를 벗어난 곳에서는 해당 변수를 사용할 수 없습니다.
<div x-data="{company: 'Gmarket', job: 'Data Engineer'}">
<!-- company 과 job 을 사용할 수 있음 -->
</div>
<!-- company 과 job 을 사용할 수 없음 -->
2) 변수 사용 (x-text)
x-text는 선언했던 변수를 사용합니다.
단, x-text당 하나의 변수를 사용할 수 있습니다.
<div x-data="{company: 'Gmarket', job: 'Data Engineer'}">
저는 <span x-text="company"></span>의 <span x-text="job"></span>입니다.
</div>
결과)
저는 Gmarket의 Data Engineer입니다.
3) API 호출 (x-init)
x-init은 element를 초기화하는데 사용하며,
fetch로 얻은 json 값을 x-data에 저장하는 용도로 사용할 수 있습니다.
저는 API call 함수로 심플한 fetch를 사용할 것인데요.
fetch는 es6부터 지원되니 기존 프로젝트에서 지원하는지의 여부를 살펴보세요~!
실습에 사용할 API는 테스트용 API를 제공하는 jsonplaceholder 를 활용해봅시다.
Request) https://jsonplaceholder.typicode.com/todos/1
Response)
<div x-data="{ todo : {}}"
x-init="todo = await getTodo()">
<div x-text="todo.title"></div>
</div>
<script>
getTodo = function () {
return fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(res => res.json());
}
</script>
결과)
delectus aut autem
4) 조건문 (template, x-if)
x-if는 조건식을 사용할 수 있습니다.
단, x-if는 template 태그와 함께 사용해야 합니다.
<div x-data="{ todo : {}}"
x-init="todo = await getTodo()">
<template x-if="todo.completed == false">
<div>Not yet.</div>
</template>
</div>
<script>
getTodo = function () {
return fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(res => res.json());
}
</script>
결과)
Not yet.
5) 반복문 (template, x-for)
x-for은 반복문을 사용할 수 있습니다.
단, x-for 역시 template 태그와 함께 사용해야 합니다.
<div x-data="{ todoList : {}}"
x-init="todoList = await getTodos()">
<template x-for="todo in todoList">
<li x-text="todo.title"></li>
</template>
</div>
<script>
getTodos = function () {
return fetch('https://jsonplaceholder.typicode.com/todos')
.then(res => res.json());
}
</script>
결과)
- delectus aut autem
- quis ut nam facilis et officia qui
- fugiat veniam minus
- et porro tempora
- laboriosam mollitia et enim quasi adipisci quia provident illum
- qui ullam ratione quibusdam voluptatem quia omnis
- illo expedita consequatur quia in
...
6) 2중 반복문 (template, x-for)
2중 반복문을 사용하려면 다음의 중요한 사실을 알고 있어야 합니다.
“template 하위에는 단일 element만 가질 수 있습니다.”
실습을 위해, json 응답 값의 구조가 List 안에 또 List가 있는 경우를 생각해봅시다.
다음과 같이 test function 을 하나 만들어두었습니다.
<script>
getPosts = function () {
return [
{
"id": 1,
"name": "공고문1",
"description": "테스트 공고문입니다.",
"picturesList": [
{
"id": 1,
"url": "http://test.image1.com"
},
{
"id": 2,
"url": "http://test.image2.com"
}
]
},
{
"id": 2,
"name": "공고문2",
"description": "테스트 공고문입니다.",
"picturesList": [
{
"id": 3,
"url": "http://test.image3.com"
}
]
}
];
}
</script>
저희가 원하는 결과는 다음과 같다고 해봅시다.
그렇다면 자연스럽게 아래처럼 코드를 작성할 것입니다.
<div x-data="{ postList : {}}"
x-init="postList = await getPosts()">
<template x-for="post in postList">
<h3 x-text="post.name"></h3>
<template x-for="picture in post.picturesList">
<li x-text="picture.url"></li>
</template>
</template>
</div>
전혀 틀린게 없어보이지만 위에서 언급했듯이
template 하위에는 단일 element만 가질 수 있기 때문에 다음과 같이 코드를 작성해야 합니다.
<div x-data="{ postList : {}}"
x-init="postList = await getPosts()">
<template x-for="post in postList">
<div>
<h3 x-text="post.name"></h3>
<template x-for="picture in post.picturesList">
<li x-text="picture.url"></li>
</template>
</div>
</template>
</div>
위에 소개한 attribute 말고도 더 많은 기능들이 있지만
마지막으로 한가지만 더 소개하고 마무리 하겠습니다.
4. Alpine.js (추가)
전역 변수를 사용하고 싶은 경우에 사용하면 됩니다.
$store는 Alpine.js 전역 저장소입니다.
x-data 태그 안에만 있으면 어디서든지 사용이 가능합니다.
간단하게 개념만 설명하겠습니다~!
1) 전역 변수 선언
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('visitor', {
"newSkill": "Alpine.js",
"job": "Developer"
});
});
</script>
store 메서드
- 첫번째 파라미터 : key (String 형식으로 값을 넣으면 됨)
- 두번째 파라미터 : value (Ojbect 형식으로 값을 넣으면 됨)
2) 전역 변수 사용
<div x-data>
저희는 <span x-text="$store.visitor.newSkill"></span> 사용법을 획득한 <span x-text="$store.visitor.job"></span>입니다.
</div>
결과)
저희는 Alpine.js 사용법을 획득한 Developer입니다.
여기까지 Alpine.js 사용법이었습니다~!
tailwind와 결합한 example이 많아서 앞으로 자주 사용하지 않을까 생각됩니다.
그럼 수고 많으셨습니다~!
