API를 호출하는 페이지

Coddy Django 여정의 JSON API 섹션에 포함된 레슨. 19개 중 12번째.

자신의 사이트도 홈 페이지의 JavaScript에서 API를 호출할 수 있습니다. 페이지가 한 번 로드되면 스크립트가 API에 데이터를 요청하고 페이지를 새로고침하지 않고 내용을 채웁니다. 시작용 프로젝트의 홈 페이지는 더 이상 목록을 직접 그리지 않습니다. 스크립트가 그릴 것입니다. 스크립트인 tasks/static/tasks/app.js는 제공되어 있습니다. 여러분이 만들어야 할 부분은 스크립트에 필요한 페이지입니다.

fetch("/api/tasks/")는 방문자의 브라우저에서 GET 요청을 보내고, response.json()은 응답을 읽습니다. document.getElementById("task-list")는 id가 task-list인 요소를 찾으므로, 페이지에 해당 요소가 있어야 합니다. 브라우저가 스크립트 태그를 읽자마자 스크립트가 실행되므로, 스크립트 태그는 스크립트가 사용하는 요소들 뒤, body의 끝에 둡니다. {% static %}을 통해 불러옵니다:

{% load static %}
<script src="{% static 'shop/cart.js' %}"></script>

검사에서는 JavaScript를 실행할 수 없으므로 페이지와 JSON을 검사합니다. 미리 보기에서는 스크립트를 실제로 실행합니다.

챌린지

중급

tasks/static/tasks/app.js를 읽은 다음, tasks/templates/tasks/home.html에 스크립트가 내용을 채울 목록을 추가하고, 스크립트가 찾는 id를 지정하세요. 목록이 스크립트 실행 시 이미 존재하도록 {% static %}을 통해 tasks/app.js를 불러오세요.

‘실행’을 누르면 홈 페이지에 우유 사기, 보고서 작성, 은행에 전화하기가 표시됩니다.

직접 해보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task tracker</title>
</head>
<body>
    <h1>Task tracker</h1>
</body>
</html>