Fetch 사용법

박영준·2023년 5월 24일

Javascript

목록 보기

11/11

1. 기본 문법

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Fetch 시작하기</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>        <!-- jQuery 를 사용하기 위해서는 이 부분이 들어가 있어야 함 -->
    <script>
        /* fetch : 이 3줄은 하나로 묶여서 다님 */
        fetch("여기에 URL 넣기").then(res => res.json()).then(data => {           /* 해석 : 해당 URL 에서 result 를 가져와서 fetch 를 하는데, 이것을 json 형태로 변환하고, 이것을 활용할 것이다.  */
            console.log(data)
        })
    </script>
</head>

<body>
    Fetch 연습을 위한 페이지
</body>

</html>

2. 예시

예시 1 : 특정 인덱스만 출력

해당 데이터를 보고 fetch 코드에 입력한다.

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Fetch 시작하기</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>   
    <script>
        /* 이 3줄은 하나로 묶여서 다님 */
        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {           /* 해석 : 해당 URL 에서 result 를 가져와서 fetch 를 하는데, 이것을 json 형태로 변환하고, 이것을 활용할 것이다.  */
            console.log(data['RealtimeCityAir']['row'][0])		/* RealtimeCityAir에 row에 0번째 */
        })
    </script>
</head>

<body>
    Fetch 연습을 위한 페이지
</body>

</html>

console 에는 내가 입력한 부분 console.log(data['RealtimeCityAir']['row'][0]) 만 나타난다.

예시 2 : 전체 인덱스 출력

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Fetch 시작하기</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <script>
        /* 이 3줄은 하나로 묶여서 다님 */
        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
            let rows = data['RealtimeCityAir']['row']
            rows.forEach((a) => {
                console.log(a)
            });
        })
    </script>
</head>

<body>
    Fetch 연습을 위한 페이지
</body>

</html>

반복문을 이용

예시 3 : 특정 key : value 출력

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Fetch 시작하기</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>       
    <script>
        /* 이 3줄은 하나로 묶여서 다님 */
        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {           
            let rows = data['RealtimeCityAir']['row']
            rows.forEach((a) => {
                console.log(a['MSRSTE_NM'])
            });
        })
    </script>
</head>

<body>
    Fetch 연습을 위한 페이지
</body>

</html>

예시 4 : 두 개의 key : value 출력

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Fetch 시작하기</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>       
    <script>
        /* 이 3줄은 하나로 묶여서 다님 */
        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
            let rows = data['RealtimeCityAir']['row']
            rows.forEach((a) => {
                console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
            });
        })
    </script>
</head>

<body>
    Fetch 연습을 위한 페이지
</body>

</html>

예시 5 - 1 : fetch + append(), empty(), 백틱 안에 `${변수명}` 로 데이터 자동 업데이트

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>미세먼지 API로Fetch 연습하고 가기!</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

    <script>
        /* q1() 함수를 불러옴 (즉, button 을 눌렀을 때 나타날 반응)*/
        function q1() {     
            /* fetch 로 해당 URL 에서 데이터 가져옴 */
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']       /* 변수 rows 에 원하는 데이터 담는다 */
                $('#names-q1').empty()          /* id="names-q1 불러옴 */
                rows.forEach((a) => {                   /* 반복문 */
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']

                    let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    $('#names-q1').append(temp_html)          /* id="names-q1 불러옴 */
                })
            })
        }
    </script>

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>            <!-- q1() 함수 -->
        <ul id="names-q1">                  <!-- id="names-q1 이름표 -->
            <li>중구 : 82</li>
            <li>종로구 : 87</li>
            <li>용산구 : 84</li>
            <li>은평구 : 82</li>
        </ul>
    </div>
</body>

</html>

참고: jQuery 사용법 - 7. append(), empty(), 백틱 안에 ${변수명}

예시 5 - 2 : fetch + append(), empty(), 백틱 안에 `${변수명}` 로 데이터 자동 업데이트

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Fetch 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        ...
    </style>

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then((response) => response.json()).then((data) => {
                $('#names-q1').empty()
                let rows = data['getStationList']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let name = a['stationName']
                    let rack = a['rackTotCnt']
                    let bike = a['parkingBikeTotCnt']

                    let temp_html = `<tr>
                                        <td>${name}</td>
                                        <td>${rack}</td>
                                        <td>${bike}</td>
                                    </tr>`
                    $('#names-q1').append(temp_html)                
                });
            })
        }
    </script>

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
        <p>모든 위치의 따릉이 현황을 보여주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <table>
            <thead>
                <tr>
                    <td>거치대 위치</td>
                    <td>거치대 수</td>
                    <td>현재 거치된 따릉이 수</td>
                </tr>
            </thead>
            <tbody id="names-q1">
                <tr>
                    <td>102. 망원역 1번출구 앞</td>
                    <td>22</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>103. 망원역 2번출구 앞</td>
                    <td>16</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>104. 합정역 1번출구 앞</td>
                    <td>16</td>
                    <td>0</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

