4주차_18([나홀로메모장] - GET 연습(보여주기))

API 만들고 사용하기 - 리스팅 API (Read → GET)

우리가 만들 API 두 가지

 

1) 포스팅API - 카드 생성 (Create) : 클라이언트에서 받은 url, comment를 이용해서 페이지 정보를 찾고 저장하기

2) 리스팅API - 저장된 카드 보여주기 (Read)

클라이언트와 서버 연결 확인하기

• 여기서는 미리 적혀 있는 쌍으로 되어있는 서버-클라이언트 코드를 확인하고 갈게요.
• 분홍 형광펜 부분이 서로 어떻게 매칭되는지 확인해보세요!

[서버 코드 - app.py]

@app.route('/memo', methods=['GET'])

def read_articles():

# 1. 모든 document 찾기 & _id 값은 출력에서 제외하기

# 2. articles라는 키 값으로 영화정보 내려주기

return jsonify({'result':'success', 'msg':'GET 연결되었습니다!'})

 

[클라이언트 코드 - index.html]

function showArticles() {

$.ajax({

type: "GET",

url: "/memo",

data: {},

success: function (response) {

if (response["result"] == "success") {

alert(response["msg"]);

}

}

})

}

동작 테스트

새로고침했을 때, 'GET 연결되었습니다!' alert창이 뜨면

클라이언트 코드와 서버 코드가 연결 되어있는 것입니다.

서버부터 만들기

API 는 약속이라고 했습니다. 위에 미리 설계해 둔 API 정보를 보고 만들어보죠!

 

메모를 보여주기 위해 서버가 추가로 전달받아야하는 정보는 없습니다. 조건없이 모든 메모를 보여줄 꺼니까요!

 

따라서 서버 로직은 다음 단계로 구성되어야 합니다.

1. mongoDB에서 _id 값을 제외한 모든 데이터 조회해오기 (Read)

2. articles라는 키 값으로 articles 정보 보내주기

 

@app.route('/memo', methods=['GET'])

def listing():

articles = list(db.articles.find({}, {'_id': False}))

return jsonify({'all_articles':articles})

클라이언트 만들기

API 는 약속이라고 했습니다. API를 사용할 클라이언트를 만들어보죠!

 

메모를 작성하기 위해 서버에게 주어야하는 정보는 없습니다. 조건없이 모든 메모를 가져오기 때문입니다.

 

따라서 클라이언트 로직은 다음 단계로 구성되어야 합니다.

1. /memo에 GET 방식으로 메모 정보 요청하고 articles로 메모 정보 받기

2. , makeCard 함수를 이용해서 카드 HTML 붙이기

(→ 2주차 Ajax 연습과 같습니다!)

 

function showArticles() {

$.ajax({

type: "GET",

url: "/memo",

data: {},

success: function (response) {

let articles = response['all_articles']

for (let i = 0; i < articles.length; i++) {

let title = articles[i]['title']

let image = articles[i]['image']

let url = articles[i]['url']

let desc = articles[i]['desc']

let comment = articles[i]['comment']

 

let temp_html = `<div class="card">

<img class="card-img-top"

src="${image}" alt="Card image cap">

<div class="card-body">

<a target="_blank" href="${url}" class="card-title">${title}</a>

<p class="card-text">${desc}</p>

<p class="card-text comment">${comment}</p>

</div> </div>` $('#cards-box').append(temp_html)

}

}

})

}

완성 확인하기

동작 테스트

새로고침했을 때, 앞 포스팅 API를 만들고 테스트했던 메모가 보이면 성공입니다.

 

참고!

card가 정렬되는 순서는 위에서 아래로 채워지고, 왼쪽부터 오른쪽으로 순서대로 채워집니다. 부트스트랩 컴퍼넌트 페이지에 적혀있어요. "Cards are ordered from top to bottom and left to right." (컴퍼넌트 페이지 링크)