[Python] Flask 클라이언트 PUT, DELETE 요청 처리

개요

이번엔 이미 존재하는 아이템 정보를 수정하는 작업을 진행해 본다.

아이템 정보 수정을 진행하는 로직은 다음과 같다.

1. 웹 클라이언트에서 모든 아이템 정보 불러오기
2. 특정 아이템을 선택
3. input에 존재하는 이름과 설명 정보 수정
4. 수정 완료 버튼을 클릭하여 수정 요청 진행
5. 웹 서버에서 수정 요청 정보 수락
6. 데이터 검증 후 DB 서버에 수정 요청 진행
7. 트랜잭션 처리 후 결과 DB서버에 전송
8. DB커밋 후 결과 웹 클라이언트에 전송
9. 전송 결과 사용자에게 노출

아이템 수정 요청엔 모든 정보를 수정하는 PUT과 일부 정보를 수정하는 PATCH가 있다.

보통은 PUT을 통해 모든 정보를 수정한다. (사실 모든 요청을 GET으로 퉁쳐버리는 경우도 있다.)

 

아이템 정보를 삭제하는 로직은 비교적 간단하다.

1. 웹 클라이언트에서 모든 아이템 정보 불러오기
2. 특정 아이템을 선택
3. 삭제 버튼을 클릭하여 DELETE 요청 진행
4. 웹 서버에서 삭제 요청 정보 수락
5. 데이터 검증 후 DB 서버에 삭제 요청 진행
6. 트랜잭션 처리 후 결과 DB서버에 전송
7. DB커밋 후 결과 웹 클라이언트에 전송
8. 전송 결과 사용자에게 노출

 

UpdateItem.vue

<template>
  <div v-if="item">
    <h2>아이템 수정</h2>
    <div>
      <label>아이템 이름:</label>
      <input v-model="item.name" />
    </div>
    <div>
      <label>아이템 설명:</label>
      <input v-model="item.description" />
    </div>
    <button @click="updateItem">수정 완료</button>
    <button @click="deleteItem">삭제</button>
    <button @click="goBack">취소</button>
  </div>
  <div v-else>
    <p>아이템을 불러오는 중...</p>
  </div>
</template>

<script>
import updateItemLogic from '../assets/js/updateItem.js'; // 상대 경로로 import

export default {
  mixins: [updateItemLogic] // updateItem.js 로직을 mixin 형태로 사용
};
</script>

 

해당 컴포넌트는 아이템 목록에서 자세히 보기 버튼을 클릭 시 생성된다.

작성된 아이템 이름과 설명을 input박스에 출력한다.

수정 완료, 삭제, 취소 버튼 세개가 배치되며 각 버튼 클릭 시 파싱된 메서드를 실행한다.

 

이하 업데이트를 실제로 진행하는 로직은 별도의 자바스크립트 파일에서 다룬다.

vue파일 내에서는 그냥 해당 자바스크립트 파일의 경로를 import만 해준다.

 

 

updateItem.js

export default {
    data() {
      return {
        item: null
      };
    },
    mounted() {
      this.fetchItem();
    },
    methods: {
      async fetchItem() {
        const response = await fetch(`http://localhost:5000/items/${this.$route.params.id}`);
        const data = await response.json();
        this.item = data;
      },
      async updateItem() {
        if (!this.item.name) {
          alert('아이템 이름을 입력해 주세요');
          return;
        }
  
        try {
          const response = await fetch(`http://localhost:5000/items/${this.item.id}`, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(this.item)
          });
  
          if (!response.ok) throw new Error('아이템 수정에 실패했습니다.');
          alert('아이템이 수정되었습니다.');
          this.goBack();
        } catch (error) {
          alert(error.message);
        }
      },
      async deleteItem() {
        try {
          const response = await fetch(`http://localhost:5000/items/${this.item.id}`, {
            method: 'DELETE'
          });
  
          if (!response.ok) throw new Error('아이템 삭제에 실패했습니다.');
          alert('아이템이 삭제되었습니다.');
          this.goBack();
        } catch (error) {
          alert(error.message);
        }
      },
      goBack() {
        location.href = '..';
      }
    }
  };

업데이트가 아마 모든 로직중에 가장 길 것이다.

예외처리가 가장 많을 뿐더러 보통은 delete 메서드와 함께 있기 때문이다.

 

자세히 보기 버튼 클릭 시 해당 아이템의 테이블과 id를 얻어온다.

해당 테이블을 URL로, id를 파라미터로 웹 서버에 전달하여 PUT, DELETE 요청을 진행한다.

요청이 완료된 후에는 goBack함수를 호출하여 상위 depth로 이동해 아이템 목록을 다시 불러온다.

 

 

update_item(item_id)

@api_bp.route('/items/<int:item_id>', methods=['PUT'])
def update_item(item_id):
    data = request.json
    item = Item.query.get(item_id)
    if not item:
        return jsonify({'message': 'Item not found'}), 404

    item.name = data['name']
    item.description = data['description']
    db.session.commit()
    return jsonify({'message': 'Item updated'})

 

/items/item_id로 날라온 PUT요청을 update_item메서드에서 처리한다.

item_id를 매개변수로 받아, Item테이블에 있는 해당 아이템 정보를 가져와 item을 가져온다.

아이템을 찾을 수 없다면 404에러를 던진다.

item테이블에 수정작업을 거친 후 db정보를 커밋하고 결과를 리턴해 준다.

 

 

delete_item(item_id)

@api_bp.route('/items/<int:item_id>', methods=['DELETE'])
def delete_item(item_id):
    item = Item.query.get(item_id)
    if not item:
        return jsonify({'message': 'Item not found'}), 404

    db.session.delete(item)
    db.session.commit()
    return jsonify({'message': 'Item deleted'})

 

마찬가지로 라우트에 기재된 URL로 들어온 DELETE요청은 delete_item 메서드를 통해 처리한다.

id값을 매개변수로 받아 삭제 작업을 처리하고 결과를 리턴해준다.

 

 

PUT 실행

PUT 관련 요청을 실행하고, 결과를 추적해 보자

 

웹 클라이언트를 실행 후 초기 화면이다.

현재 아이템 목록엔 총 6개의 아이템이 존재하는 것을 볼 수 있다.

 

 

자세히 보기 버튼 클릭 시 아이템 수정 관련 컴포넌트가 생성된다.
아이템 설명에 임의의 정보를 입력 후 수정 완료 버튼을 클릭해 보자

 

 

아이템 수정이 완료되었다는 메시지 박스가 출력되었다.

 

아이템 목록에서도 기존 NULL상태였던 아이템 설명에 입력한 대로 추가된 점이 확인된다.

 

 

웹 서버에서도 PUT 관련 로그가 찍혔다.

 

테이블을 확인해 보아도 설명이 정상적으로 수정된 것이 보여진다.

 

 

DELETE 실행

DELETE 관련 요청을 실행하고 결과를 추적해보자

삭제 버튼을 클릭하였더니 아이템이 삭제되었다는 메시지 박스가 출력되었다.

 

 

아이템 목록에서 tempItem이 사라진 것을 확인할 수 있다.

 

 

웹 서버에서 DELETE 요청을 정상적으로 받아 처리한 로그를 확인할 수 있다.

 

 

DB상에서도 이름이 tempItem이던 레코드가 정상적으로 삭제되었다.