모듈로 튜토리얼이 돌아왔습니다!
안녕하세요 여러분! 여름방학을 마치고 Modulo 튜토리얼로 돌아왔습니다. 작업 중인 튜토리얼이 더 많이 있으므로 계속 지켜봐 주시기 바랍니다. 그렇긴 하지만, 다음 주제에 대한 특별한 아이디어가 있다면 댓글로 알려주시기 바랍니다!
저의 마지막 튜토리얼은 30줄 미만의 HTML 웹 구성 요소 코드로 API 기반 Pokémon Dance Party 구성 요소에 대한 매우 빠르고 재미있는 "HTML 전용, JS 없음" 튜토리얼이었습니다. 이전 튜토리얼 중 일부는 비공개 및 공개 상태 관리에 대한 고급 튜토리얼과 같이 좀 더 진지했습니다. 조금 무미건조하게 들린다면 운이 좋으신 겁니다. 오늘의 튜토리얼은 또 다른 재미있는 튜토리얼이자 또 다른 사랑받는 비디오 게임에 관한 것이기 때문입니다... Zelda: Breath of the Wild!
물론, 언제나 그렇듯이 이 튜토리얼에서 배운 기술은 모든 API에 적용 가능하므로 API 기반 갤러리에 대해 자세히 알아보려면 계속 읽어보세요!
Hyrule Compendium API를 사용하는 방법
이 튜토리얼은 Aarav Borthakur의 무료이고 MIT 라이센스를 받았으며 넉넉하게 호스팅된 Hyrule Compendium API 덕분에 100% 감사드립니다. Hyrule Compendium API는 재미있고 팬이 관리하는 데이터베이스이자 Zelda: Breath of the Wild 프랜차이즈 정보 및 검색용 API입니다. 메디아. 우리는 https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters
에서 제공되는 "Monsters" 엔드포인트를 사용할 것입니다.
스크린샷
지금 30초 안에 사용해 보세요: ??? 앞으로 건너뛰고 싶으신가요? 끝까지 스크롤하여 39줄의 HTML 코드를 로컬 HTML 파일에 복사한 다음 브라우저에서 엽니다. Modulo는 종속성이 없으며 로컬 HTML 파일에 포함되어 실행되므로 정말 쉽습니다!
데이터부터 시작하세요
StaticData와 이를 표시할 템플릿을 사용하여 단 6줄의 코드로 시작해 보겠습니다.
<Template>
<pre class="brush:php;toolbar:false">API DATA: {{ staticdata|json:2 }}
로그인 후 복사
이 스니펫에는 매우 간단한 한 줄의 이는 반환된 Hyrule Compendium API의 staticdata.data 속성을 덤프합니다. 더 읽기 쉬운 형식으로 표시하기 위해 |json:2 필터를 적용합니다. StaticData는 기본적으로 JSON(다른 형식 중에서)을 지원하므로 API에 URL을 제공하기만 하면 데이터 사용을 시작할 수 있습니다. StaticData가 혼란스럽나요? GitHub API 통합에 대한 이 튜토리얼을 시도하거나 Modulo.js 튜토리얼의 "StaticData" 섹션에 있는 대화형 예제를 사용해 보세요.
해당 스니펫을 실행해 보세요. 결과 데이터가 보이나요? for 루프를 사용하여 이를 반복해야 합니다.
이미지 갤러리 만들기
이제 .data 속성에 객체의 배열이 포함되어 있음을 볼 수 있으므로 이를 반복하여 갤러리를 생성해 보겠습니다.
<Template>
{% for monster in staticdata.data %}
<img src="{{ monster.image }}" style="width: 200px;" />
{% endfor %}
</Template>
로그인 후 복사
이렇게 하면 원본 JSON 배열에 있는 객체의 "이미지" 속성에 각각 src=가 할당된 많은 img 태그가 생성되고, {% for %} template-tag는 배열의 모든 항목에 대해 약간의 HTML을 복제하는 구문입니다(각 색인은 말할 것도 없고, 예를 들어 0부터 계산되는 숫자). 추가 연습을 위해 Modulo.js 튜토리얼 4부에서 for 루프에 대한 대화형 예제를 많이 제공합니다.
상태 및 스크립트 생성
다음으로 해야 할 가장 중요한 일은 간단한 한 줄 JavaScript 함수를 작성하는 데 사용할 수 있는 새 스크립트 태그를 만드는 것입니다.
<State
selected:=null
></State>
<Script>
function select(payload) {
state.selected = payload;
}
</Script>
로그인 후 복사
Modulo를 사용하는 동안 스크립팅을 위한 핵심 기술은 다음과 같습니다. JavaScript를 사용하여 상태를 수정할 수 있는 함수를 만듭니다. 이 경우에는 "이 몬스터를 나중을 위해 저장해 두세요"라는 매우 간단한 작업을 수행합니다. 보다 정확하게는 주어진 페이로드에 "selected" 상태 변수를 할당합니다. 이런 식으로 상태 변수 "selected"는 API에서 방금 선택한 몬스터에 대한 일종의 "stash"가 됩니다.
클릭 이벤트 연결
이제 또 다른 퍼즐 조각을 추가해 보겠습니다. 바로 클릭 이벤트를 연결하는 것입니다. 아래를 참조하세요:
<img @click:=script.select payload:="{{ monster|json }}" />
로그인 후 복사
이벤트 첨부 구문(@click:=, 이
을 사용하여 이 작업을 수행했습니다.
경우) 및 이 이미지를 클릭하여 우리가 선택하는 몬스터를 전달할 수 있는 페이로드 속성이 있습니다. 이벤트 및 스크립트 태그는 JavaScript를 처음 사용하는 경우(비록 그렇지 않더라도!) 혼란스러운 주제일 수 있으므로 스크립트 구성 요소 부분 사용 및 이벤트 연결에 대한 더 많은 예를 보려면 이 페이지의 예를 정독하세요.
클릭 이벤트 연결
마지막으로 몬스터 선택 시 조건부로 몬스터 정보를 렌더링해 보겠습니다.
{% if state.selected %}
<h1>{{ state.selected.name|capfirst }}</h1>
<p><img src="{{ state.selected.image }}" /></p>
<p>{{ state.selected.description }}</p>
{% else %}
<h1>Welcome to Hyrule Monster Guide!</h1>
<p><em>← Select a monster to learn more</em></p>
{% endif %}
로그인 후 복사
This will initially show the "Welcome" message (since state.selected begins as null). Then, as soon as someone clicks on a monster image, the state.selected variable will no longer be null, and
instead the contents will displayed formatted with h1 and p tags, with some tweaks applied (|capfirst makes the first letter capital).
- Embeddable snippet
Combining it all, we then wrap everything in a display: grid to make the side-by-side layout, and a overflow: auto to the left div the scrollbar. Finally, we can add a few final CSS tweaks to the second div (padding, margin, and a linear-gradient), and we get the following results that can be embedded anywhere:
<!DOCTYPE html>
<template Modulo>
<Component name="MonsterGuide">
<Template>
<main style="display: grid; grid-template-columns: 2fr 1fr">
<div style="overflow: auto; height: 95vh;">
{% for monster in staticdata.data %}
<img src="{{ monster.image }}"
@click:=script.select payload:="{{ monster|json }}"
style="width: 200px;" />
{% endfor %}
</div>
<div style="padding: 10px; margin: 10px; background: linear-gradient(to bottom, lightyellow, goldenrod);">
{% if state.selected %}
<h1>{{ state.selected.name|capfirst }}</h1>
<p><img src="{{ state.selected.image }}" /></p>
<p>{{ state.selected.description }}</p>
{% else %}
<h1>Welcome to Hyrule Monster Guide!</h1>
<p><em>← Select a monster to learn more</em></p>
{% endif %}
</div>
</main>
</Template>
<State
selected:=null
></State>
<StaticData
-src="https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters"
></StaticData>
<Script>
function select(payload) {
state.selected = payload;
}
</Script>
</Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-MonsterGuide></x-MonsterGuide>
로그인 후 복사
I hope you enjoyed this tutorial, if so, follow for more like this!
위 내용은
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
