웹 개발 영역은 수많은 프레임워크가 놀라운 속도로 등장했다가 사라지는 등 예측 불가능성이 특징이며, 이로 인해 초보자나 숙련된 웹 개발자가 혼란을 겪을 수 있습니다.
Alpine.js는 반응성 및 부작용과 같은 복잡성을 처리할 수 있는 기능을 유지하면서 단순성을 우선시하여 다른 웹 개발 프레임워크와 차별화됩니다.
알파인.js 시작하기
알파인.js에서 제공하는 기능을 활성화하고 활용하기 위해서는 HTML 문서 내에 지정된 자바스크립트 코드 스니펫을 통합해야 합니다.
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
노드 패키지 관리자를 사용하여 프로젝트 내에 설치하여 Alpine.js를 통합할 수 있습니다.
npm install alpinejs
Alpine.js의 반응성
지정된 작업에는 웹 개발에 일반적으로 사용되는 사전 정의된 마크업이 포함된 “index.html”이라는 기본 HTML 문서를 생성하는 작업이 포함됩니다. 이러한 유형의 마크업을 일반적으로 “상용구 코드”라고 합니다. 상용구 코드는 웹사이트의 구조와 레이아웃을 구축하는 기초가 되며, 동일한 도메인 내의 여러 페이지에 일관된 프레임워크를 제공합니다. 제공된 코드는 필요한 속성 및 태그와 함께 헤드 섹션 및 본문 섹션과 같은 HTML 페이지의 기본 요소를 설정하는 데 사용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js</title>
</head>
<body>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</body>
</html>
스크립트 태그 내에서 defer 속성을 사용하면 문서 처리를 완료한 후 웹 브라우저가 스크립트를 실행하도록 지시합니다.
Alpine.js의 활용에는 “x-data” 및 “x-text”와 같은 특정 지시문을 통합하는 것이 포함됩니다. 이러한 지시문은 각각 정보를 저장하고 관련 요소의 내용을 설정하기 위한 목적으로 사용됩니다. 이러한 지시어를 활용하려면 다음 코드를 구현하여 HTML 마크업에 포함시켜야 합니다:
<div x-data="{name:'David Uzondu', organisation:'Make Use Of'}">
My name is <strong x-text="name"></strong>
and <i x-text="organisation"></i> is Awesome
</div>
다음 문구를 좀 더 설득력 있게 표현할 수 있나요? “회사 이름과 직책을 포함한 연락처 정보를 입력하세요.
알파인과 리액트의 비교
알파인은 크기가 작고 적응성이 뛰어나 소규모 프로젝트 및 프로토타입 개발에 이상적인 적당한 프레임워크입니다.
`useEffect()`와 같은 후크의 활용은 React와 같은 보다 광범위한 프레임워크에서 널리 사용되며, 이러한 후크는 일반적으로 “부작용”이라고 하는 렌더링 프로세스 외에 영향을 미치는 컴포넌트의 라이프사이클 측면을 관리하는 데 사용됩니다.사용 효과()` 훅은 제공된 “의존성 배열”의 구성 요소가 변환될 때 지정된 함수를 실행합니다.
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
Alpine.js 내에서 부작용을 관리하기 위해 x-effect 지시문을 사용할 수 있습니다. 예를 들어 변수를 모니터링하고 변수가 수정될 때마다 그 값을 기록하고자 한다고 가정해 보겠습니다:
<div x-data="{number: 1}" x-effect="console.log(number)">
<h1 x-text="number"></h1>
<button @click="number = number + 1">Add new number</button>
</div>
초기 검사 시, 숫자 변수를 1씩 증가시키는 @click 지시문을 사용하여 x-effect에 제출된 모든 변수의 변경 사항을 자동으로 모니터링하므로 종속성을 지정할 필요가 없다는 점에 유의해야 합니다.
Alpine.js의 조건부 렌더링
React와 같은 프레임워크 내에서 조건부 렌더링을 활용하는 것은 실현 가능한 옵션입니다. Alpine.js는 x-if 지시문 구현과 이 목적을 위해 특별히 설계된 고유 템플릿 요소를 통해 이 기능을 지원합니다.
index.html의 HTML 본문에 다음 코드가 추가되었습니다:
<div x-data="{shown:true}">
<button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button>
<template x-if="shown">
<div>The quick brown fox jumped over the dog.</div>
</template>
</div>
템플릿 컴포넌트에 대한 x-if 지시문을 사용하면 Alpine.js가 웹 페이지에 존재하는 요소의 변경 사항을 모니터링할 수 있으므로 중요한 용도로 사용됩니다. 각 템플릿 요소는 하나의 최상위 컴포넌트로만 구성되어야 하며, 다음 예제는 이 요구 사항을 위반하는 것입니다:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
Alpine.js로 할 일 애플리케이션 구축하기
이전 지식을 통합하고 디렉터리를 만들고 두 개의 파일을 추가하여 로컬 데이터 저장 기능을 갖춘 간단한 작업 관리 도구를 개발하세요 –
<link rel="stylesheet" href="style.css">
지금은 웹페이지의 스타일링에 신경 쓰지 마시기 바랍니다. 이 프로젝트와 관련된 GitHub 리포지토리에서 “style.css” 파일을 다운로드하여 웹사이트 내에서 활용하시기 바랍니다.
페이지 새로고침 후에도 웹 페이지의 요소 상태를 유지하려면 Alpine.js 퍼시스트 플러그인을 사용해야 합니다. 이렇게 하려면 HTML 파일의 헤드 섹션에 있는 핵심 Alpine.js 라이브러리용 스크립트 태그 앞에 이 플러그인의 CDN 버전에 대한 스크립트 태그를 추가하세요.
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
사용 중인 프로그래밍 언어와 프레임워크에 따라 코드를 작성하는 방법이 다르므로 이 코드가 사용될 컨텍스트를 지정해 주세요.
<div x-data="{allTasks:$persist([])}">
<h1>To-do Application</h1>
</div>
$persist 플러그인은 JavaScript 로컬 저장소 API를 위한 포괄적인 메커니즘 역할을 합니다. 이 도구를 활용하면 브라우저는 제공된 배열을 로컬 저장소에 저장하도록 지시하여 웹 페이지를 다시 로드할 때 정보가 영향을 받지 않도록 할 수 있습니다.또한, 제출 지시어와 함께 양식을 통합하여 표준 제출 프로세스를 차단하는 설계가 통합되었습니다.
<form @submit.prevent="
($refs.task.value.trim().length && !allTasks.map(x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{task: $refs.task.value.trim(), id:Date.now(), done:false}].concat(allTasks)
: $refs.task.value.trim() === ''
? alert('Input value cannot be empty')
: alert('Task added already.');
$refs.task.value=''
">
</form>
“$refs” 키워드를 활용하면 “task” X-참조 지시문을 통합하여 국내 머신 요소에 액세스할 수 있습니다. 또한 이 프로그램은 특정 유효성 검사를 시행하여 빈 문자열이나 중복된 작업이 명단에 포함되지 않도록 합니다. 양식을 완성하기 전에 “task” x-reference를 가진 입력 컴포넌트를 도입하고 플레이스홀더를 삽입합니다. 그런 다음 버튼을 도입하고 그 유형을 “제출”로 지정합니다.
<input type="text" x-ref="task">
<button type="submit">Add Task</button>
이 구절의 컨텍스트를 지정해 주세요. 프로그래밍 언어 문서에 있는 내용인가요, 아니면 다른 유형의 텍스트인가요?
<div class="items">
<div x-data="{uncompleted:$persist([])}" x-effect="uncompleted = allTasks.filter(x=>x.done===false)">
</div>
<div x-data="{completed:$persist([])}" x-effect="completed=allTasks.filter(y=>y.done===true).reverse()">
</div>
</div>
초기 섹션에서 H3 태그를 사용하여 “완료되지 않음”으로 표시된 제목 섹션을 통합합니다. 그 후, 미완성 컬렉션 내의 모든 구성 요소에 대해 ‘제어 버튼’과 과제를 모두 포함하는 구획을 생성합니다.
컨트롤을 사용하여 목록에서 제품을 제거하거나 완료된 것으로 태그를 지정할 수 있는 기능이 사용자에게 부여됩니다.
<h3>Uncompleted</h3>
<template x-for="element in uncompleted" :key="element.id">
<div x-data="{showControls:false}" @mouseover="showControls = true" @mouseout="showControls = false"
class="task"
>
<div class="controls">
<div x-show="showControls" @click="element.done=true">[M]</div>
<div x-show="showControls" @click="allTasks=allTasks.filter(x=>x.id!==element.id)">[R]</div>
</div>
<div x-text="element.task" ></div>
</div>
</template>
x-for 지시문을 사용하면 배열을 반복하고 해당 요소를 렌더링할 수 있습니다. 이 기능은 Vue의 v-for 지시문과 React의 Array.map() 메서드와 비슷합니다. “controls” 디비전에는 각각 “완료된 것으로 표시” 및 “제거” 옵션을 나타내는 “[M]” 또는 “[R]”이라는 특정 문자열을 포함하는 두 개의 디비전이 존재합니다. 원하는 경우 적절한 아이콘으로 대체할 수 있습니다.
이 코드 스니펫에서 `x-show` 지시어는 지시어가 가리키는 속성 값이 거짓인 경우 CSS에서 `display` 속성을 `none`으로 설정하여 DOM 내 요소의 가시성을 결정하는 데 사용됩니다. “items”` 컨테이너 안에 중첩된 두 개의 `div` 요소를 비교하면 몇 가지 주목할 만한 차이점을 발견할 수 있습니다. 구체적으로, 두 번째 `div` 내의 `h3` 자식 요소의 텍스트 내용은 “Completed”로 설정되어 있는 반면, `control` `div`의 첫 번째 자식에는 ‘[M]` 대신 ‘[U]`로 표시되는 대체 텍스트가 있습니다. 또한 두 번째 `div`에 연결된 `@click` 이벤트 리스너에는 추가 속성인 `element.done`가 `false`로 설정되어 있습니다.
<div x-show="showControls" @click="element.done=false">[U]</div>
Alpine.js의 주요 기능에 대한 탐색을 통해 기본 원리를 포괄적으로 이해했으며, 새로 습득한 기술을 활용하여 간단한 애플리케이션을 만들었습니다.
알파인.js 코드를 더 쉽게 작성하기
알파인.js는 까다로운 구문과 복잡한 구조로 유명한 프로그래밍 언어로, 개발 초기에 당혹스러울 수 있습니다. 하지만 개발자는 Visual Studio Code와 같이 널리 사용되는 코드 편집기 내에서 다양한 편집 도구를 사용할 수 있어 Alpine.js 코딩 과정을 간소화할 수 있습니다.
확장 프로그램 마켓플레이스에서 Alpine.js IntelliSense를 인수하면 지시어와 상호 작용할 때 보다 간소화된 환경을 제공하여 Alpine.js를 활용하는 프로젝트 작업 시 효율성을 향상시킬 수 있습니다.