23/11/24 TIL __ ejs를 이용해 express 환경에서 설계된 내용을 보여주자 2

 

 

🏞️   상황

프로젝트를 진행할 때에 ejs를 활용해서 데이터를 보여주는데 성공했다.

그리고 버튼을 클릭했을때, 파람스로 값을 전달하면서 router를 동작시키는 데에도 성공했다.

근데 문제는 post나 get 요청이 아닌 이외의 요청이였다.

그부분에 대해 찾아보았다.

 

 

📷  ejs 로 delete 요청 , put , patch 요청하기. 

 

form 태그로 전송하는 방식을 사용했는데, 

문제는 form태그는  put 요청이나 patch 요청, delete 요청을 처리할 수 없었다.

아무리 적어도 계속 작동하지 않아서 당황햇는데, 원래 처리할 수 없는걸 적고 있었던 것.!!

 

 

 

이에대한 방법을 찾다보니 꼼수를 발견했다. 

  <form action="/api/user/<%= userId %>" method="POST">
    <input type = 'hidden' name="_method" value="DELETE" onclick="location.href = '/api/user/<%=userId%>'">임시용_회원 탈퇴하기<button>d</button></input>
  </form>

 

 

form 태그에는 post로 요청을 보내주고, 

그 안에 input태그를 주어서, 해당 태그의 속성을 위와 같이 적고 value에는 실제로 요청하려 하는 메소드를 적어주면, 된다.

그러나 이 방법의 단점은 router에서 delete 메소드가 아니라  post 메소드로 바꿔줘야 한다.

그러다 보니 주소값이 겹칠 우려가 있다.

그닥 좋은 방법은 아닌듯 했다.

 

 

 

다른 방법으로 이런 방법도 있었다.

npm i method-override 

 

이 node.js 모듈을 설치하면 router의 요청을 post 로 바꾸고, 주소값을 변경하는 번거로운 일을 하지 않아도 된다.

 

아래는 해당 모듈의 깃허브 사이트에서 가져온 내용이다

---

쿼리 값을 사용하여 재정의

쿼리 문자열 값을 사용하여 메서드를 재정의하려면 쿼리 문자열 키를 함수에 대한 문자열 인수로 지정합니다 methodOverride. 그런 다음 호출하려면 POST재정의된 메서드를 해당 쿼리 문자열 키 값으로 사용하여 URL에 요청을 보냅니다. <form>쿼리 값을 사용하는 이 방법 은 레거시 브라우저를 지원하려고 할 때 일반적으로 일반 HTML 요소와 함께 사용되지만 여전히 최신 방법을 사용합니다.

var express = require('express')
var methodOverride = require('method-override')
var app = express()

// override with POST having ?_method=DELETE
app.use(methodOverride('_method'))

 

HTML을 사용한 쿼리 재정의 호출 예시 <form>:

<form method="POST" action="/resource?_method=DELETE">
  <button type="submit">Delete resource</button>
</form>

---

 

action에 주소값을 적고, 그 이후로 ?_method=원하는요청  을 적어주면 해결되기에

오히려 간단하다.

 

 

🫠  느낀점

ejs로 백과 프론트를 연결하는게 처음이라 어려웠지만,

이번에 경험해 봤으니 다음엔 좀더 잘 할 수 있을 것같다.

 

그리고 ejs의  delete 요청 과 같은 부분은 좀 불편하다고 느껴졌었는데,

해당 모듈을 설치해서 사용하니 괜찮은 것 같다.

 

다만 다른 방법으로 프론트와 백을 연결하는 건 아직 해보지 않아서 

나중에 한번 경험해 보고 싶다.

 

 

 

참고한 사이트

https://github.com/expressjs/method-override

GitHub - expressjs/method-override: Override HTTP verbs.

https://victorydntmd.tistory.com/29

[Node.js] sequelize(3) - CRUD + RESTful 게시판 만들기