5주차_5([무비스타] - GET연습(보여주기))

문제 분석 - 화면과 동작 살펴보기

• 우리가 만들 기능은 영화인 정보를 카드로 보여주기(Read) 입니다.
• 화면에 어떤 데이터가 어떤 부분에 보여지는지 영화인 카드 화면 코드를 보며 분석해보겠습니다.
  • 영화인 이름
  • 영화인 이미지 : 이미지 src 속성
  • 좋아요 개수
  • 최근 작품 내용이 들어가는 부분

👉 index.html을 크롬에서 실행시켜 크롬 개발자도구 - 검사하기(Inspector)로 어떤 요소에 어떤 데이터가 보일지 분석해보세요.

API 만들고 사용하기 - 영화인 조회 API (Read → GET)

만들 API

1. 조회(Read) 기능: 영화인 정보 전체를 조회

2. 좋아요(Update) 기능: 클라이언트에서 받은 이름(name_give)으로 찾아서 좋아요(like)를 증가

3. 삭제(Delete) 기능: 클라이언트에서 받은 이름(name_give)으로 영화인을 찾고, 해당 영화인을 삭제

 

정리하면, 만들 API 정보는 아래와 같습니다.

A. 요청 정보

- 요청 URL= /api/list , 요청 방식 = GET

- 요청 데이터 : 없음

 

B. 서버가 제공할 기능 : 데이터베이스에 영화인 정보를 조회(Read)하고, 영화인 정보를 응답 데이터로 보냄

 

C. 응답 데이터 : (JSON 형식) 'stars_list'= 영화인 정보 리스트

 

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

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

[서버 코드 - app.py]

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

def show_stars():

sample_receive = request.args.get('sample_give')

print(sample_receive)

return jsonify({'msg': 'list 연결되었습니다!'})

 

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

function showStar() {

$.ajax({

type: 'GET',

url: '/api/list?sample_give=샘플데이터',

data: {},

success: function (response) {

alert(response['msg']);

}

});

}

 

동작 테스트

새로고침했을 때, 'list 연결되었습니다.' 라는 메시지가 뜨면 동작하는 것입니다.

서버부터 만들기

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

 

영화인 정보 전체를 조회하기 위해 서버가 받을 정보는 없습니다. 조건없이 모든 정보를 보여줄 것이니까요!

 

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

1. mystar 목록 전체를 검색합니다. ID는 제외하고 like 가 많은 순으로 정렬

2. 성공하면 success 메시지와 함께 stars_list 목록을 클라이언트에 전달

 

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

def show_stars():

movie_star = list(db.mystar.find({}, {'_id': False}).sort('like', -1))

return jsonify({'movie_stars': movie_star})

클라이언트 만들기

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

 

영화인 정보 전체를 조회하기 위해 서버가 받을 정보는 없습니다. 조건없이 모든 정보를 보여줄 것이니까요!

 

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

1. #star_box의 내부 html 태그를 모두 삭제

2. 서버에 1) GET 방식으로, 2) /api/list 라는 주소로 stars_list를 요청

3. 서버가 돌려준 stars_list를 stars라는 변수에 저장

4. for 문을 활용하여 stars 배열의 요소를 차례대로 조회

5. stars[i] 요소의 name, url, img_url, recent, like 키 값을 활용하여 값 조회

6. 영화인 카드 코드 만들어 #star-box에 붙이기

 

function showStar() {

$.ajax({

type: 'GET',

url: '/api/list?sample_give=샘플데이터',

data: {},

success: function (response) {

let mystars = response['movie_stars']

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

let name = mystars[i]['name']

let img_url = mystars[i]['img_url']

let recent = mystars[i]['recent']

let url = mystars[i]['url']

let like = mystars[i]['like']

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

<div class="card-content">

<div class="media">

<div class="media-left">

<figure class="image is-48x48">

<img

src="${img_url}"

alt="Placeholder image"

/>

</figure>

</div> <div class="media-content">

<a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>

<p class="subtitle is-6">${recent}</p>

</div>

</div>

</div>

<footer class="card-footer">

<a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info">

위로!

<span class="icon">

<i class="fas fa-thumbs-up"></i>

</span>

</a>

<a href="#" onclick="deleteStar('${name}')" class="card-footer-item has-text-danger">

삭제

<span class="icon">

<i class="fas fa-ban"></i>

</span>

</a>

</footer>

</div>`

$('#star-box').append(temp_html) } } }); }

완성 확인하기

동작 테스트

화면을 새로고침 했을 때 영화인 정보가 조회되는지 확인합니다.