Notice
Recent Posts
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
관리 메뉴

공부기록용

웹개발 종합반 2주차_02 본문

📚강의록📚/스파르타)웹 개발 종합

웹개발 종합반 2주차_02

과부하가즈아 2023. 6. 1. 16:24

JSON(서버→클라이언트)

서버에서 클라이언트로 데이터를 내려줄 때 딕셔너리 { } 형태로 내려주는 것으로 이해하기. (Key:Value로 이루어져 있고, 자료형 Dictionary와 아주 유사하다.)

 

RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있다.

 

API (Application Programming Interface)

정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘이다. 

 

API의 맥락에서 애플리케이션이라는 단어는 고유한 기능을 가진 모든 소프트웨어를 나타냅니다. 인터페이스는 두 애플리케이션 간의 서비스 계약이라고 할 수 있습니다. 이 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의합니다. API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있습니다.

 

https://movie.daum.net/moviedb/main?movieId=161806 

위 주소는 크게 두 부분으로 쪼개진다. 바로 "?"가 쪼개지는 지점으로, "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 이다.

 

GET 요청( 클라이언트→서버)

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.

  • GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
  • POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

 

GET 방식으로 데이터를 전달하는 방법

  • ? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
  • & : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

주소는 google.com의 search 창구에 다음 정보를 전달합니다!

  • q=아이폰 (검색어)
  • sourceid=chrome (브라우저 정보)
  • ie=UTF-8 (인코딩 정보)

 

Fetch

JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드, fetch는 서버와 비동기 요청방식중에 하나인데, 대표적인 비동기 요청방식중에 하나인 Ajax의 방식 중 하나이다. (데이터를 주는 url이 있다면 그 url에서 데이터를 가지고 온다.)

 

Fetch기본 골격

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
		console.log(data)
})

<!-- 코드 해설
fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
	.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
	.then(data => { 
		console.log(data) // 개발자 도구에 찍어보기
	}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다 -->

 

Fetch 코드 설명

  • fetch("여기에 URL을 입력") ← 이 URL로 웹 통신 요청을 보낼 거야!
    • ← 이 괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET!
  • .then() ← 통신 요청을 받은 다음 이렇게 할 거야!
  • res ⇒ res.json()
    • ← 통신 요청을 받은 데이터는 res 라는 이름을 붙일 거야(변경 가능)
    • ← res는 JSON 형태로 바꿔서 조작할 수 있게 할 거야!
  • .then(data ⇒ {}) ←JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙일거야
<!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>
        fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
            console.log(data)
        })
    </script>
</head>

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

</html>
<!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>
    	<!-- url에 API입력 -->
        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
            console.log(data)
        })
    </script>
</head>

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

</html>

<!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>
        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
            console.log(data['RealtimeCityAir']['row'][0])
        })
    </script>
</head>

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

</html>

<!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>
        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>

<script>
    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>

<script>
    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>

<!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>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']
                    console.log(gu_name, gu_mise)
                })
            })
        }
    </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>

<!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>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                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)
                })
            })
        }
    </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>

<script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('#names-q1').empty()
                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)
                })
            })
        }
</script>

<style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
        <!-- .은 클래스를 의미 즉, class가 bad인 리스트의 글 색을 red로 바꾼다 -->
        .bad{
            color: red;
        }
    </style>

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']

                    let temp_html = ``
                    if (gu_mise > 40) {
                    	// 만약에 gu_mise가 40이 넘는 요소들을 bad라는 클래스로 지정 
                        temp_html = `<li class = 'bad'>${gu_name} : ${gu_mise}</li>`
                    } else {
                    	// gu_mise가 40이 안 넘는 요소들을 클래스 지정X 
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }
                    $('#names-q1').append(temp_html)
                })
            })
        }
    </script>

<!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;
        }
    </style>

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
                let rows = data['getStationList']['row']
                rows.forEach((a) => {
                    let name = a['stationName']
                    let rack = a['rackTotCnt']
                    let bike = a['parkingBikeTotCnt']
                    console.log(name, rack, bike)
                })
            })
        }
    </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>

<!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;
        }
    </style>

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
                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>

<!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 {
            color: red;
        }
    </style>

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
                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>

2주차 숙제

지난 주차에 만들었던 스파르타피디아에 실시간 서울 날씨 API 를 적용

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            color: white;
            background-color: green;
            height: 250px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;
        }

        .mytitle>button {
            width: 250px;
            height: 50px;

            color: white;
            background-color: transparent;
            border: 1px solid white;
            border-radius: 50px;

            margin-top: 20px;
        }

        .mytitle>button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            width: 1200px;
            margin: 20px auto 20px auto;
        }

        .mypost {

            width: 500px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;

            box-shadow: 0px 0px 3px 0px gray;
        }

        .mybtn {

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }

        .mybtn>button {
            margin-right: 10px;
        }
    </style>

    <script>
        $(document).ready(function () {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                $("#temp").text(data['temp'])
            })
        })
    </script>

