서버를 띄워봤는데 이상한 에러메세지가 뜬다면 EJS <% %>문법이 잘못된 것이니 잘 살펴보십시오.
이제 삭제버튼을 누르면 DELETE 요청을 하도록 코드를 짤 것입니다.
간지나는 AJAX를 써서 삭제요청을 해보도록 합시다.
요청은 4개 종류가 있다고 했습니다. GET POST PUT DELETE
하지만 HTML 폼에서 일반적으로 PUT DELETE 요청을 할 수는 없습니다.
이런거 안됩니다. 일반적인 HTML 폼 안에선 GET, POST 요청밖에 못날립니다.
(HTML이라는 언어를 만들 때 잘못 만든 겁니다)
그래서 삭제요청을 할 때 쓸 수 있는 3가지 방법이 있습니다.
1. method-override 라이브러리의 도움을 받는다
2. AJAX로 DELETE 요청을 날린다
3. 그냥 POST요청을 날려서 DELETE 작업을 수행한다
우린 2번 방법으로 해보도록 합시다.
실은 3번이 가장 편합니다. POST로 삭제하라고 요청해도 전혀 상관 없습니다.
근데 REST한 API를 만들기 위해 1번과 2번을 쓰는 것일 뿐입니다.
AJAX 는 무엇인가
실은 별거 아닌데 프론트엔드에서 JavaScript를 이용해 서버에 여러가지 요청을 할 수 있는 문법 같은 것입니다.
장점은 새로고침 없이도 서버에 몰래몰래 요청을 할 수 있습니다.
그래서 새로고침이 없는 스무스한 사이트를 만들고 싶으면 많은 요청을 AJAX 문법을 이용해 처리하게 됩니다.
그래서 이걸 써서 개발하면 삭제 버튼을 누르는 순간 새로고침 없이도 글 삭제가 가능합니다.
AJAX를 쓰기 위한 jQuery 설치
쌩 자바스크립트로도 AJAX가 가능하지만 코드가 길어서 정신건강을 위해 jQuery를 설치합니다.
실은 근데 이미 설치가 되어있습니다.
여러분 list.ejs 파일에 Bootstrap이 정상적으로 설치가 잘 되었다면 이런 코드를 발견하실 수 있습니다.
이 코드가 바로 jQuery를 CDN 방식으로 설치하는 부분이라고 보시면 되겠습니다.
(CDN은 다른 사이트에서 호스팅해주는 jquery 파일을 내 HTML에 적용해주세요~ 라는 뜻입니다.)
하지만 그냥 쓸 순 없습니다. jQuery Slim 버전인데 이걸가지고 AJAX요청이 불가능합니다.
빨리 이 부분을 이렇게 수정합니다.
1. slim이라는 글자를 지우고 2. 뒤에 있는 이상한 긴 글자들을 제거합니다.
이렇게 써주셔야 정상적으로 AJAX 기능이 들어있는 jQuery 라이브러리를 설치할 수 있습니다.
이제 이거 하단에 코드 이렇게 짤겁니다.
AJAX 기본 문법
지금 뭘 쓴거냐면.. /add 경로로 POST 요청을 하는데 요청과 함께 '응가하기' 라는 데이터를 보내주세요~ 라는 것입니다.
그럼 서버는 요청을 처리해줍니다. 이게 AJAX 기본 문법 끝입니다.
이 코드는 언제 실행되냐면.. script 태그 안에 그대로 넣으시면 list.ejs 페이지를 방문할 때 마다 바로 실행됩니다.
근데 새로고침 현상이 없으니 요청이 성공한지 실패한지 전혀 모르죠?
그래서 완성형 문법을 공개합니다. 이렇게 치십시오.
/add 경로로 POST 요청을 하는데 요청과 함께 '1번게시물' 이라는 데이터를 보내주세요~ 라고 썼습니다.
그리고 뒤에 .done .fail 이런 함수들을 붙여서 쓰실 수 있는데 각각 설명은 위에 한글로 설명해놓은게 답니다.
AJAX가 필요할 때마다 이거 그대로 복붙해서 쓰시면 됩니다.
그럼 서버는 이런 코드를 작성하면 삭제기능이 완성되지 않을까여
다음포스팅에서 삭제기능을 완성해봅시다
<출처 : 코딩애플 : Node.js, MongoDB로 2시간 만에 빠르게 웹서비스 만들기>
'Node.js' 카테고리의 다른 글
| AJAX로 삭제요청하기 3 (jQuery를 이용한 UI 기능) & 여러가지 응답방법 (0) | 2022.06.10 |
|---|---|
| AJAX로 삭제요청하기 2 (서버는 뭘해야하나) (0) | 2022.06.10 |
| 게시물마다 번호를 달아 저장하려면 (0) | 2022.06.10 |
| HTML에 DB데이터 꽂아넣는 법 (EJS & DB데이터 읽기) (0) | 2022.06.09 |
| MongoDB에 자료 저장하는 법 (0) | 2022.06.09 |