form태그로 REST FUL 가능할까?

목차
1. GET과 POST만 지원해?
2. REST FUL은 어떻게 해?

1. GET과 POST만 지원해?

웹을 개발할 때 REST FUL에 관한 이야기를 많이 들었을 것이다. 그래서 REST방식으로 서버와 데이터를 주고 받으려고 하는데 서버에 데이터를 전송하기 위한 form태그의 method가 GET과 POST만 가능하다? 

실제로 form태그에 method를 GET,POST가 아닌 것으로 설정 후 서버에 요청을 하면 요청 메서드가 GET으로 초기화된다.

 

왜 form은 다른 요청 메서드를 지원하지 않을까?

HTTP가 처음 만들어질 때는 단순히 서버에 데이터를 요청(GET)하거나 서버에 데이터를 제출(POST)하는 것만으로 충분한 기능을 제공했고 다른 요청 메서드타입을 필요없기 때문이다. 또한 form태그 자체가 데이터를 서버에 전송하기 위한 태그이기 때문에 두 요청 메서드 외에는 필요로 하지 않는다. 

 

2. REST FUL은 어떻게 해?

그렇다면 REST FUL은 말뿐이고 구현은 할 수 없는 것일까? 물론 방법이 존재한다. 어떤 방법이 있는지 알아보자.

1 ) 비동기 서버 통신 라이브러리 사용

자바스크립트에서는 서버와 통신하기 위한 ajax, axios, fetchAPI같은 라이브러리 등이 존재한다. 해당 라이브러리를 사용한다면 서버와 통신할 때 데이터를 전달하면서 요청 메서드도 자유롭게 지정이 가능하다. 

$.ajax({
    url: '요청경로',
    method: '요청메서드',
    data : '전송할 데이터',
    dataType : '데이터의 타입',
    success: function (data, status, xhr) {
        성공시 처리내용
    },
    error: function (data, status, err) {
        실패시 처리내용
    },
    complete: function () {
        통신 완료시 처리내용
    }
});

 

2 ) 외부 모듈 사용(method-override)

서버 사이드 렌더링이라면 서버 측에서 외부모듈을 사용하여 요청 메서드를 변경할 수 있다. 외부 모듈이기 때문에 npm을 통해 설치를 해주어야 하며 form태그의 지정한 요청 메서드는 post지만 action 끝에 쿼리스트링으로 요청 메서드를 명시해주면 서버에 요청이 왔을 때 쿼리스트링을 분석하여 원하는 요청 메서드로 라우팅을 해준다.

html

<form action="/update?_method=PUT" method="POST">
    <input type="text" name="test">
</form>

server.js

const express = require("express");
const methodOverride = require('method-override')
const app = express();

app.use(methodOverride('_method'))

app.put("/update",()=>{
    console.log("수정 메서드 ")
});

app.get("/",(req,res)=>{
    res.render("index");
})

app.listen(3000,()=>{
    console.log("server start")
})