API를 호출하는 페이지

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

사이트 내부에 API를 호출하는 코드가 있습니다. 바로 홈 페이지의 JavaScript입니다. 페이지가 한 번 로드되면 스크립트가 API에 데이터를 요청하고, 페이지를 새로고침하지 않고 페이지를 채웁니다. 스크립트 tasks/static/tasks/app.js는 제공되어 있습니다. 여러분이 할 일은 스크립트에 필요한 페이지를 만드는 것입니다.

fetch("/api/tasks/")는 방문자의 브라우저에서 GET 요청을 보내고, response.json()은 응답을 읽습니다. document.getElementById("task-list")는 id가 task-list인 요소를 찾으므로 페이지에 해당 요소가 있어야 합니다. 브라우저가 스크립트 태그를 읽는 즉시 스크립트가 실행되므로, 태그는 스크립트가 사용하는 요소들 뒤, body의 끝에 배치합니다. 스타일시트를 불러오는 것과 같은 방식으로 불러오세요:

{% load static %}
<link rel="stylesheet" href="{% static 'shop/style.css' %}">

검사 과정에서는 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>