나홀로 메모장 연습겸 복습

나홀로 메모장을 아래처럼 만들어 볼것이다
http://spartacodingclub.shop/
카드들을 붙여줄 수 있도록 api를 만들어 놨는데
만들어논거에 위에 본문을 붙일것이다.

나홀로메모장 api(get)이다
http://spartacodingclub.shop/post
articles라는 키 안에 리스트가 들어있고 그안에 딕셔너리가 들어있는 형태다.comment,desc,image,title,url 다섯개의 키를 가진 딕셔너리가 여러개 있다.

첫번째 할일: 이 api를 언제 호출해야 하는가
리로딩 됐을때 자동으로 붙여나온다.

  listing();
});

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

script앞쪽에다 붙여준다.
브라우저에서 리로딩하고 console에 보면 잘 찍혀있다.
ajax를 붙일것이다.

  ``` function listing() {
       $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/post",
            data: {},
            success: function (response) {
                console.log(response)
            }
        })
    }```

url은 http://spartacodingclub.shop/post
console.log(response)로 나홀로메모장에서 찍혔는지 본다.

let rows를 돌릴건데 articles안에 있는 리스트로 잡으면 되겠다.

이거 전체가 response
articles:[..]👉 articles를 key값으로 하는:value

let rows = response['articles']
for(let i = 0; i < rows.length; i++) {
                    }

for문을 돌려준다.
그리고 comment,desc,image,title,url를 하나씩 빼준다.
(comment가 0부터 끝까지 돌거니까)
let comment = rows[i]['comment']
👉rows의 i번째의 comment를 빼와라
나머지도 복붙해서 글자만 바꿔준다.
그다음 console.log(comment,desc,image,title,url)
로 찍어주기

잠깐복습,
로딩이 다됐으면 listing함수가 불리고
listing함수의 내용물 ajax콜을 바로 url에 때린다.
결과를 받아온다.
그리고 for문으로 돌면서
빼와서 console에다가 찍어보라 명령해놓았다.
나홀로 메모장에 잘찍혔다.

이제 temp_html에다 붙여줄건데,
어떤 html을 붙여주냐면
card내용물 전체니까 card-columns에다 붙여주면 되겠다.
card div 하나만 전체 복붙해준다.
${}로 변수인 5개의 key 값을 붙여준다.
헷갈리면 나홀로메모장 element에서 하나씩 확인해보며 찾아보기.

이 temp_html을 어디다 붙여주냐면
card-columns의 id=card-box에다 붙여준다.
$('#cards-box').append(temp_html)

그런데 그전에 붙어있던 card들을 없애고 싶다.
$('#cards-box').empty();를 쓸건데
ajax콜을 받기전에 없애야하니까
function listing 바로 아래에 넣어줘도 되고
아예 초장에 없애버리고 싶다면
로딩하자마자 없애라고 ready function 아래에 달아줘도 된다.