기능 정리를 해보면 글 삭제 버튼을 누르면 해당 글 DB에서 삭제해주기
- 글 삭제버튼 누르면 서버로 요청
- 서버는 확인 후 해당 글 DB에서 삭제
브라우저 주소창에 a 혹은 form태그를 사용하여 서버로 GET, POST 요청이 가능한데, 이와같은 경우는 매번 새로고침이 되기 때문에 해당 단점의 개선을 위하여 AJAX를 사용한다.
AJAX를 사용하면 새로고침 없이도 서버로 요청이 가능하다!
1. 삭제 버튼을 누르면 서버로 요청(ajax 사용)
- 지난 번에 작성했던
list.ejs파일에
<span class="delete">🗑️</span>span태그로 이모지를 넣어준다.
ajax 사용을 위해 아래에 script 태그를 열어 코드 작성
<script>
document
.querySelectorAll(".delete")[0]
.addEventListener("click", function () {});
</script>querySelector를 이용하여 class명이 delete인 html중 0번째를 찾아
addEventListener로 클릭 이벤트를 넣어 클릭 이벤트가 발생 시 함수를 실행할 수 있도록 해준다.
이제 ajax로 서버에 요청을 날리기 위해 fetch()를 사용
fetch함수를 사용해주면 새로고침 없이도 GET요청을 날릴 수 있다.
POST, PUT, DELETE요청을 ajax를 통해 하고싶은 경우
아래 method : 'POST'의 POST위치에 원하는 method를 넣어주면 된다.
👏여기서 잠깐! AJAX 맛보고 넘어가기!
POST 요청을 ajax를 사용해서 데이터를 전송하고 싶은 경우
fetch('/url~~~', {
method: 'POST',
headers : {
'Content-Type' : 'application/json'
},
body : '데이터~~'
})
문자나 숫자의 경우 body에 이렇게 넣어주면 잘 표시가 되지만, object나 array형식은 자료를 문자(JSON)으로 바꿔주는 JSON.stringify()함수를 사용해주어야 한다.
테스트를 위해 아래와 같이 코드를 작성해준 뒤
<script>
document
.querySelectorAll(".delete")[0]
.addEventListener("click", function () {
fetch('/abc', {
method: 'POST',
headers : {
'Content-Type' : 'application/json'
},
body : JSON.stringify({a : 1})
})
});
</script>
서버 파일인 server.js로 가서 API를 하나 만들어주자
이렇게 작성했다면, 현재 첫 번째 쓰레기통 이모지를 누르면
post요청이 되어 안뇽ㅎㅎ와 { a : 1 }이 콘솔창에 출력되어야 한다.
잘 되니까 이제 서버로 데이터를 보내는 다른 방법에 대해서도 작성해보자면
- query string
- URL parameter
이런 방법으로도 데이터를 보낼 수 있다.
✨URL parameter 써서 서버로 데이터 전송하기
list.ejs에서 아래처럼 작성 후
server.js에서 url파라미터를 사용하여 get 요청을 받고,
요청.params로 파라미터 값을 콘솔창에 출력해보기
이러고 첫 번째 쓰레기통 이모지를 클릭해서 테스트해보면
콘솔창에 잘 찍힌다.
✨query string 써서 서버로 데이터 전송하기
fetch함수 내에 fetch("/abc?데이터이름=데이터값"); 이렇게 써두면 뒤의 데이터값이 작성한 데이터이름으로 서버로 전송된다.
20이라는 나이를 get요청을 통해 출력하고싶다고 한다면, 위처럼 작성해준 뒤 서버파일로 돌아가서
요청.query를 넣어준 뒤 첫 번째 쓰레기통 이모지를 눌리면
요것두 아까 기입한 { age: '20' }이 잘 나온다!
만약 여러 개의 데이터를 전송하고 싶은 경우에는 &기호로 연결할 수 있다.
이렇게 위의 두 가지 방법을 통해 서버로 데이터를 보내는 방법이 있다.
해당 방법 두 가지는 간편하지만 URL이 눈에 보이는 단점이 있다.
글이 길어져서 다시 본문으로 돌아와 삭제기능은 다음 포스팅에 이어해야겠다..ㅜㅜ
