스파르타코딩클럽 5주차 (2)

2. [무비스타] - POST연습(좋아요+1)

API 만들고 사용하기 - 좋아요 API (Update → POST)

👉 만들 API
1) 조회: 영화인 정보 전체를 조회
2) 좋아요: 클라이언트에서 받은 이름(name_give)으로 찾아서 좋아요(like)를 증가
3) 삭제: 클라이언트에서 받은 이름(name_give)으로 영화인을 찾고, 해당 영화인을 삭제

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

• 요청 URL= /api/like , 요청 방식 = POST
• 요청 데이터 : 영화인 이름(name_give)
  B. 서버가 제공할 기능 : 영화인 이름(요청 데이터)과 일치하는 영화인 정보의 좋아요 수를 한 개 증가시켜 데이터베이스에 업데이트하고(Update), 성공했다고 응답 메세지를 보냄
  C. 응답 데이터 : (JSON 형식) 'msg'='좋아요 완료!'

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

[서버 코드 - app.py]

@app.route('/api/like', methods=['POST'])
def like_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'like 연결되었습니다!'})

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

function likeStar(name) {
    $.ajax({
        type: 'POST',
        url: '/api/like',
        data: {sample_give:'샘플데이터'},
        success: function (response) {
            alert(response['msg']);
        }
    });
}

2) 서버부터 만들기

👉API 는 약속이라고 했습니다. 위에 미리 설계해 둔 API 정보를 보고 만들어보죠!
영화인 카드의 좋아요 수를 증가시키기 위해 서버가 클라이언트에게 전달받아야하는 정보는 다음과 같습니다.

• 영화인의 이름 (name_give)
  따라서 서버 로직은 다음 단계로 구성되어야 합니다.

1. 클라이언트가 전달한 name_give를 name_receive 변수에 넣습니다.
2. mystar 목록에서 find_one으로 name이 name_receive와 일치하는 star를 찾습니다.
3. star의 like 에 1을 더해준 new_like 변수를 만듭니다.
4. mystar 목록에서 name이 name_receive인 문서의 like 를 new_like로 변경합니다.

@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': '좋아요 완료!'})

3) 클라이언트 만들기

👉API 는 약속이라고 했습니다. API를 사용할 클라이언트를 만들어보죠!
좋아요 수를 증가시키기 위해 클라이언트가 전달할 정보는 다음과 같습니다.

• 영화인의 이름 (name_give)
  따라서 클라이언트 로직은 다음 단계로 구성되어야 합니다.

1. 서버에
   1) POST 방식으로,
   2) /api/like 라는 url에,
   3) name_give라는 이름으로 name을 전달합니다.
   (참고) POST 방식이므로 data: {'name_give': name} 사용
2. '좋아요 완료!' alert 창을 띄웁니다.
3. 변경된 정보를 반영하기 위해 새로고침합니다.

function likeStar(name) {
    $.ajax({
        type: 'POST',
        url: '/api/like',
        data: {name_give:name},
        success: function (response) {
            alert(response['msg']);
            window.location.reload()
        }
    });
}

3. [무비스타] - POST연습(삭제하기)

👉 만들 API
1. 조회(Read) 기능: 영화인 정보 전체를 조회
2. 좋아요(Update) 기능: 클라이언트에서 받은 이름(name_give)으로 찾아서 좋아요(like)를 증가
3. 삭제(Delete) 기능: 클라이언트에서 받은 이름(name_give)으로 영화인을 찾고, 해당 영화인을 삭제

👉 정리하면, 만들 API 정보는 아래와 같습니다.
A. 요청 정보
-요청 URL= /api/delete , 요청 방식 = POST
-요청 데이터 : 영화인 이름(name_give)
B. 서버가 제공할 기능 : 영화인 이름(요청 데이터)와 일치하는 영화인 정보를 데이터베이스에서 삭제(Delete)하고, 성공했다고 응답 메세지를 보냄
C. 응답 데이터 :** (JSON 형식) 'msg'='삭제 완료!'

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

[서버 코드 - app.py]

@app.route('/api/delete', methods=['POST'])
def delete_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'delete 연결되었습니다!'})

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

function deleteStar(name) {
    $.ajax({
        type: 'POST',
        url: '/api/delete',
        data: {sample_give:'샘플데이터'},
        success: function (response) {
            alert(response['msg']);
        }
    });
}

2) 서버부터 만들기

👉API 는 약속이라고 했습니다. 위에 미리 설계해 둔 API 정보를 보고 만들어보죠!
영화인 카드를 삭제하기 위해 필요한 정보는 다음과 같습니다.

• 영화인의 이름 (name_give)
  따라서 서버 로직은 다음 단계로 구성되어야 합니다.

1. 클라이언트가 전달한 name_give를 name_receive 변수에 넣기
2. mystar 에서 delete_one으로 name이 name_receive와 일치하는 star를 제거
3. 성공하면 success 메시지를 반환

@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': '삭제 완료!'})

3) 클라이언트 만들기

👉API 는 약속이라고 했습니다. API를 사용할 클라이언트를 만들어보죠!
영화인 카드를 삭제하기 위해 필요한 정보는 다음과 같습니다.

• 영화인의 이름 (name_give)
  따라서 클라이언트 로직은 다음 단계로 구성되어야 합니다.

1. 서버에
   1) POST 방식으로,
   2) /api/delete 라는 url에,
   3) name_give라는 이름으로 name을 전달
   (참고) POST 방식이므로 data: {'name_give': name}
2. '삭제 완료! 안녕!' alert창 띄우기
3. 변경된 정보를 반영하기 위해 새로고침

function deleteStar(name) {
      $.ajax({
          type: 'POST',
          url: '/api/delete',
          data: {name_give:name},
          success: function (response) {
              alert(response['msg']);
              window.location.reload()
          }
      });
  }