내일배움캠프_TIL_2022.12.16

지난번 작성했던 메인페이지 부분에서 본인이 신청한 워크샵 삭제 기능을 구현하기 위해 위와 같이 '삭제'버튼을 만들었는데 작성한 코드는 아래과 같다. onclick 버튼을 통해 'myPageAppliedWorkshop_del_fuc()'를 실행하도록 한 후, 

 

- 클릭 시 바로 삭제 시키는 것이 아닌, 선택/취소 여부를 결정하기 위해 'confirm' 사용

- 선택을 눌렀을 때 alert "삭제되었습니다"를 표시한 후 삭제 후 삭제된 정보를 바로 반영하기 위해 window.location.reload()실행

 

const awTableThDeleteNum = document.createElement('th')
                awTableThDeleteNum.setAttribute('class', 'mypage-appliedworkshop-table-th-delete')
                awTableThDeleteNum.setAttribute('id', 'mypage-appliedworkshop-table-th-delete' + (i + 1))
                const awTableThDeleteButton = document.createElement('button')
                awTableThDeleteButton.setAttribute('onclick', 'myPageAppliedWorkshop_del_fuc()')
                awTableThDeleteButton.innerText = '삭제'
                awTableThDeleteButton.setAttribute('class', 'mypage-appliedworkshop-table-th-delete-button')
                awTableThDeleteNum.appendChild(awTableThDeleteButton)
                awTableTrNum.appendChild(awTableThDeleteNum)
                
                
    ......
    
    async function myPageAppliedWorkshop_del_fuc() {

    var alert_select = confirm("삭제 하시겠습니까?");
    if (alert_select) {
        alert("삭제 되었습니다")
        const response = await fetch(`${back_end_url}` + '/workshops/' + 1 + '/apply/', {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": `Bearer ${token}`,
                },
                body: JSON.stringify({}),
            })
            .then(response => response.json())
            .then(data => { console.log(data) });
        window.location.reload()
    } else {
        alert("취소 되었습니다");
    }
}

 

- fetch의 method가 POST인 이유는  권한이 있는 자가 (token) 해당 url에 post를 보내면 아래와 같이 신청이 접수 또는 취소되도록 백엔드 로직을 작성했기 때문

"msg": "워크샵 신청을 접수했습니다."

"msg": "워크샵 신청을 취소했습니다."

 

- headers에는 "Content-Type" 뿐만 아니라, "Authorization" 도 반드시 표기해야 한다.