본문 바로가기
부트캠프 개발일지 2023-2024/Pre-course 사전학습

[Pre-course] 웹개발 기초 : Client-Server, Fetch

by whereanna00 2023. 10. 2.

Client-Server

1. [서버→클라이언트]: JSON 형식

 

API : 서버(은행)의 은행  창구와 같은 역할. 통상적으로 허락된 곳만 접근이 가능하다.

예시) 서울시 미세먼지 OpenAPI

JSONView: 이러한 데이터를 좀 더 간단하게 볼 수 있게 하는 확장프로그램

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko 

 

JSONVue

Validate and view JSON documents

chrome.google.com

 

JSON은 Key:Value로 이루어져 있다. 자료형 Dictionary와 유사함.

아래 예제를 보면 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가 있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가 있다.

 

 

2. [클라이언트→서버]: GET 요청 이해하기

 

API는 은행 창구와 같은 것. 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재함.

 

* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회

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

 

GET

더보기

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

위 주소는 크게 두 부분으로 쪼개진다.

 

"?" 기준으로 앞 부분이 <서버 주소>

net 뒤에서 ~ ? 까지(창구)

"?" 뒷 부분이 [영화 번호] 입니다.

 

* 서버 주소: https://movie.daum.net/moviedb/main?movieId=68593 * 영화 정보: movieId=68593

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

 

? : 여기서부터 전달할 데이터가 작성된다는 의미

& : 전달할 데이터가 더 있다는 뜻

 

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

 

위 주소는 google.com의 search 창구에 다음 정보를 전달함.

q=아이폰 (검색어)

sourceid=chrome (브라우저 정보)

ie=UTF-8 (인코딩 정보)

 

더보기

여기서 잠깐! 그럼 code라는 이름으로 영화 번호를 주자는 것은 누가 정하는 것일까?

 

→ 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속.

프론트엔드: "code라는 이름으로 영화 번호를 주면 될까요?" 백엔드: "네 그렇게 하시죠. 그럼 code로 영화 번호가 들어온다고 생각하고 코딩하고 있을게요"

 

 

 

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>
        function hey() {
            // url 의 OpenAPI의 데이터가 data라는 변수에 저장됨
            let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
            fetch(url).then(res => res.json()).then(data => {
		        console.log(data['RealtimeCityAir']['row'][0])
            })
        }
    </script>
</head>

<body>
    <button onclick="hey()">fetch 연습!</button>
</body>

 

반복문을 돌면서 원하는 정보만 골라와서 찍기

<!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>
        function hey() {
            // url 의 OpenAPI의 데이터가 data라는 변수에 저장됨
            let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
            fetch(url).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_NM'];
                console.log(gu_name, gu_mise);
              });
            })
        }
    </script>
</head>

<body>
    <button onclick="hey()">fetch 연습!</button>
</body>

</html>

 

업데이트 버튼을 누르면, 이미 있었던 데이터<li>를 한번 지워주고, 새 데이터를 정렬하기

