내 유튜브 구독 리스트중 하나인 노마드 코더
alpine.js => 경량 자바 스크립트
웹개발을 위한 제이쿼리 라고 생각하면 편하다
그리고 효과가 15개라 손에 금방 익힐 수 있다.
리액트 웹을 모두 만들기는 어렵고 가벼운 웹이 필요할 때 유용할 듯
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
모달, 탭, 아코디언, 탭 등 다양한 인터랙티브 요소들을 HTML요소에 속성만 추가하면 된다.
카운터 만들기
<body>
<script src="//unpkg.com/alpinejs" defer></script>
<div x-data="{count: 0}">
<button x-on:click="count = count + 1">Add one</button>
<span x-text="count"> </span>
</div>
</body>
HTML에 x-속성만 추가해주면 Alpine.js가 알아서 처리해줌
토글효과주기
<body>
<script src="//unpkg.com/alpinejs" defer></script>
<div x-data="{ open: false}">
<button x-on:click="open = !open">Toggle</button>
<div x-show="open" x-transition>
<h1>This is the content!</h1>
</div>
</div>
</body>
찍먹 완료~
반응형
'개발 > Javascript' 카테고리의 다른 글
| [Vue] 라우터 (2) | 2022.08.16 |
|---|---|
| [React] 페이지라우팅2 - React Router사용 (0) | 2022.08.01 |
| [React] 페이지 라우팅 - React SPA & SCR (0) | 2022.07.28 |
| [Vue] 컴포넌트 (0) | 2022.07.27 |
| [React] Page Routing; 페이지라우팅 | MPA와 SPA방식 차이 (0) | 2022.07.26 |