[수업 목표]
- Flask 프레임워크를 활용해서 API를 만들 수 있다.
- '마이 페이보릿 무비스타'를 완성한다.
- EC2에 내 프로젝트를 올리고, 자랑한다!
1. [무비스타] - GET연습(보여주기)
- 만들 기능은
영화인 정보를 카드로 보여주기(Read) - 화면에 어떤 데이터가 어떤 부분에 보여지는지 영화인 카드 화면 코드를 보며 분석해보겠습니다.
- 영화인 이름
- 영화인 이미지 : 이미지 src 속성
- 좋아요 개수
- 최근 작품 내용이 들어가는 부분
👉
index.html을 크롬에서 실행시켜 크롬 개발자도구 - 검사하기(Inspector)로 어떤 요소에 어떤 데이터가 보일지 분석하기.
<!-- 다음 코드가 하나의 카드를 이루는 div 입니다. -->
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="https://search.pstatic.net/common/?src=https%3A%2F%2Fssl.pstatic.net%2Fsstatic%2Fpeople%2Fportrait%2F201807%2F20180731143610623-6213324.jpg&type=u120_150&quality=95"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<a href="https://movie.naver.com//movie/bi/pi/basic.nhn?st=1&code=397373" target="_blank" class="star-name title is-4">김다미 (좋아요: 3)</a>
<p class="subtitle is-6">안녕, 나의 소울메이트(가제)</p>
</div>
</div>
</div>
<footer class="card-footer">
<a href="#" onclick="likeStar('김다미')" class="card-footer-item has-text-info">
위로!
<span class="icon">
<i class="fas fa-thumbs-up"></i>
</span>
</a>
<a href="#" onclick="deleteStar('김다미')" class="card-footer-item has-text-danger">
삭제
<span class="icon">
<i class="fas fa-ban"></i>
</span>
</a>
</footer>
</div>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'= 영화인 정보 리스트
1. 클라이언트와 서버 연결 확인하기
[서버 코드 - 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']);
}
});
}2. 서버부터 만들기
👉 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})3. 클라이언트 만들기
👉 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="#"token interpolation">${name}')" class="card-footer-item has-text-info">
위로!
<span class="icon">
<i class="fas fa-thumbs-up"></i>
</span>
</a>
<a href="#"token interpolation">${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)
}
}
});
}