[스파르타코딩클럽] 웹개발 종합반 5주차
✏️ 실습을 통해 GET, POST 복습 -> 웹 서비스 실제로 구동시켜보기
실습 : 무비스타
만들 API (배우 조회=Read)
1 . 조회(READ) 기능 : 배우 정보 전체를 조회
2 . 좋아요(UPDATE) 기능 : 클라이언트에서 받은 이름(name_give)로 찾아서 좋아요 증가
3 . 삭제(DELETE) 기능 : 클라이언트에서 받은 이름(name_give)로 배우를 찾고, 해당 배우 삭제
API 생성 시 필요한 정보
1 . 요청 정보 : 요청 URL=/api/list, 요청 방식은 GET, 요청 데이터 없음
2 . 서버가 제공할 기능 : DB에서 배우 정보를 조회하고 배우 정보를 응답 데이터로 보냄
3 . 응답 데이터 : (JSON 형식) 'starts_list'=배우 정보 리스트
[ 서버 부분 코드 ]
# API 역할을 하는 부분
@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})
@app.route('/api/like', methods=['POST'])
def like_star():
name_receive = request.form['name_give']
target_star = db.mystar.find_one({'name':name_receive})
current_like = target_star['like']
new_like = current_like+1
db.mystar.update_one({'name':name_receive,}, {'$set':{'like':new_like}})
return jsonify({'msg': '좋아요 완료!!'})
@app.route('/api/delete', methods=['POST'])
def delete_star():
name_receive = request.form['name_give']
db.mystar.delete_one({'name':name_receive})
return jsonify({'msg': '삭제 완료!'})
[ 클라이언트 부분 코드 ]
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 url = mystars[i]['url']
let recent = mystars[i]['recent']
let like = mystars[i]['like']
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)
}
}
});
}
function likeStar(name) {
$.ajax({
type: 'POST',
url: '/api/like',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
function deleteStar(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
[ 결과 화면 : 리스트 보여주기 ]
[ 결과 화면 : 좋아요 ]
내 프로젝트를 서버에 올리기
웹 서비스 런칭에 필요한 개념
웹 서비스 런칭을 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시켜야 한다.
언제나 요청에 응답하기 위해선느 컴퓨터가 항상 켜져있고 프로그램이 실행돼어야 하고 공개 주소인 공개 IP 주소로 웹 서비스에 접근할 수 있어야 한다.
AWS 이용해 서버에 프로그램 실행 -> 도메인 구입해 IP주소로 연결! -> og 태그 넣기
후기
웹 서비스가 어떻게 런칭되는지 자세히 알 수 있는 주였다. AWS에서 EC2를 이용해 서버에 프로그램을 올려서 실행도 해봤고 가비아에서 도메인을 구매해서 실제로 해당 주소로 이동할 수 있게도 해볼 수 있었다. 이러한 과정들을 다 일일이 적어두기에는 뭐가 많아질 것 같아서 간략히 썼다. 생각했던 것보다 재미있게 들은 강의였다. 앱 개발에만 흥미를 가졌었는데, 웹에 대한 흥미가 생긴 경험이었다.
Author And Source
이 문제에 관하여([스파르타코딩클럽] 웹개발 종합반 5주차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@_ddaezi/스파르타코딩클럽-웹개발-종합반-5주차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)