list.ejs - 삭제기능 구현 오류

<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)