22년 11월 18일 TIL

마침내 일주일의 끝이 보인다. 오늘은 특히 더 정신없었던것 같고 마무리를 잘해야겠다.

오늘은 코딩을 메인으로 한 것이 아니라 많이 쓸건 없을 것 같다.

 

어제는 완벽하게 이해하지 못해 쓰지 못한 함수를 설명해보겠다.

 

전체코드

$(document).on('click', '#corbtn', function () {
    let num = prompt('비밀번호를 입력하세요.')
    let id = $(this).attr('class')

    function find_comment(callbackfunc) {
        $.ajax({
            type: 'POST',
            url: '/fourglass/team2_find_cmt',
            data: {'id_give': id},
            success: function (response) {
                console.log(response['result'])
                let result = response['result']
                if (num === result[0]['pass']) {
                    callbackfunc(result[0]['idx'])
                } else {
                    alert("비밀번호가 일치하지 않습니다.")
                }
            }
        })
    }

    find_comment(function (idx) {
        let comment = prompt('내용을 입력해 주세요.')
        $.ajax({
            type: 'POST',
            url: 'fourglass/team2_cor_cmt',
            data: {'id_give': idx, 'comment_give': comment},
            success: function (response) {
                alert(response['msg'])
                location.reload()
            }
        })
    })
})

이 코드는 corbtn 이라는 id를 가진 버튼을 클릭하면 실행되는 코드로 최종적으로 댓글을 수정하는 기능을 갖고 있다.

먼저 $(this).attr('class')를 통해 이 객체의 class 속성의 값을 가져오고

prompt를 통해 num 에 비밀번호를 넣어준다.

그 후 아래의 함수가 실행된다.

function find_comment(callbackfunc) {
    $.ajax({
        type: 'POST',
        url: '/fourglass/team2_find_cmt',
        data: {'id_give': id},
        success: function (response) {
            console.log(response['result'])
            let result = response['result']
            if (num === result[0]['pass']) {
                callbackfunc(result[0]['idx'])
            } else {
                alert("비밀번호가 일치하지 않습니다.")
            }
        }
    })
}

$.ajax (POST 타입으로 /fourglass/team2_find_cmt라는 URL을 가진 API에 id_give라는 틀에 id값을 담아서 서버로 올라가고

성공시 함수를 실행한다. (받아온 데이터는 response로 들어가있다.) )

변수 result에 가져온 데이터의 'result' 값을 넣어주고 if문을 돌려 결과에따라 코드를 실행한다.

if (num === result[0]['pass']) {
    callbackfunc(result[0]['idx'])

만약 같다면 콜백함수를 실행한다. (result[0]['idx']값을 담아 간다)

find_comment(function (idx) {
        let comment = prompt('내용을 입력해 주세요.')
        $.ajax({
            type: 'POST',
            url: 'fourglass/team2_cor_cmt',
            data: {'id_give': idx, 'comment_give': comment},
            success: function (response) {
                alert(response['msg'])
                location.reload()
            }
        })
    })
})

이 함수에서는 변수 comment에 prompt를 통해 바꾸고 싶은 댓글의 내용을 입력해준다.

$.ajax(POST 타입, /fourglass/team2_cor_cmt 라는 URL, 변수idx와 comment의 값을 서버로 올려준다)

그 후 함수에서는 메세지를 띄워주고 페이지새로고침을 한다.

댓글 삭제 기능도 비슷하게 작동한다.

수정완료

아래의 코드는 callbackFunc을 검색한 결과다.

function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

getData(function(tableData) {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

함수에  함수를 중첩시키기 위해 콜백함수를 사용하고

위에 있는 코드가 끝난 후 이어서 실행되는 함수에 값이 넣어진 callbackFunc이 아래의 함수의 매개변수가 된 모습이다.

결과는 콘솔에 로그로 tableData를 띄워줄 것이다.