API 붙여넣기 복습

movie이 링크를 만들어 뒀던 영화 리뷰 페이지에 fetch 사용해서 이때까지 배웠던 날씨 API, 미세먼지 API처럼 붙여넣기 연습하는 시간을 가져보자.

링크를 열면 위 사진처럼 리스트가 쭉 나온다. 변수를 comment, desc, image, star, title 이렇게 다섯 개 만들어서 쭉 붙여주면 될 거 같다.

      $(document).ready(function () {
        fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
          .then((res) => res.json())
          .then((data) => {
            let degree = data["temp"];
            $("#temp").text(degree);
          });
        fetch("http://spartacodingclub.shop/web/api/movie")
          .then((res) => res.json())
          .then((data) => {
            console.log(data);
          });
      });

지난 주 과제로 제출했던 파일에서 script 부분에 fetch를 하나 더 작성해서 콘솔창에서 찍는 것까지 작성. 콘솔창 열어보면 아래 사진처럼 데이터가 잘 찍혀 나온다.

fetch("http://spartacodingclub.shop/web/api/movie")
          .then((res) => res.json())
          .then((data) => {
          
            let rows = data['movies'];
            rows.forEach((review) => {
              let title = review['title'];
              let desc = review['desc'];
              let img = review['image'];
              let star = review['star'];
              let comment = review['comment'];
            });
          });

rows 라는 변수 선언해서 movies 할당해주고, 이걸 forEach를 사용해서 반복문을 돌렸다. 이 반복문이 돌아가면서 아까 말했던 title ~ comment 다섯개의 변수가 쭉 붙어야되기 때문에 forEach 내에서 변수 선언까지 완료.

위에 작성했던 저 반복문 부분이 붙어야 되는 html 부분이 어딜까. 코드 내부에서 일단 카드 부분을 좀 접어주고 붙어야될 부분을 찾아보면, 표시해놓은 div 태그 내에 카드 모양으로 쭉 붙어야 되는 걸 이해할 수 있다. 그럼 저 div 태그에 id를 작성해야겠네 ! id="cards" 라고 작성해줬다. 그럼 저 div 태그는 결국 < div id="cards" class="row row-cols-1 row-cols-md-4 g-4" > 이렇게 작성되어야 한다. 그리고 카드 하나를 복사해준다. (붙여 넣어야 되니까 .. !)

복사한 코드를 temp_html 이라는 변수 선언해서 백틱 `` 안에 넣어준다. (이게 카드 하나의 코드) title, desc, img, comment가 들어가야 하는 부분에 ${ } 사용해서 수정했다. (star는 나중에!) 마지막에 append 한다는 $("#cards").append(temp_html); 코드까지 작성 완료.

        fetch("http://spartacodingclub.shop/web/api/movie")
          .then((res) => res.json())
          .then((data) => {
            let rows = data["movies"];
            rows.forEach((review) => {
              let title = review["title"];
              let desc = review["desc"];
              let img = review["image"];
              let star = review["star"];
              let comment = review["comment"];

              let temp_html = `<div class="col">
                                  <div class="card h-100">
                                      <img src="${img}"
                                          class="card-img-top" alt="..."/>
                                      <div class="card-body">
                                          <h5 class="card-title">${title}</h5>
                                          <p class="card-text">${desc}</p>
                                          <p>⭐⭐⭐⭐⭐</p>
                                          <p class="quote">${comment}</p>
                                      </div>
                                  </div>
                               </div>`;
              $("#cards").append(temp_html);
            });
          });

그럼 이렇게 카드 4개씩 쭉 붙은 걸 볼 수 있다 !

그럼 이제 별을 수정할 건데, 그렇게 어렵지는 않았다. star라는 변수 외에 저 별 이모티콘이 들어가야 하는 변수를 하나 더 설정해준다.

let star_img = '⭐';

이 반복이 돌아가게 도와주는 js 문법이 있다. 반복이니까 repeat .. ?

let star_img = '⭐'.repeat();

응 정답이였다.. ~ ! ㅋㅋㅋㅋㅋ 근데 이 repeat가 몇번 돌아가야 하냐, star의 개수만큼 돌아가야 하니 괄호 안에 앞서 설정해줬던
let star = review['star']; 이 변수 이름을 넣어주면 되겠지 ! 그럼 별 완성 !

let star_img = '⭐'.repeat(star);

이 태그 <p>⭐⭐⭐⭐⭐</p> 안에 별을 지우고 <p>${star_img}</p> 선언해둔 star_img 변수를 넣어주면 star의 수만큼 문자열화 된 별 이모티콘이 돌아가면서 star = 4일 때 별이 4개 찍히고, 5일때는 5개 찍힌다 ! so easy 그잡채. 이렇게 연습, 복습을 완료 했으니까

다음 강의는 ⭐Python⭐