<script>
<% for (let i=0; i<list.length; i++) {%>
document.querySelectorAll('.delete')[i].addEventListener('click', () => {
fetch('/delete?docid=<%= list[i]._id %>', {
method : 'DELETE'
})
})
<% } %>
</script>
원래는 ejs문법을 사용할 때 javascript에서 사용이 안되는 줄 알았다. 하지만 ejs 파일로 만들어서 사용할 수 있었고,
삭제 기능을 구현할 때 첫번째 글만 삭제할 수 있었다. 그렇지만 반복문을 통해 모든 기능을 구현하고 싶었는데, 오류가 계속 발생한다.
오류는 1번 글만 삭제할 수 있고, 나머지 글들은 삭제할 수 없다는 것이다. 내가 구현한 코드를 실행하면 에러가 발생하는데 이 에러는 ._id 구문의 앞에 있는 글까지의 속성을 읽을 수 없다는 에러메시지이다.
즉, `fetch('/delete?docid=<%= list[i].`까지는 읽을 수 있다. 결국 이 문장에서 docid라는 이름과 list[i] 둘 중 하나가 틀렸다고 판단했고, 여러 시도를 하다가 ejs 문법을 사용해서 문제를 해결했다.
ejs 문법 용도
<%= %>는 변수 값을 출력하기 위해 쓰이는 문법이다. 코드에 보면 <%= i %>를 출력할 때 =를 사용한다.
<% %>는 javascipt 문법을 사용하기 위해 쓰는 문법이다. ejs는 HTML 내에서 javascript 코드를 사용할 때 쓰인다.
<script>
<% for (let i=0; i<list.length; i++) {%>
document.querySelectorAll('.delete')[<%= i %>].addEventListener('click', () => {
fetch('/delete?docid=<%= list[i]._id %>', {
method : 'DELETE'
})
})
<% } %>
</script>
에러 발생 문구
TypeError: /Users/SaintKim/Documents/forum/views/list.ejs:29
27| for (let i=0; i<document.querySelectorAll('.listbox').length; i++) {
28| document.querySelectorAll('.delete')[i].addEventListener('click', ()=> {
>> 29| fetch('/delete?docid=<%= list[i]._id %>', {
30| method : 'DELETE'
31| })
32| })
Cannot read properties of undefined (reading '_id')
at eval ("/Users/SaintKim/Documents/forum/views/list.ejs":32:34)
at list (/Users/SaintKim/Documents/forum/node_modules/ejs/lib/ejs.js:703:17)
at tryHandleCache (/Users/SaintKim/Documents/forum/node_modules/ejs/lib/ejs.js:274:36)
at exports.renderFile [as engine] (/Users/SaintKim/Documents/forum/node_modules/ejs/lib/ejs.js:491:10)
at View.render (/Users/SaintKim/Documents/forum/node_modules/express/lib/view.js:135:8)
at tryRender (/Users/SaintKim/Documents/forum/node_modules/express/lib/application.js:657:10)
at Function.render (/Users/SaintKim/Documents/forum/node_modules/express/lib/application.js:609:3)
at ServerResponse.render (/Users/SaintKim/Documents/forum/node_modules/express/lib/response.js:1039:7)
at /Users/SaintKim/Documents/forum/server.js:41:7
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
'Node.js' 카테고리의 다른 글
Login - MongoDB (0) | 2024.02.09 |
---|---|
MongoDB 비밀번호 암호화 (2) | 2024.02.06 |
수정 오류 해결 - correction.ejs (0) | 2024.02.04 |
ejs - 문법 오류 에러 (0) | 2024.02.04 |
server.js - urlParams 오류 수정 (0) | 2024.02.04 |