[Node+MongoDB]삭제기능3 (AJAX 예외처리)

AJAX 사용하면 서버가 보낸 데이터를 보내볼 수(출력) 있다.
list.ejs파일에 script태그 내에 fetch함수에 .then()을 사용하는 것으로

            .then((r)=>r.text())
            .then((r)=>{ console.log(r) })

해당 코드를 추가해주자

서버가 보내는 것이 문자인 경우: .text사용
서버가 보내는 것이 array/object: .json사용

저장 후 브라우저 콘솔창을 확인해보면

잘 뜬다..
참고로 server.js에 .send도 넣어둠

참고로 현재 list에서 게시글 제목을 클릭하면 상세페이지 html을 받아오게 되어있는데,
클릭시 상세페이지 html이 아니라 글제목&내용만 ajax로 받아오는 방법도 있다.
이걸 ssr(서버사이드렌더링)과 csr(클라이언트사이드렌더링)으로 나눠볼 수 있는 것..

✨AJAX 예외처리

      fetch('/URL')
      .then((r)=>{
        if(r.status === 200) {
          return r.json()
        } else {
          // 서버가 에러코드 전송시 실행할 코드
        }
      })
      .then((result)=>{
        // 성공시 실행할 코드
      }).catch((error)=>{
        // 인터넷문제 등으로 실패시 실행할 코드
        console.log(error)
      })

이게 너무 길다면 axios 라이브러리를 사용해주면 되는데,
홈페이지에 잘 나와있으니 우선 참고!

1. 가져온 script파일을 잘 붙이고..

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. get요청을 받는 경우 이런 식으로

      axios.get('/URL').then((r)=>{
        console.log(r)
      }).catch(()=>{
        
      })

사용해주면 된다..

react 공부하면서 axios를 정말 많이 썼는데..
포스팅을 했는지 확인해보고 안되어있다면 axios는 따로 정리해야겠다..!

✨UI애니메이션

현재 삭제 버튼을 클릭하고 새로고침을 해줘야 반영이 되는데,
해당 부분을 UI애니메이션을 통해 보이지 않게 처리해주자.

(버튼 눌러서 삭제요청이 완료되면 그 버튼 상위 상위에 있는 html이 보이지 않게 만들기)

1. 아래 script태그에 있는 eventListener로 가보자
   e.target이 현재 클릭한 요소를 찾아주는 것인데, parentElement를 사용하면 그 요소의 부모 요소를 찾아준다.. 그러니 parentElement를 두 번 작성해주면 될 것!
   
   우선은 이런 식으로..
   그 이후 style 조정으로 display:none을 넣어주자

e.target.parentElement.parentElement.style.display = 'none'

✔삭제기능 만들며 알게된 것들

1. ajax 사용하면 새로고침 없이 요청 가능
2. ajax 잘 사용하면 CSR도 가능
3. html에 데이터 숨겨놓으면(dataset) 클릭하여 가져오기 편리
4. ajax 에러시 예외처리 방법
5. axios 등 외부 라이브러리 유용하게 쓰임