모듈로 튜토리얼이 돌아왔습니다!

안녕하세요 여러분! 여름방학을 마치고 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

스크린샷

지금 30초 안에 사용해 보세요: ??? 앞으로 건너뛰고 싶으신가요? 끝까지 스크롤하여 39줄의 HTML 코드를 로컬 HTML 파일에 복사한 다음 브라우저에서 엽니다. Modulo는 종속성이 없으며 로컬 HTML 파일에 포함되어 실행되기 때문에 정말 쉽습니다!

데이터부터 시작하세요

StaticData와 이를 표시할 템플릿을 사용하여 단 6줄의 코드로 시작하겠습니다.

이 코드 조각에는 반환된 Hyrule Compendium API의 staticdata.data 속성을 덤프하는 매우 간단한 한 줄

해당 코드 조각을 실행해 보세요. 결과 데이터가 보이나요? for 루프를 사용하여 이를 반복해야 합니다.

이미지 갤러리 만들기

이제 .data 속성에 객체의 배열이 포함되어 있음을 확인할 수 있으므로 이를 반복하여 갤러리를 생성해 보겠습니다.

이렇게 하면 원본 JSON 배열에 있는 객체의 "이미지" 속성에 각각 src=가 할당된 많은 img 태그가 생성되고, {% for %} template-tag는 배열의 모든 항목에 대해 약간의 HTML을 복제하는 구문입니다(각 색인은 말할 것도 없고, 예를 들어 0부터 계산되는 숫자). 추가 연습을 위해 Modulo.js 튜토리얼의 4부에서 for 루프에 대한 대화형 예제가 많이 있습니다.

상태 및 스크립트 생성

다음으로 해야 할 가장 중요한 일은 간단한 한 줄 JavaScript 함수를 작성하는 데 사용할 수 있는 새 스크립트 태그를 만드는 것입니다.

Modulo를 사용하는 동안 스크립팅을 위한 핵심 기술입니다. JavaScript를 사용하여 상태를 수정할 수 있는 함수를 만듭니다. 이 경우에는 "이 몬스터를 나중을 위해 저장해 두세요"라는 매우 간단한 작업을 수행합니다. 보다 정확하게는 주어진 페이로드에 "selected" 상태 변수를 할당합니다. 이런 식으로 상태 변수 "selected"는 API에서 방금 선택한 몬스터에 대한 일종의 "stash"가 됩니다.

클릭 이벤트 연결

이제 또 다른 퍼즐 조각을 추가해 보겠습니다. 바로 클릭 이벤트를 연결하는 것입니다. 아래를 참조하세요:

이 작업은 이벤트 첨부 구문(@click:=, 이
경우) 및 이 이미지를 클릭하여 우리가 선택하는 몬스터를 전달할 수 있는 페이로드 속성이 있습니다. 이벤트 및 스크립트 태그는 JavaScript를 처음 사용하는 경우(비록 그렇지 않더라도!) 혼란스러운 주제가 될 수 있으므로 스크립트 구성 요소 부분 사용 및 이벤트 연결에 대한 더 많은 예를 보려면 이 페이지의 예를 정독하십시오.

클릭 이벤트 연결

마지막으로 몬스터가 선택되면 조건부로 몬스터 정보를 렌더링해 보겠습니다.

{% if state.selected %}
    
{{ state.selected.name|capfirst }}
    

    
{{ state.selected.description }}
{% else %}
    
Welcome to Hyrule Monster Guide!
    
← Select a monster to learn more
{% endif %}

처음에는 "환영합니다" 메시지가 표시됩니다(state.selected가 null로 시작하므로). 그런 다음 누군가 괴물 이미지를 클릭하자마자 state.selected 변수는 더 이상 null이 아니며
대신 내용은 h1 및 p 태그 형식으로 표시되며 일부 조정이 적용됩니다(|capfirst는 첫 글자를 대문자로 만듭니다).

- 삽입 가능한 스니펫

모두 결합한 다음 모든 것을 디스플레이: 그리드로 래핑하여 나란히 레이아웃을 만들고 오버플로: 자동을 왼쪽 div 스크롤 막대로 만듭니다. 마지막으로 두 번째 div(패딩, 여백 및 선형 그라데이션)에 몇 가지 최종 CSS 조정을 추가할 수 있으며 어디든 삽입할 수 있는 다음과 같은 결과를 얻을 수 있습니다.

이 튜토리얼이 즐거웠기를 바랍니다. 그렇다면 이와 유사한 내용을 더 보려면 팔로우하세요!