.jpg)
HTML의 GET, POST 요청 메소드 한계를 Ajax를 통한 해결
Table of Content
REST API
HTML 폼(form) 요소는 기본적으로 GET과 POST 메서드만 지원하고 있다. 프론트의 form action의 method 속성을 put으로 변경하고 백엔드 라우터 또한 app.put()으로 변경해도 작동하지 않는다.
현재 CRUD 기능에서 Create(POST), Read(GET), Update(POST), Delete(POST)으로 구성되어 있다.
하지만 하지만 우리는 RESTful API에서 각 기능별 적절한 HTTP Method를 선택해야하기 때문에 REST API를 지향하기 위해서는 요청 메소드 자체의 문제가 있다. 일반적으로 RESTful API 디자인에서는 업데이트는 PUT 메서드, 삭제는 DELETE 메서드를 사용하는 것이 관례적이다.
Ajax요청을 위한 jQuery 참조
HTML 폼에서는 PUT과 DELETE 메서드를 지원하지 않기 때문에 외부 라이브러리를 사용해야 한다. 우선 현재까지도 활용 되는 레거시 프로젝트 중에 AJAX 라이브러리가 있다. AJAX는 전통적인 HTML <form>에서 RESTful 아키텍처로 발전하는 데 중요한 전환점이 된 모듈 중 하나다.
•
하지만 아래와 같은 코드 처럼 아직까지 복잡해보이는 코드 구조를 가지고 있었다. 첫줄에서처럼 XMLHttpRequest 객체를 통해 처리했음
// 순수 JavaScript를 사용한 GET 요청 예시
const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
const url = 'https://api.example.com/data'; // 요청할 URL
xhr.open('GET', url, true); // 요청 초기화
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // 요청이 완료되었을 때
if (xhr.status === 200) { // 요청이 성공했을 때
const data = JSON.parse(xhr.responseText); // 응답 데이터 파싱
console.log('데이터:', data);
} else {
console.error('에러:', xhr.statusText); // 에러 처리
}
}
};
xhr.send(); // 요청 전송
JavaScript
복사
•
하지만 jQuery라는 라이브러리를 통해서 위 Ajax 요청을 더욱 쉽고 가독성 높게 아래 처럼 변경되었다. 보다 개발자 친화적으로 사용하기 편리하여 현재까지도 사용되기도 한다.
// jQuery를 사용한 GET 요청 예시
$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
success: function(data) {
console.log('데이터:', data);
},
error: function(error) {
console.error('에러:', error);
}
});
JavaScript
복사
jQuery를 통해 Ajax 요청문으로 활용하여 각 HTTP Method를 RESTful 하게 리팩토링 하고자 한다. 해당 라이브러리를 사용하려면, 먼저 jQuery를 프로젝트에 CDN을 통해 추가해야 한다. NPM을 통해 Node에 추가할 수도 있지만, 하지만 일반적으로 jQuery는 클라이언트 측에서 사용되는 라이브러리이기 때문에, Node.js에서 직접 사용하기보다는 웹 애플리케이션에서 클라이언트 측으로 제공하는 방식을 사용한다.
모든 페이지들의 공통 레이아웃인 header.ejs의 head 태그에 해당 코드를 작성한다.
<!-- jQuery 추가 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
JavaScript
복사
contactList.ejs의 수정, 삭제 ajax 요청으로 수정
버튼에 온클릭 이벤트를 통해 ajax요청을 보낼 수 있도록 설정한다. 요청 type에 ‘PUT’, ‘DELETE’로 REST API 규칙에 맞도록 작성 할 수 있다.
<%-include('header.ejs')%>
<h2>문의 목록입니다.</h2>
<table border="1">
<tr>
<th>id</th>
<th>name</th>
<th>phone</th>
<th>email</th>
<th>content</th>
<th>create_at</th>
<th>modify_at</th>
<th>status</th>
<th>DONE</th>
<th>DELETE</th>
</tr>
<% lists.forEach(function(item) { %>
<tr>
<td><%=item.id%></td>
<td><%=item.name%></td>
<td><%=item.phone%></td>
<td><%=item.email%></td>
<td><%=item.memo%></td>
<td><%=item.create_at%></td>
<td><%=item.modify_at%></td>
<td><%=item.status%></td>
<td>
<button type="button" onclick="updateContact(<%=item.id%>)">UPDATE</button>
</td>
<td>
<button type="button" onclick="deleteContact(<%=item.id%>)">DELETE</button>
</td>
</tr>
<% }) %>
</table>
<script>
function updateContact(contactId) {
// AJAX를 사용하여 PUT 요청 보내기
$.ajax({
url: `/api/contactUpdate/${contactId}`,
type: 'PUT',
success: function(response) {
// 업데이트 성공 시의 처리
alert('문의사항이 업데이트되었습니다.');
location.reload(); // 페이지 새로고침 또는 다른 업데이트 방식 선택
},
error: function(error) {
// 오류 처리
console.error('업데이트 오류:', error);
}
});
}
function deleteContact(contactId) {
// AJAX를 사용하여 DELETE 요청 보내기
$.ajax({
url: `/api/contactDelete/${contactId}`,
type: 'DELETE',
success: function(response) {
// 삭제 성공 시의 처리
alert('문의사항이 삭제되었습니다.');
location.reload(); // 페이지 새로고침 또는 다른 삭제 방식 선택
},
error: function(error) {
// 오류 처리
console.error('삭제 오류:', error);
}
});
}
</script>
<%-include('footer.ejs')%>
JavaScript
복사
API의 메소드 수정
app.js에서 app.post() 로 구성되었던 API들을 각각 용도에 맞도록 수정한다. 수정은 PUT, 삭제는 DELETE 메소드를 사용한다.
app.delete('/api/contactDelete/:id', (req, res) => {
const id = req.params.id;
const deleteQuery = `delete from contact where id='${id}'`;
connectionPool.query(deleteQuery, (err, result) => {
if (err) {
console.error('데이터 삭제 중 에러 발생:', err);
res.status(500).send('내부 서버 오류');
} else {
console.log('데이터가 삭제되었습니다.');
res.send("<script>alert('문의사항이 삭제되었습니다.'); location.href='/contactList'</script>");
}
});
});
app.put('/api/contactUpdate/:id', (req, res) => {
const id = req.params.id;
const status = "done";
const updateQuery = `UPDATE contact SET status = '${status}' WHERE id = '${id}';`;
connectionPool.query(updateQuery, (err, result) => {
if (err) {
console.error('데이터 업데이트 중 에러 발생:', err);
res.status(500).send('내부 서버 오류');
} else {
console.log('데이터가 업데이트되었습니다.');
res.send("<script>alert('문의사항이 업데이트되었습니다.'); location.href='/contactList'</script>");
}
});
});
JavaScript
복사
PUT과 DELETE 메소드로 수정 후 정상적으로 작동하는 기능을 확인
Related Posts
Search
