-3주차 연습 겸 복습-

<script>
    $(document).ready(function () {                 //로딩 시 listing함수 바로 구현
          $('#cards-box').empty()                  //원래 있던 함수가 들어가지 않은 카드박스를 비워준다.
        listing();
    });

    function listing() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/post",
            data: {},
            success: function (response) {              //서버에서 준 결과가 response에 들어갈 예정
                let rows = response['articles']           // rows 는 'articles' 전체로 변수지정
                for (let i = 0; i < rows.length; i++) {  // for 반복문 ( 변수선언; 조건식; 증감식)
                    let comment = rows[i]['comment']   // articles 안에있는 comment 0번째부터 쭉 실행
                    let desc = rows[i]['desc']
                    let image = rows[i]['image']
                    let title = rows[i]['title']
                    let url = rows[i]['url']

                    let temp_html = `<div class="card">
                                        <img class="card-img-top"
                                             src="${image}"
                                             alt="Card image cap">
                                        <div class="card-body">
                                            <a href="${url}" class="card-title"> ${title}</a>
                                            <p class="card-text">${desc}</p>
                                            <p class="card-text comment">${comment}</p>
                                        </div>
                                    </div>`    //원래 있던 카드박스에 image, url, title, disc, comment 를 넣어준다.
                                 $('#cards-box').append(temp_html) //카드박스가 지정된 temp_html을 appned를 사용해 계속 붙혀준다.

3주차에는 ajax와 Jquery를 다시 복습해보았다. 

1주차에 만든 나홀로 메모장에 영화 open API를 넣고

for문을 사용해 카드박스안에 api를 서버에서 불러오고

append로 이어붙이는 작업.. 주석으로 정리하니까 정말 편한 것 같다.