TIL 20230519

728x90

오늘 목표

TIL 리뷰

TIL 작성

프로그래머스 코딩테스트 입문 : 최빈값 구하기 (복습)

모던자바스크립트 읽기

모두의 깃 & 깃허브 섹션 0, 1

오늘 한 것

TIL 리뷰

TIL 작성

삭제하기 버튼 구현

호빵맨 미스터리 해결

1. 문제

방명록 1개에 달려있는 삭제하기 버튼을 누르면

입력 값 없이 그 방명록이 삭제되게 하고 싶음.

시도



        function del_comment() {

            let delnickname = $('#delnickname').val()

            let formData = new FormData();
            formData.append("delnickname_give", delnickname);

            fetch('/comments', { method: "DELETE", body: formData }).then((res) => res.json()).then((data) => {

                alert(data["msg"]);
                window.location.reload()
            });
        }

해결

del_comment('${nickname}') 이라는 함수를 버튼에 부여하여

자동으로 닉네임 값이 따라 붙게 만든다.

여기서 '' 소괄호는 문자열로 바꾸는 건데 문자열 값이 필요하므로 그렇게 한다.


                    let temp_html = `<div class="card">
                                    <div class="card-body">
                                        <blockquote class="blockquote mb-0" id="blockquote">
                                            <p>${comment}</p>
                                            <footer class="blockquote-footer">${nickname}</footer>
                                            <button type="button" class="btn btn-dark" onclick="del_comment('${nickname}')">삭제하기</button>`
                    $('#comment-list').append(temp_html)



        function del_comment(nickname) {

            let delnickname = nickname
            let formData = new FormData();
            formData.append("delnickname_give", delnickname);

            fetch('/comments', { method: "DELETE", body: formData }).then((res) => res.json()).then((data) => {

                alert(data["msg"]);
                window.location.reload()
            });
        }

알게된 것

문자열은 무조건 '' 안에 있는 것

나머지는 변수

변수는 선언을 해야 사용할 수 있다 > 안 그러면 에러 남

검색 팁 : Js 백틱 문자열 합치기 , Js 백틱 안에 문자열

[문자열을 합치는 방식]

안녕하세요 + 이다영

` 안녕하세요 ${이다영}` 백틱을 사용할 때 ${}로 넣을 수 있다.

클라이언트에서 자료를 넘길 때는 무조건 문자열로 넘긴다.

자바스크립트에서 형을 강제한 언어가 타입스크립트

2. 호빵맨이 왜 출력되는가

문제

우리 페이지에는 방명록 리스트에 호빵맨이라고 하는 것이 있다.

이것은 우리가 리스트 안에 하드코딩한 내용인데

웹개발 종합반에서는 이것을 empty() 를 활용하여 지웠다.

그런데 이번에는 empty()로 지우니 페이지가 로드 될 때 반짞 빛났다 사라졌다.

시도

변수호이스팅처럼 뭔가 먼저 실행되는 파트가 있는 게 아닐까?

해결

튜터님을 찾아감

> 하드 코딩이 되어 있어서 처음에 페이지가 렌더링 될 때 살짝 보이는 것이다.

console.log로 찍어 보자.

알게 된 점

호빵맨을 애초에 그냥 하드코딩 하지 않아도 된다.

empty로 지울 필요 없이 작성하지 않고 comment-list를 비워두자!

[추가로 배운 것]

처음에 comment_list가 있음

→ 페이지를 최초에 접속할 때는 GET/ comments라는 API를 호출해서 동적으로 값을 채우는 것

→ DELETE/ comments/ :id (e.g. DELETE/ comments/63)

처리하는 방법 (1번 추천)

1) Delete/ comments/63 호출결과가 OK면 (HTTP Response code:2XX)

→ comment_list에서 해당 코멘트 인덱스를 찾아서 그 친구만 삭제를 해줌

(비추천)

2) GET/comments를 재호출해서 디비에서 또 갖고오셔서 rendering함.

정리