이번에는 Alpine JS를 사용하여 API에서 데이터를 가져오는 방법을 배워보겠습니다. 우리는 다음 API에서 가져온 영국 프리미어 리그에서 뛰는 축구 클럽 목록을 표시하는 웹 사이트를 만들 것입니다.

Alpine JS는 React나 Vue와 같은 프레임워크를 사용하지 않고도 대화형 웹사이트를 만드는 데 사용할 수 있는 경량 Javascript 프레임워크입니다. Alpine JS를 사용하면 별도로 작성할 필요 없이 Javascript 속성을 HTML 파일에 직접 쉽게 적용할 수 있습니다.

index.html라는 이름의 HTML 파일을 생성한 후 다음 코드를 붙여넣으세요.

다음으로 Tailwind CSS를 사용하여 카드 구성요소를 만들어 보겠습니다.

그런 다음 데이터를 가져와서 카드 구성 요소에 표시합니다.

행복하다! Alpine JS를 사용하여 API를 성공적으로 가져와 사용자에게 표시했습니다. 결과는 다음과 같습니다.

다음은 생성된 코드에 대한 설명입니다.

x-data 함수는 HTML 태그에서 직접 실행되는 Javascript 데이터 로직을 수용하는 기능입니다. 이 코드에서는 데이터 유형 배열이 있는 팀이라는 변수를 만듭니다. 이 변수는 함수에서 결과를 가져오는 데 필요한 데이터를 보관하는 것을 목표로 합니다.

x-init는 구성 요소가 로드되기 전에 초기화를 수행하는 것을 목표로 합니다. 이 코드에서는 이전에 준비한 API 엔드포인트에서 데이터를 검색하는 것을 목표로 하는 가져오기 함수를 삽입합니다. 그런 다음 브라우저 페이지가 표시되기 전에 Alpine JS는 뒤에서 가져오기 프로세스를 수행한 다음 가져오기 결과를 처음에 선언된 팀 변수로 수집합니다.

x-for는 팀 변수의 반복 프로세스를 수행한 다음 이를 팀 변수에 다시 넣는 데 사용됩니다.

x-bind는 이미지를 표시하고 x-text는 데이터를 HTML 디스플레이에 직접 인쇄합니다.