</head>

<body>
    <div class="mytitle">
        <h1>내 생에 최고의 영화들!</h1>
        <div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
        <button onclick="hey()">영화기록하기</button>
        <!--button을 클릭(onclik)하면 hey()라는 무언가를 불러라-->
    </div>

    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">영화 URL</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>--선택하기--</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating">
            <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
            <label for="floatingPassword">코멘트</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-dark">기록하기</button>
            <button type="button" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>

    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card">
                    <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 class="card">
                    <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 class="card">
                    <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 class="card">
                    <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>
    </div>

</body>

</html>

<script>
       $(document).ready(function () {
           fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
               $("#temp").text(data['temp'])
           })
       })
</script>

 $(document).ready(function () {
    <!-- 안에 내용을 넣으면 자동으로 실행됨 -->
 })
 
 <!-- 제이쿼리를 이용, id가 temp인 요소의 텍스트를 바꿔줄것이다
  data의 temp의 값으로 바꿔 줄것이다 -->
 $("#temp").text(data['temp'])

3주차에 복습한거

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            color: white;
            background-color: green;
            height: 250px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;
        }

        .mytitle>button {
            width: 250px;
            height: 50px;

            color: white;
            background-color: transparent;
            border: 1px solid white;
            border-radius: 50px;

            margin-top: 20px;
        }

        .mytitle>button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            width: 1200px;
            margin: 20px auto 20px auto;
        }

        .mypost {

            width: 500px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;

            box-shadow: 0px 0px 3px 0px gray;
        }

        .mybtn {

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }

        .mybtn>button {
            margin-right: 10px;
        }
    </style>

    <script>
        $(document).ready(function () {

            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                $("#temp").text(data['temp'])
            })
            // 이 부분으로 밑의 API를 데려온 것
            fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {
                let rows = data['movies']
                rows.forEach((a) => {
                    let title = a["title"]
                    let desc = a["desc"]
                    let comment = a["comment"]
                    let star = a["star"]
                    let image = a["image"]
                    console.log(title,desc,comment,star,image)

                })
                // forEach사용으로 API의 요소들을 차례로 돌아가면서 콘솔에 출력시킴 
            })

        })
    </script>

</head>

<body>
    <div class="mytitle">
        <h1>내 생에 최고의 영화들!</h1>
        <div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
        <button onclick="hey()">영화기록하기</button>
        <!--button을 클릭(onclik)하면 hey()라는 무언가를 불러라-->
    </div>

    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">영화 URL</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>--선택하기--</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating">
            <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
            <label for="floatingPassword">코멘트</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-dark">기록하기</button>
            <button type="button" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>

    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card">
                    <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 class="card">
                    <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 class="card">
                    <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 class="card">
                    <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>
    </div>

</body>

</html>

spartacodingclub.shop/web/api/movie 이 API를 출력하도록!

API로 가져온 정보들 페이지에 나타내기

<script>
        $(document).ready(function () {

            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                $("#temp").text(data['temp'])
            })

            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"]
                    
                    // API에 있는 star이 숫자로 되있는걸 구현]
                    // .releat(요소이름)
                    let star_image = '⭐'.repeat(star)
                   
                   
                    // ``안에 API에서 가져온 정보를 넣을 div데려옴
                    let temp_html = `<div class="col">
                                        <div class="card">
                                            <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)
                   // 계속 이어 붙도록
                })
            })

        })
    </script>
    <div class="mycards">
        <!-- mycards에 대해 정보를 불러오고 돌려서 넣는게 아니라
        카드안에 정보를 넣을 거니까 정보란을 묶고 있는 div에 
        id를 cards로 부여해서 temp_html, forEach해서 정보를 넣어주는 것 -->
        <div id='cards' class="row row-cols-1 row-cols-md-4 g-4">
            // 여기부터 div class "col"로 묶인게 카드 한 묶음에 대한 정보를 기입하는 곳
            <div class="col">
                <div class="card">
                    <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 class="card">
                    <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 class="card">
                    <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 class="card">
                    <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>
    </div>

이렇게 정보를 데려와서 div에 맞게 정보들이 들어간 걸 볼 수 있다.

'📚강의록📚 > 스파르타)웹 개발 종합' 카테고리의 다른 글

웹개발 종합반 4주차_01  (0) 2023.06.05
웹개발 종합반 3주차_02  (1) 2023.06.05
웹개발 종합반 3주차_01  (0) 2023.06.05
웹개발 종합반 2주차_01  (0) 2023.06.01
웹개발 종합반 1주차  (0) 2023.05.17
'📚강의록📚/스파르타)웹 개발 종합' Related Articles more
Comments