3-2_스파르타피디아에 OpenAPI 붙여보기

Ⅰ. 이번 회차 학습 목표 (goal)

---

1. 배우고자 하는 것

• 만든것을 붙여놓기
  

Ⅱ. 해보기

---

1. 만들어진 DB 를 API 형태로 가져와서 확인

• api 주소

  http://spartacodingclub.shop/web/api/movie

• 만들어진 api 확인

2. 로딩 후 바로 console 에 '로딩이 잘 되었다.' 는 메시지 보이게 하기 [ajax 뼈대만들기]

$(document).ready(function () {
    listing();
});

function listing() {
    console.log('화면 로딩 후 잘 실행되었습니다');
}

• 읽어보기

$(document).ready(function () { : 로딩 후 어떤 함수가 실행이 될거야. 그게 뭐야?

listing(); : 리스팅 함수가 실행 될거야~! 그러면, 리스팅 함수는 뭐지?

function listing() {console.log('화면 로딩 후 잘 실행되었습니다');} : 콘솔을 띄운다.

• 이렇게 하는 이유
  • 이렇게 필요한 기능의 뼈대를 만들어 놓고 -> 심화 또는 변형 시켜나가는 과정

3. 필요한 data 가 console 에 잘 찍히는지 확인

• 잘 찍히는 코드

  function listing() {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/web/api/movie",
        data: {},
        success: function (response) {
            let rows = response['movies']
  
            console.log(rows)
        }
    })
  }

• 결과물
  • 잘 나오고 있음!
    

4. 잘 나오는 data 를 for 문으로 돌기

• 원하는 데이터 변수를 만들고 잘 들어오는지 console 로 확인
  • 이 과정들이 반복되고 있음 ⭐⭐⭐⭐⭐
  • 이게 정말 손에 익으려면, 내가 반복하면서, ==안 보고 다음 과정을 떠올리면서==, 동시에 생각을 해봐야 할 것 같음 ⭐⭐⭐⭐⭐

    function listing() {
    $.ajax({
      type: "GET",
      url: "http://spartacodingclub.shop/web/api/movie",
      data: {},
      success: function (response) {
          let rows = response['movies']
          for (let i = 0; i < rows.length; i++){
              let title = rows[i]['title']
              let desc = rows[i]['desc']
              let image = rows[i]['image']
              let star = rows[i]['star']
              let comment = rows[i]['comment']
              console.log(title, desc, image, star, comment)
          }                    
      }
    })
    }

• 결과물
  • 잘 나오고 있음.

5. ajax append() 사용해서, 카드 추가로 붙이기

• 카드 영역 html 복사

  • 이 놈을 temp_html 변수에 놓고

  • ajax append 에 넣으면 된다.

  • 그리고, 기존 것들 지워주기 위해서 empty() 사용 하면 된다. ⭐⭐⭐

    • 이걸 해야, 업데이트 기능이 완성 될 수 있음.

  • 와 신기하다 진짜 ⭐⭐⭐⭐⭐⭐⭐⭐

  • 그리고 append 쓸 때, html 을 너무 어렵게 생각할 필요 없고, 그냥 body 부분에 있는 것들 이라고 생각해야 하려나.

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

• 우선 카드 추가 작동하는 코드

  function listing() {
    // 기존에 있는 것들 지워야, 업데이트 하는 기능으로 만들 수 있음.  
    $('#cards-box').empty()
  
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/web/api/movie",
        data: {},
        success: function (response) {
            let rows = response['movies']
            for (let i = 0; i < rows.length; i++) {
                let title = rows[i]['title']
                let desc = rows[i]['desc']
                let image = rows[i]['image']
                let star = rows[i]['star']
                let comment = rows[i]['comment']
  
                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>⭐⭐⭐ </p>
  
                                            <!-- 코멘트 영역 -->
                                            <p class="mycomment">${comment}</p>
  
                                        </div>
                                    </div>
                                </div>`
  
                $('#cards-box').append(temp_html)
  
            }
        }
    })
  }

  
  

• 결과물

  • 잘 작동함
    

6. 별점 : javascript 내장 함수 사용

• repeat 함수
  • 지정한 횟수만큼, 특정 부분을 반복

    // 별 이미지를 반복하는데 star 변수에 담긴 횟수만큼 반복!
    let star_image = '⭐'.repeat(star)

💭 What i learned

---

• ajax 를 붙여도 괜찮은 뼈대를 먼저 만들고, 그 다음 ajax 를 붙이는 것! ex) 로딩 되었을 때, console 창에 '로딩되었습니다.' 라고 보이게 하면 된다. -> 그 다음 ajax 를 붙인다.
  • 쉽게 생각하면, console.log 자리에 ajax 가 들어간다고 생각.

• 그리고 append 쓸 때, html 을 너무 어렵게 생각할 필요 없고, 그냥 body 부분에 있는 것들 이라고 생각해야 하려나.