Essepage에서 AlpineJS의 x-data를 파일로 관리하는 방법

Essepage에서 홈페이지를 제작할 때, 저는 주로 AlpineJS를 활용합니다. 하지만 x-data 안에 변수와 함수가 쌓이다 보면 코드가 복잡해지고 관리도 힘들어지죠. 😓 그래서 Essepage의 @x-data 기능을 사용해 파일을 따로 분리하는 방법을 좋아합니다.
이렇게 하면 코드가 훨씬 깔끔해지고 유지보수도 쉬워집니다!

AlpineJS x-data 기본 코드 📦

분리된 파일을 만들 때, 자주 사용하는 기본 코드입니다.

() => ({
    async init() {
        await $nextTick();
        console.log('Alpine Init');
    }
})

참고로, $nextTick은 DOM 렌더링을 기다린 뒤 동작을 시작할 때 사용합니다.

@x-data로 파일 삽입하기 📂

Essepage에서는 파일로 만든 x-data 코드를 아래처럼 @x-data를 이용해 쉽게 불러올 수 있습니다.

<div x-data="{{@x-data: 파일경로 :@}}">
    <!-- 여기에 콘텐츠 추가 -->
</div>

팁: 파일 경로는 정확히 입력해야 동작하니 주의하세요! ⚠️

파일로 만들 때, *.alpine.js로 만드세요 📝

AlpineJS 파일을 만들 때는 꼭 *.alpine.js 확장자로 만들어보세요 (예: file.alpine.js).
이렇게 하면 다음과 같은 장점이 있습니다.

✅ 파일 트리에서 한눈에 AlpineJS 파일을 확인 가능
→ 파일 앞에 AlpineJS 전용 아이콘이 표시되어 가독성이 좋아집니다.

✅ 코드 하이라이트 지원
→ AlpineJS에 최적화된 코드 하이라이트가 적용되어 가독성이 향상됩니다.

✅ 긴 코드도 파일로 정리하여 깔끔하게 관리
→ x-data 안에 여러 함수와 변수를 넣을 경우, 파일로 분리하면 코드가 훨씬 깔끔해집니다.

✅ "(쌍따옴표) 사용 이슈 해결
→ 일반적으로 x-data="..." 안에서는 "(쌍따옴표) 사용이 제한되지만, *.alpine.js 파일에서는 자유롭게 사용할 수 있습니다.

Essepage 기본 템플릿(어드밴스)에서 직접 사용해보기 🖥️

Essepage에서 제공하는 어드밴스 또는 어드밴스 Uno 템플릿을 사용하면 @x-data의 적용 방법을 바로 확인할 수 있습니다.

🌟 어드밴스 템플릿 사용 방법

1️⃣ Essepage에 로그인
2️⃣ 오른쪽 상단 Essepage 만들기 버튼 클릭
3️⃣ 기본 템플릿에서 어드밴스 선택

4️⃣ Essepage ID 입력 (영문과 하이픈만 가능)
5️⃣ Essepage 타이틀 입력
6️⃣ Essepage 만들기 버튼 클릭

@x-data 사용법이나 Essepage 템플릿에 대해 더 알고 싶다면, 댓글로 남겨주세요.