내일배움캠프 5일차 코드 정리

오늘은 코드추가보단 최적화와 수정위주로 작업을했다.

 

댓글 수정시 수정한 댓글이 화면에 안나오는 이슈와 삭제시에도 동일한 이슈가 발생하였다.

 

그래서 코드를 계속 수정하고 동작하는데에만 시간이 오래걸렸다. 또한 오늘이 프로젝트 시연날이라 더욱 급한 마음이 들기도 해서 잘 안되기도 하였다.

 

function updatecomments(i, n, c) {

            //name

            //let text = $(tx).val();

            let tx = '#staticBackdrop' + i + ' textarea';

            let text = $(tx).val();

            if (text.length == 0) {

                alert('코맨트를 입력하세요')

                return false;

            }

            let form_data = new FormData();

            form_data.append('name_give', n);

            form_data.append('cid_give', c);

            form_data.append('text_give', text);

            let url = '/updatecomments';

            fetch(url, { method: "PUT", body: form_data }).then((res) => res.json()).then((data) => {

                alert(data['result'])

                getcomments(i);

            })

        }

수정전

 

function updatecomments(i, n, c) {

            //name

            //let text = $(tx).val();

            //let t = '#staticBackdrop' + i + ' tbody';

            let tx = '#collapseExample' + i + ' textarea';

            let txt = '#cmttext' + i;

            let text = $(tx).val();

            if (text.length == 0) {

                alert('코맨트를 입력하세요')

                return false;

            }

            let form_data = new FormData();

            form_data.append('name_give', n);

            form_data.append('cid_give', c);

            form_data.append('text_give', text);

            $(txt).text(text);

            let url = '/updatecomments';

            fetch(url, { method: "PUT", body: form_data }).then((res) => res.json()).then((data) => {

                alert(data['result'])

                return true;

                console.log("수정");

            })

        }

수정후이다

getcomments를 가져오는대신 직접 수정하는걸로 코드를 바꿔보았다. 그리고 밸류값을 직접 바꿔주는 형식으로 하였다.

 

 function deletecomments(i, n, c) {

            let url = '/deletecomments?name=' + n + '&cid=' + c;

            fetch(url, { method: "DELETE" })

                .then((res) => res.json())

                .then((data) => {

                    alert(data['result']);

                    // 댓글이 성공적으로 삭제된 후 모달 내용 업데이트

                    getcomments(i);

                });

        }

수정전

function deletecomments(i, n, c) {

            let t = '#comment' + i;

            let url = '/deletecomments?name=' + n + '&cid=' + c;

            fetch(url, { method: "DELETE" })

                .then((res) => res.json())

                .then((data) => {

                    alert(data['result']);

                });

            $(t).remove();

            console.log("삭제");

        }

수정후

 

또한 삭제도 동일하게 모달 내용을 업데이트하기보단 직접 태그를 지우는 형식으로 클라이언트를 보이게 하였다. 몰론 서버에도 동일하게 삭제가 된다.

 

지금까지 프로젝트를 하면서 자바스크립트를 많이 검색해보고 작성도 해보고 하였는데 쉽지않지만 할려면 할 수 있다는걸 알게 되었으니 앞으로도 할 수 있을거란 자신감을 가지며 다음주를 준비해야겠다.