예시 5-1는 다른 부분? (이 부분을 제외하고는 동일한 문제)
- 변수 3개 사용
- 가로로 한 줄이 아닌, 문단째로 사용하기도 한다

예시 6 - 1 : fetch + if조건문으로 특정 데이터만 색깔 다르게

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>미세먼지 API로Fetch 연습하고 가기!</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style>
        div.question-box {
            margin: 10px 0 20px 0;
        }

        .bad {              /* if 조건문을 충족할 시 적용될 CSS */
            color: red;
        }
    </style>

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then((response) => response.json()).then((data) => {
                $('#names-q1').empty()
                let rows = data['RealtimeCityAir']['row']
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']
                    
                    /* 조건을 충족하는 특정 데이터에만 적용 */
                    let temp_html = ``          /* if 조건문으로 특정 데이터에 효과를 주려면, 백틱 안에는 비워둬야 함 */
                    if (gu_mise > 40) {
                        temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`      /* CSS 를 위해 bad 클래스명을 붙임 */
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }
                    $('#names-q1').append(temp_html)
                });
            })
        }
    </script>

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
            <li>중구 : 82</li>
            <li>종로구 : 87</li>
            <li>용산구 : 84</li>
            <li>은평구 : 82</li>
        </ul>
    </div>
</body>

</html>

예시 6 - 2 : fetch + if조건문으로 특정 데이터만 색깔 다르게

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Fetch 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 10px;
            border: 1px solid;
        }

        .red {				/* if 조건문을 충족할 시 적용될 CSS */
            color: red;
        }
    </style>

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then((response) => response.json()).then((data) => {
                $('#names-q1').empty()
                let rows = data['getStationList']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let name = a['stationName']
                    let rack = a['rackTotCnt']
                    let bike = a['parkingBikeTotCnt']

                    let temp_html = ``

                    if (bike < 5) {
                        temp_html = `<tr class ="red">
                                        <td>${name}</td>
                                        <td>${rack}</td>
                                        <td>${bike}</td>
                                    </tr>`
                    } else {
                        temp_html = `<tr>
                                        <td>${name}</td>
                                        <td>${rack}</td>
                                        <td>${bike}</td>
                                    </tr>`
                    }
                    $('#names-q1').append(temp_html)                
                });
            })
        }
    </script>

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
        <p>모든 위치의 따릉이 현황을 보여주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <table>
            <thead>
                <tr>
                    <td>거치대 위치</td>
                    <td>거치대 수</td>
                    <td>현재 거치된 따릉이 수</td>
                </tr>
            </thead>
            <tbody id="names-q1">
                <tr>
                    <td>102. 망원역 1번출구 앞</td>
                    <td>22</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>103. 망원역 2번출구 앞</td>
                    <td>16</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>104. 합정역 1번출구 앞</td>
                    <td>16</td>
                    <td>0</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

예시 6-1는 다른 부분? (이 부분을 제외하고는 동일한 문제)
- 변수 3개 사용
- 가로로 한 줄이 아닌, 문단째로 사용하기도 한다

예시 7 : fetch + $(document).ready() 함수, text()

	<style>
	...
    </style>
    <script>
        $(document).ready(function() {
        	fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
            	let num = data['temp']		/* fetch로 연결된 URL에서 temp 라는 key 값 불러와서, 변수 num 에 담기 */
            	$('#temp').text(num)		/* id="temp" 불러와서, 변수 num 에 담겨있는 값을 적용시킨다 */
        	})
    	})
    </script>
</head>

<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <div>현재 서울의 날씨 : <span id="temp">20</span>도</div>		<!-- id="temp" 이름표 -->
        <button onclick="hey()">영화 기록하기</button>    
    </div>
	...
</body>

</html>

$(document).ready(function() { ... })
- 기존의 사용 : function q1() { ... }
  - q1() 함수가 실행되어야 작성해둔 코드가 실행되어 변경된 내용이 적용됐다.
- 변경된 내용 : 해당 웹페이지에 접속하기만 해도, 바로 해당 코드가 바로 실행된다.
append() : 내용 추가

text() : 해당 내용에 대해서만 적용

예시 8 : fetch + repeat(), 이미지

<!DOCTYPE html>
<html lang="en">

<head>
    ...

    <style>
        ...
    </style>
    
    <script>
        $(document).ready(function() {
            /* 현재 서울의 날씨 */
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                let num = data['temp']		
                $('#temp').text(num)		
            })

            /* 영화 포스터 카드 */
            fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {
                let rows = data['movies']
                $('#cards').empty()
                rows.forEach((a) => {
                    let title = a['title']
                    let desc = a['desc']
                    let comment = a['comment']
                    let star = a['star']
                    let image = a['image']

                    let star_image = `⭐`.repeat(star)      /* 별표 이미지 : 숫자로 표기된 star 변수에서 값을 받아서, 그 수 만큼 repeat() 해서 별표 이미지를 반복 */

                    /* image : 이미지도 동일한 방식으로 사용된다. 주의! "" 큰 따옴표 표시 */
                    let temp_html = `<div class="col">
                                        <div class="card h-100">
                                            <img src="${image}" class="card-img-top" alt="..." />       
                                            <div class="card-body">
                                                <h5 class="card-title">${title}</h5>
                                                <p class="card-text">${desc}</p>
                                                <p>${star_image}</p>
                                                <p class="mycomment">${comment}</p>
                                            </div>
                                        </div>
                                    </div>`
                    $('#cards').append(temp_html)           /* id="cards" 불러오기 */   
                })
            })
        })
    </script>
</head>

<body>
    <div class="mytitle">
        ...
    </div>

    <!-- 포스팅 박스 -->
    <div class="mypost">
        ...
    </div>

    <!-- 영화 포스터 카드 -->
    <div class="mycards">     
        <div id="cards" class="row row-cols-1 row-cols-md-4 g-4">           <!-- id="cards" 이름표 붙이기 -->
            <div class="col">
                <div class="card h-100">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="..." />
                    <div class="card-body">
                        <h5 class="card-title">영화 제목이 들어갑니다</h5>
                        <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">나의 의견을 쓰면 되겠죠</p>
                    </div>
                </div>
            </div>
            <div class="col">
                ...
            </div>
            <div class="col">
                ...
            </div>
            <div class="col">
                ...
            </div>
        </div>
    </div>
</body>

</html>

박영준

개발자로 거듭나기!

이전 포스트

Fetch 사용법

Javascript

1. 기본 문법

2. 예시

예시 1 : 특정 인덱스만 출력

예시 2 : 전체 인덱스 출력

예시 3 : 특정 key : value 출력

예시 4 : 두 개의 key : value 출력

예시 5 - 1 : fetch + append(), empty(), 백틱 안에 `<p>${변수명}</p>` 로 데이터 자동 업데이트

예시 5 - 2 : fetch + append(), empty(), 백틱 안에 `<p>${변수명}</p>` 로 데이터 자동 업데이트

예시 6 - 1 : fetch + if조건문으로 특정 데이터만 색깔 다르게

예시 6 - 2 : fetch + if조건문으로 특정 데이터만 색깔 다르게

예시 7 : fetch + $(document).ready() 함수, text()

예시 8 : fetch + repeat(), 이미지

jQuery 사용법

0개의 댓글

Fetch 사용법

Javascript

1. 기본 문법

2. 예시

예시 1 : 특정 인덱스만 출력

예시 2 : 전체 인덱스 출력

예시 3 : 특정 key : value 출력

예시 4 : 두 개의 key : value 출력

예시 5 - 1 : fetch + append(), empty(), 백틱 안에 <p>${변수명}</p> 로 데이터 자동 업데이트

예시 5 - 2 : fetch + append(), empty(), 백틱 안에 <p>${변수명}</p> 로 데이터 자동 업데이트

예시 6 - 1 : fetch + if조건문으로 특정 데이터만 색깔 다르게

예시 6 - 2 : fetch + if조건문으로 특정 데이터만 색깔 다르게

예시 7 : fetch + $(document).ready() 함수, text()

예시 8 : fetch + repeat(), 이미지

jQuery 사용법

0개의 댓글

예시 5 - 1 : fetch + append(), empty(), 백틱 안에 `<p>${변수명}</p>` 로 데이터 자동 업데이트

예시 5 - 2 : fetch + append(), empty(), 백틱 안에 `<p>${변수명}</p>` 로 데이터 자동 업데이트