Alpine.js로 모듈식 앱 빌드

12877 단어 alpinejsesmjavascript
최근 몇 가지 새로운 프런트엔드 기술과 관련된 POC를 만들었으며 Alpine JS이 그 중 하나였습니다. 이 기사에서는 Alpine을 사용하여 모듈식 웹 앱을 만드는 방법을 보여줍니다.

문맥



우리의 맥락은 완전히 모듈화된 중간/대형 웹 애플리케이션을 만드는 것입니다. 각 페이지는 많은 구성 요소로 구성된 모듈로 취급되며 백엔드 측에서는 SSR과 같은 페이지 생성을 처리합니다Go.

알파인



AlpineJS는 Javascript 영역의 블록에 새로 추가되었으며 해당 사이트에서 다음과 같이 설명합니다.

Your new, lightweight, Javascript framework


AlpineJS는 매우 간단하고 사용하기 쉽습니다. 속성, 속성 및 메서드의 3가지 기둥이 있습니다. 내 목표는 Alpine을 소개하는 것이 아니라 Alpine을 사용하여 응용 프로그램을 모듈화하는 전략을 보여주는 것입니다.

페이지 및 구성 요소



페이지는 많은 구성 요소, 탐색 모음, 카드, 상자, 메뉴, 필드, 그래프 등으로 구성됩니다. Alpine에서 구성 요소는 x-data 속성이 있는 간단한 div일 수 있습니다. 구성 요소의 논리를 재사용하기 위해 각 구성 요소의 논리와 상태를 나타내는 단일 JS 파일을 만들기로 결정했습니다. counter 가 포함된 파일의 간단한 예를 살펴보겠습니다.

export function counter() {
    return {
    count: 0,

        reset() {
            this.count = 0;
        },

        increment() {
            this.count++;
        },

        decrement() {
            this.count--;
        }
    }
}


위의 예에서 우리는 counter 속성과 재설정, 증가 및 감소의 3가지 작업을 포함하는 count 구성 요소를 생성했습니다. HTML 쪽에서는 다음과 같이 해당 기능을 구성 요소와 연결해야 합니다.

<div x-data="counter" class="box-counter">
        <span class="lbl-counter" 
            :class="{'lbl-counter-red': count < 0, 'lbl-counter-blue': count > 0}"
            x-text="count">0</span>
        <div class="">
            <button type="button" class="btn-counter" @click="increment"> Increment </button>
            <button type="button" class="btn-counter" @click="reset">Reset</button>
            <button type="button" class="btn-counter" @click="decrement"> Decrement </button>
        </div>
    </div>


보시다시피 div 태그에는 값이 x-data인 속성 counter이 있습니다. 따라서 Alpine은 HTML과 Javascript를 모두 연결하는 마법을 수행합니다.

이와 같은 구성 요소를 만드는 것은 매우 간단하고 확장 가능합니다. 그러나 이와 같은 구성 요소가 20~30개 있는 페이지를 상상해 봅시다. 페이지가 지저분하고 유지 관리하기가 매우 어려울 것입니다.

문제를 스크립트 구성과 로딩의 두 부분으로 나누어 보겠습니다.

스크립트 구성



응용 프로그램의 구조는 페이지를 기반으로 하며 각 페이지에는 해당 페이지에 필요한 모든 구성 요소를 내보내는 index.ts가 있습니다. 아래 이미지에서 POC 구조를 볼 수 있습니다.



이미지에 따르면 데모, 홈, 로그인 및 잠재 고객의 4개 페이지가 있습니다. 메뉴, navbar 등과 같이 페이지 간에 공유되는 모든 구성 요소를 포함하는 폴더shared를 만들었습니다. 데모 페이지를 살펴보겠습니다.

데모 페이지는 메뉴, 카운터, 할일의 3가지 구성 요소로 구성됩니다. 이 페이지의 index.ts 파일은 다음과 같습니다.

import menu from '../shared/menu'
import counter from './counter'
import todos from './todos'

export {
    menu,
    counter,
    todos
}


데모 HTML 페이지에는 해당 구성 요소를 참조하는 3개의 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>Demo</title>
    <link rel="stylesheet" href="assets/global.css" />
</head>

<body>
    <nav x-data="menu" class="nav-header">
      ...
    </nav>

    <div x-data="counter" class="box-counter">
      ...
    </div>

    <div x-data="todos" class="todoapp">
      ...
    </div>
</body>
</html>


이 전략을 사용하면 매우 쉽게 모듈 방식으로 매우 정교한 페이지를 구축할 수 있습니다. 하나의 문제가 해결되었으므로 두 번째 문제를 해결해야 합니다.

스크립트 로딩



스크립트 로딩은 상용구 코드를 줄이기 위해 매우 중요한 문제입니다. 우리는 그것을 해결하는 loader 함수를 만들었습니다. 로더 기능은 다음과 같습니다.

export async function loader(modules) {
    const { default: alpinejs } = await import('https://cdn.skypack.dev/alpinejs')
    let promises = modules.map((mod) => import(mod))
    return Promise.all(promises).then(values => {
        console.debug('Alpine', alpinejs.version)
        values.forEach(module => {
            Object.keys(module).forEach(attr => {
                let data = module[attr]();
                alpinejs.data(attr, () => data);
            })
        })
        alpinejs.start();
    })
}


Alpine의 런타임을 CDN에서 동적으로 로드하고 인수로 전달된 모든 모듈을 로드하여 Alpine에 구성 요소로 등록하는 순진한 예입니다.

이제 HTML 페이지에서 각 페이지 모듈을 로드하는 데 사용합니다.

<script defer type="module">
    import { loader } from './assets/loader.js'
    loader(['/dist/demo/index.js']).catch(err => console.error(err))
</script>


보시다시피 컴파일된 Javascript 파일을 /dist/demo/index.js 안에 넣습니다. 우리가 응용 프로그램을 결정한 표준이며 우리에게 잘 작동합니다. rollup를 사용하여 Typescript 코드를 트랜스파일하고 번들로 묶습니다.

요약하다



Alpine은 우리에게 훌륭한 플레이어이며 그 단순함은 우리가 생산성을 높이는 데 도움이 됩니다.

이 기사가 도움이 되기를 바라며 제안을 환영합니다!
NOSQL와 관계형데이터베이스 정리, pymongo(python)을 이용한 MONGODB Atlas 연결
Flutter Web(Canvas Kit)에서 일본어 및 그림 문자 그리기 문제 방지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage