웹개발 종합반 3주차 (3-2) : 2주차 복습 (Open API)

과제 :

나만의 메모장 카드들에

들어갈 데이터를 불러오는 api 적용하기.

 

frontend > index.html 파일로 작업

(나만의 링크 메모장)

 

*코드 스니펫

1. api

2. 로딩 후 바로 실행

 

---

 

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

    function listing() {
        console.log('실행확인');
    }

로딩 후 바로 실행하는 코드 붙여 넣고

콘솔 창에서 연결 확인.

console.log 대신 ajax 기본 코드.

 

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

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

response 받은 그대로

console.log

articles의 내용을 하나씩 찍는 반복문.

틀린 곳 : let i = 0, 

데이터 하나씩 찍는 거 기억이 잘 안 나서 보면서 했다.

받아온 정보중 필요한 부분

let으로 이름 붙이고 = response['이름']

for문 안에 let으로 또 하나 만들고 이름[i] ;

 

제대로 안 떠서 다시 보니 

;이 아니라 , 찍어놨다.. 조심!

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

    function listing() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/post",
            data: {},
            success: function (response) {
               let articles = response['articles'];
                for (let i = 0; i < articles.length; i++){
                    let article = articles[i];
                    console.log(article);
                }
            }
        })
    }

이제 각각의 요소를 let으로 만들고

temp_html로 형식 만들어서. append로 붙이기.

body에 있던 카드 중 필요한 것만 남기고 지우기.

 

블로그 2개만 남겨놓고

밑으로 ajax로 불러온 데이터를

쭉 붙게 하려 했는데 (혼자 심화학습.)

 

실행하자마자 비우는 코드 때문에

api 데이터만 남는다.

이렇게 id = "cards-box" 아래에 속한

2개 링크가 지워져 버린다.

 

두 링크를 temp_html 상단에 포함시켰더니 

 

무한대로.. 복사해서 붙어버리는 ㅋㅋㅋ

 

그래서

두 링크를 따로 위쪽으로 빼고, ajax가 들어갈 그룹을 비워두니..

블로그 두 개 밑으로 데이터 붙는 것 까지는 되는데카드가 너무 커진다.

 

부트스트랩 활용하려면 class까지는 써야 할 것 같으니

새로운 div 만들어서 card-colums 클래스만 먹이고

하위에 블로그 카드 두 개 넣었다.

거의 다 왔다! 세로로 붙는 건..

div 태그는 block이라서 그런 건 아는데 흠..

 

구글에 "card 나란히"라고

검색해봤더니 상위 태그 display 값을 flex로 주고,

하위에 flex 값을 주는 방법이 있었다.

 

▼참고했던 블로그 링크▼

https://velog.io/@devzunky/wecode-5%EC%9D%BC%EC%B0%A8-TIL-div%EC%9A%94%EC%86%8C-3%EA%B0%9C-%EB%82%98%EB%9E%80%ED%9E%88-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0-i6k1bw0n8v

class 여러 개 중복해서 쓰는 게 

나란히 입력하면 되는 거였는데? 하면서 , 로 구분하다가

안돼서 검색해보니 그냥 띄어쓰기로 구분.

각각 flex 1 주니까 해결!!

좀 크니까 카드 하나 더 추가해서 크기 맞출까 했는데 

귀찮아서 패스....ㅎ