<!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() {
          let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
          $('#names-q1').empty();
          fetch(url).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_NM'];
                
                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>

 

 

조건문을 이용한 fetch

- 특정 숫자 이상인 데이터는 빨간색으로

--> gu_mise 값이 40 이상일때만 빨간색으로

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

        .bad {
          color: red;
        }
    </style>

    <script>
        function q1() {
          let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
          $('#names-q1').empty();
          fetch(url).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 = ``;
                if(gu_mise > 40) {
                  temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`;
                } 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">
        </ul>
    </div>
</body>

</html>

 

 

미세먼지 데이터를 무언가가 클릭되었을 때 Fetch 되는 것이 아닌 페이지가 준비가 다 되었을 때 자동으로 fetch에 콜해서 불러오기

영화앨범 예시)

    //페이지가 준비가 다 되었을 때 자동으로 fetch에 콜해서 데이터 불러오기
    $(document).ready(function () {
      let url = "http://spartacodingclub.shop/sparta_api/seoulair";
      fetch(url).then(res => res.json()).then(data => {
        let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
        $('#msg').text(mise);
})
    })
    
    
    <body>
  <div class="mytitle">
    <h1>나만의 추억앨범</h1>
    <p>현재 서울의 미세먼지 : <span id="msg">좋음</span></p>
    <button onclick="
    openClose()">추억 저장하기</button>

전체 코드

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>나만의 추억앨범</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');

    * {
      font-family: 'Black Han Sans', sans-serif;
    }

    .mytitle {
      height: 250px;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
      background-position: center;
      background-size: cover;
    }

    .mytitle > button {
      width: 150px;
      height: 50px;
      background-color: transparent;
      color: white;
      border: 1px solid white;
      border-radius: 5px;
      margin-top: 20px;
    }

    .mycards {
      width: 1200px;
      margin: 30px auto 0px auto;
    }

    .mypostingbox {
      width: 500px;
      margin: 30px auto 0px auto;
      padding: 20px;
      box-shadow: 0px 0px 3px 0px blue;
      border-radius: 5px;
    }

    .mybtn {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

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

  <script>
    //페이지가 준비가 다 되었을 때 자동으로 fetch에 콜해서 데이터 불러오기
    $(document).ready(function () {
      let url = "http://spartacodingclub.shop/sparta_api/seoulair";
      fetch(url).then(res => res.json()).then(data => {
        let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
        $('#msg').text(mise);
})
    })

    function openClose(){
      $('#postingBox').toggle();
    }

    function makeCard(){
      // 값을 가져오기
      let image = $('#image').val();
      let title = $('#title').val();
      let content = $('#content').val();
      let date = $('#date').val();

      //카드 생성 후 붙이기 
      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">${content}</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">${date}</small>
          </div>
        </div>
      </div>`;
      $('#card').append(temp_html);
    }
  </script>
</head>
<body>
  <div class="mytitle">
    <h1>나만의 추억앨범</h1>
    <p>현재 서울의 미세먼지 : <span id="msg">좋음</span></p>
    <button onclick="
    openClose()">추억 저장하기</button>
  </div>
  <div class="mypostingbox" id="postingBox">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="image" placeholder="앨범 이미지">
      <label for="floatingInput">앨범 이미지</label>
    </div>
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="title" placeholder="앨범 제목">
      <label for="floatingInput">앨범 제목</label>
    </div>
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="content" placeholder="앨범 내용">
      <label for="floatingInput">앨범 내용</label>
    </div>
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="date" placeholder="앨범 날짜">
      <label for="floatingInput">앨범 날짜</label>
    </div>
    <div class="mybtn">
      <button type="button" class="btn btn-primary" onclick="
        makeCard()">기록하기</button>
      <button type="button" class="btn btn-outline-primary">닫기</button>
  </div>
  </div>
  <div class="mycards">
    <div id="card" class="row row-cols-1 row-cols-md-4 g-4">
      <div class="col">
        <div class="card h-100">
          <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">앨범 제목</h5>
            <p class="card-text">앨범 내용</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">앨범 날짜</small>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">앨범 제목</h5>
            <p class="card-text">앨범 내용</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">앨범 날짜</small>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">앨범 제목</h5>
            <p class="card-text">앨범 내용</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">앨범 날짜</small>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">앨범 제목</h5>
            <p class="card-text">앨범 내용</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">앨범 날짜</small>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

 

스파르타플릭스 예시)

  <script>
        $(document).ready(function () {
          let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
          fetch(url).then(res => res.json()).then(data => {
            let temp = data['temp'];
            $('#temperature').text(temp);
          })
        })
        
        
        
        
        
        ....
        
        
<li><a href="#" class="nav-link px-2 text-white">현재 기온: <span id="temperature">20.00</span>도</a></li>

 

전체코드

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>스파르타플릭스</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');

    * {
      font-family: 'Black Han Sans', sans-serif;
    }

    .main {
      color: white;
      background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
      background-position: center;
      background-size: cover;
    }

    body {
      background-color: black;
    }

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

    .mypostingbox {
      width: 500px;
      margin: 20px auto 20px auto;
      border: 1px solid white;
      padding: 20px;
      border-radius: 5px;
    }

    .form-floating > input {
      background-color: transparent;
      color: white;
    }

    .form-floating > label {
      color: white;
    }

    .input-group > label {
      background-color: transparent;
      color: white;
    }

    .mypostingbox > button {
      width: 100%;
    }
  </style>

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

    function openClose() {
      $('#postingBox').toggle();
    }

    function makeCard() {
      let image = $('#image').val();
      let title = $('#title').val();
      let comment = $('#comment').val();
      let star = $('#star').val();

      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">${star}</p>
              <p class="card-text">${comment}</p>
            </div>
          </div>
        </div>`;
        $('#card').append(temp_html);
    }
  </script>

</head>
<body>
  <header class="p-3 text-bg-dark">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
        </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>
          <li><a href="#" class="nav-link px-2 text-white">홈</a></li>
          <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
          <li><a href="#" class="nav-link px-2 text-white">영화</a></li>
          <li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
          <li><a href="#" class="nav-link px-2 text-white">현재 기온: <span id="temperature">20.00</span>도</a></li>
        </ul>

        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
          <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
        </form>

        <div class="text-end">
          <button type="button" class="btn btn-outline-light me-2">Login</button>
          <button type="button" class="btn btn-danger">Sign-up</button>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="h-100 p-5 text-bg-dark rounded-3">
      <h2>킹덤</h2>
      <p>병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직 세자뿐이다.</p>
      <button type="button" class="btn btn-outline-light" onclick="
      openClose()">영화 기록하기</button>
      <button type="button" class="btn btn-outline-light">상세정보</button>
    </div>
  </div>
  <div id="postingBox" class="mypostingbox">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="image" placeholder="영화 이미지 주소">
      <label for="floatingInput">영화 이미지 주소</label>
    </div>
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="title" placeholder="영화 제목">
      <label for="floatingInput">영화 제목</label>
    </div>
    <div class="input-group mb-3">
      <label class="input-group-text" for="inputGroupSelect01">별점</label>
      <select class="form-select" id="star">
        <option selected>별점 선택</option>
        <option value="⭐">⭐</option>
        <option value="⭐⭐">⭐⭐</option>
        <option value="⭐⭐⭐">⭐⭐⭐</option>
        <option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
        <option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
      </select>
    </div>
    
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="comment" placeholder="추천 이유">
      <label for="floatingInput">추천 이유</label>
    </div>
    <button type="button" class="btn btn-danger" onclick="
    makeCard();">기록하기</button>
  </div>
  <div class="mycards">
    <div id="card" class="row row-cols-1 row-cols-md-4 g-4">
      <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 class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>
      <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 class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>
      <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 class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>
      <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 class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>

    </div>
  </div>

</body>
</html>

 

응용버전 : 서울 기온 20도 이상은 더워요, 아래는 추워요 텍스트가 나오게 하기

        $(document).ready(function () {
          let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
          fetch(url).then(res => res.json()).then(data => {
            let temp = data['temp'];
            if(temp > 20) {
              $('#temperature').text('더워요');
            } else {
              $('#temperature').text('추워요');
            }
          })
        })
        
        ...
        
<li><a href="#" class="nav-link px-2 text-white">현재 기온: <span id="temperature"></span></a></li>

전체코드

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>스파르타플릭스</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');

    * {
      font-family: 'Black Han Sans', sans-serif;
    }

    .main {
      color: white;
      background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
      background-position: center;
      background-size: cover;
    }

    body {
      background-color: black;
    }

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

    .mypostingbox {
      width: 500px;
      margin: 20px auto 20px auto;
      border: 1px solid white;
      padding: 20px;
      border-radius: 5px;
    }

    .form-floating > input {
      background-color: transparent;
      color: white;
    }

    .form-floating > label {
      color: white;
    }

    .input-group > label {
      background-color: transparent;
      color: white;
    }

    .mypostingbox > button {
      width: 100%;
    }
  </style>

  <script>
        $(document).ready(function () {
          let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
          fetch(url).then(res => res.json()).then(data => {
            let temp = data['temp'];
            if(temp > 20) {
              $('#temperature').text('더워요');
            } else {
              $('#temperature').text('추워요');
            }
          })
        })

    function openClose() {
      $('#postingBox').toggle();
    }

    function makeCard() {
      let image = $('#image').val();
      let title = $('#title').val();
      let comment = $('#comment').val();
      let star = $('#star').val();

      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">${star}</p>
              <p class="card-text">${comment}</p>
            </div>
          </div>
        </div>`;
        $('#card').append(temp_html);
    }
  </script>

</head>
<body>
  <header class="p-3 text-bg-dark">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
        </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>
          <li><a href="#" class="nav-link px-2 text-white">홈</a></li>
          <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
          <li><a href="#" class="nav-link px-2 text-white">영화</a></li>
          <li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
          <li><a href="#" class="nav-link px-2 text-white">현재 기온: <span id="temperature"></span></a></li>
        </ul>

        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
          <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
        </form>

        <div class="text-end">
          <button type="button" class="btn btn-outline-light me-2">Login</button>
          <button type="button" class="btn btn-danger">Sign-up</button>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="h-100 p-5 text-bg-dark rounded-3">
      <h2>킹덤</h2>
      <p>병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직 세자뿐이다.</p>
      <button type="button" class="btn btn-outline-light" onclick="
      openClose()">영화 기록하기</button>
      <button type="button" class="btn btn-outline-light">상세정보</button>
    </div>
  </div>
  <div id="postingBox" class="mypostingbox">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="image" placeholder="영화 이미지 주소">
      <label for="floatingInput">영화 이미지 주소</label>
    </div>
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="title" placeholder="영화 제목">
      <label for="floatingInput">영화 제목</label>
    </div>
    <div class="input-group mb-3">
      <label class="input-group-text" for="inputGroupSelect01">별점</label>
      <select class="form-select" id="star">
        <option selected>별점 선택</option>
        <option value="⭐">⭐</option>
        <option value="⭐⭐">⭐⭐</option>
        <option value="⭐⭐⭐">⭐⭐⭐</option>
        <option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
        <option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
      </select>
    </div>
    
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="comment" placeholder="추천 이유">
      <label for="floatingInput">추천 이유</label>
    </div>
    <button type="button" class="btn btn-danger" onclick="
    makeCard();">기록하기</button>
  </div>
  <div class="mycards">
    <div id="card" class="row row-cols-1 row-cols-md-4 g-4">
      <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 class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>
      <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 class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>
      <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 class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>
      <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 class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>

    </div>
  </div>

</body>
</html>
728x90
반응형

'부트캠프 개발일지 2023-2024 > Pre-course 사전학습' 카테고리의 다른 글

[Pre-course] 웹개발 기초 : addDoc, getDoc, Github 배포, 파이썬  (0) 2023.10.03
[Pre-course] 웹개발 기초 : Firebase, Database, Firestore Database (데이터 넣기, 데이터 가져오기)  (0) 2023.10.03
[Pre-course] 웹기발 기초 : JQuery 2  (1) 2023.10.01
[Pre-course] 웹개발 기초 : JavaScript, JQuery  (0) 2023.10.01
[Pre-course] 웹개발 기초 : html, css  (0) 2023.10.01

관련글

티스토리툴바