IT

js, fetch(url), JSON 데이터 fetch

최무회 2022. 6. 15. 03:12
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--TODO: tui-grid -->

    <link rel="stylesheet" href="https://uicdn.toast.com/grid/latest/tui-grid.css" />
    <script src="https://uicdn.toast.com/grid/latest/tui-grid.js"></script>
    <!-- 특정 버전 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tui-code-snippet/2.3.0/tui-code-snippet.min.js">

    <!-- FIXME: 내부파일경로 -->
    <script defer src="./index.js"></script>

    <script>
        // 1 번째 방식 : fetch(url)
        // var url = "https://jsonplaceholder.typicode.com/todos/20";
        // fetch(url)
        //     .then(response => response.json()) // response.json()은 응답 데이터를 JSON 개체로 변환하는 작업
        //     .then(json => console.log(json))

        // 2 번째 방식 : fetch(url), return 값 체크 가능 
        const URL = 'https://jsonplaceholder.typicode.com/todos'
        const A = async () => {
            const response = await fetch(URL);
            const data = await response.json()
            return data;
        }

        console.log(A())

        // (async () => {
        //     console.log(A())
        // })()
    </script>
</head>

<body>
    <div id="grid"></div>
</body>

</html>