웹 애플리케이션을 개발하다 보면 사용자가 입력한 데이터를 기반으로 무언가를 생성해야 하는 상황이 반드시 찾아옵니다. 회원가입 폼을 통해 제출된 정보로 새 사용자 계정을 만들거나, 레시피 정리 앱에서 새로운 레시피를 등록하는 것이 대표적인 예입니다. 폼에 입력된 사용자 데이터를 데이터베이스에 저장된 새로운 레코드로 변환하려면 HTTP POST 요청이 필요합니다.
POST 요청은 폼의 데이터를 서버로 전송하여 백엔드나 API에서 처리한 뒤 데이터베이스에 저장하는 역할을 합니다. 기본적으로 폼을 제출하면 페이지 리디렉션이나 새로고침이 발생합니다. 소규모 앱이라면 큰 문제가 아니지만, 더 빠르고 매끄러운 사용자 경험을 제공하려면 이 기본 동작을 재정의해야 합니다.
jQuery의 post() 메서드를 사용하면 HTTP 요청을 보내고 응답을 받아 데이터를 화면에 표시하는 방식까지 직접 제어할 수 있으며, 리디렉션이나 새로고침 없이 모든 과정을 처리할 수 있습니다. 지금부터 post()가 어떻게 이 모든 일을 수행하는지 자세히 살펴보겠습니다.
post() 메서드 자세히 알아보기
HTTP 요청은 포착 게임과 비슷합니다. 브라우저가 API 엔드포인트를 통해 서버에 요청을 던지면, 서버가 응답을 다시 던져주는 구조입니다. post()는 생성 후 앱의 데이터베이스에 저장될 데이터를 해당 엔드포인트로 전송하는 역할을 담당합니다.
이를 종합해 보면 post()가 몇 가지 인수를 받는다고 짐작할 수 있습니다. 맞습니다! post()는 최대 4개의 인수를 받을 수 있지만, 여기서는 핵심적인 두 가지, 즉 목적지 URL과 해당 URL로 보낼 데이터에 집중하겠습니다.
$.post('/recipes', data)레시피 정리 앱 예제를 들어보겠습니다. jQuery 셀렉터 $로 시작해 post() 메서드를 호출하면, 데이터가 '/recipes' URL로 전송됩니다. 여기까지는 순조롭습니다. 서버에 데이터를 던졌으니, 이제 응답을 받을 준비만 하면 됩니다.
응답으로 돌아오는 것은 Promise 인터페이스를 구현하는 jQuery XHR 객체, 즉 jqXHR입니다. 다소 어려워 보일 수 있지만 걱정할 필요 없습니다. 결국 응답도 하나의 객체일 뿐이며, jQuery의 편리한 done() 메서드를 사용하면 이 객체를 훨씬 읽기 쉬운 형태로 정리할 수 있습니다.
포착 게임 비유를 이어가자면, post()로 서버에 데이터를 던지면 jqXHR 객체가 되돌아오고, 이 객체를 done()에 전달해 무엇을 받았는지 확인할 수 있습니다. 이제 post()를 충분히 살펴보았으니 실제 사용 방법을 알아보겠습니다.
jQuery post() 실전 예제
먼저 간단한 HTML 폼부터 시작합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h2>
New Recipe
</h2>
<form id='new-recipe'>
<label for="name">Recipe Name</label><br>
<input type="text" name="name" id="name"><br>
<label for="ingredients">Ingredients</label><br>
<input type="text" name="ingredients" id="ingredients"><br>
<button type="submit">
Create Recipe
</button>
</form>이 코드는 화면에 아래와 같은 폼을 표시합니다.
기본적으로 submit 버튼을 클릭하면 브라우저는 페이지를 새로고침하거나 리디렉션합니다. 앞서 우리는 페이지 새로고침과 리디렉션을 피하고 싶다고 했습니다. 페이지가 새로고침되거나 리디렉션되면 폼에 입력된 모든 데이터가 사라지기 때문입니다. 이를 방지하려면 JavaScript의 preventDefault() 메서드를 사용해야 합니다.
<script>
$(document).ready(() => {
$('#new-recipe').submit((event) => {
event.preventDefault();
})
})
</script>위 코드는 페이지, 즉 document가 로드될 때까지 기다린 후, id가 new-recipe인 폼에서 제출 버튼이 클릭되는 것을 감지합니다. 이는 클릭 이벤트를 인수로 받는 콜백 함수를 인자로 취하는 .submit() 메서드로 구현됩니다. 잠깐 복습하자면, JavaScript 콜백 함수란 나중에 실행하기 위해 다른 함수의 인수로 전달할 수 있는 함수를 의미합니다.
이 콜백 함수 내부에서 preventDefault()를 호출하면 기본 리디렉션 동작을 차단할 수 있습니다. 이제 리디렉션 없이 서버로 데이터를 전송할 준비가 되었습니다.
폼 데이터 가져오기와 serialize()
post()를 호출해 데이터를 보내기 전에, 당연히 먼저 데이터가 필요합니다. 그렇다면 이 데이터는 어디서 얻을까요?
바로 폼에서 가져옵니다. 더 이상 리디렉션하지 않으므로 폼의 텍스트 입력 필드 값에 자유롭게 접근할 수 있습니다. 그런데 serialize() 메서드는 어떤 역할을 할까요?
serialize() 메서드는 this 키워드로 선택한 폼에서 호출됩니다. serialize()는 폼 데이터를 서버로 전송할 수 있는 표준 URL 인코딩 형식의 문자열로 변환해 줍니다.
폼 데이터를 올바르게 직렬화했다면 변수에 저장합니다.
$(document).ready(() => {
$('#new-recipe').submit((event) => {
event.preventDefault();
var values = $(this).serialize();
})
})이제 데이터가 values 변수에 저장되었으니 서버로 전송할 차례입니다!
$(document).ready(() => {
$('#new-recipe').submit((event) => {
event.preventDefault();
var values = $(this).serialize();
var posting = $.post('/recipes', values);
})
})post()가 jqXHR 객체를 반환한다는 것을 기억하시나요? 이 객체 역시 변수로 저장한 뒤 done()을 호출하면 응답을 풀어내고, 클라이언트 측에서 원하는 방식으로 처리할 수 있습니다.
$(document).ready(() => {
$('#new-recipe').submit((e) => {
e.preventDefault();
var values = $(this).serialize();
var posting = $.post('/recipes', values);
posting.done( (data) => {
var recipe = data;
$('.recipes').text(recipe["name"]);
$('.recipes').text(recipe["ingredients"]);
})
})
})응답 데이터를 더 읽기 쉬운 recipe 변수에 저장한 후에는 이름과 재료 속성에 접근할 수 있습니다. 예제를 위해 이 속성들을 recipes 클래스를 가진 <div>에 삽입했습니다.
마무리
지금까지 많은 내용을 다루었습니다! 학습을 기뻐하기 전에 배운 내용을 빠르게 복습해 보겠습니다.
post()의 가장 일반적인 용도는 .submit() 내부에서 콜백 함수로 사용하는 것입니다. .submit()은 폼 자체에서 호출되므로 JavaScript의 this 키워드로 폼의 모든 데이터를 참조하고 serialize()로 직렬화할 수 있습니다. 직렬화된 데이터를 변수(관례상 values라고 명명)에 저장한 후, post()를 사용해 이 값을 목적지 URL로 전송합니다.
post()가 반환하는 jqXHR 객체를 변수(관례상 posting이라고 명명)에 저장하는 것도 좋은 습관입니다. 이후 posting 변수에 done() 메서드를 호출하면 서버가 응답한 데이터에 접근할 수 있습니다. 이제 그 데이터를 사용자에게 어떻게 표시할지는 여러분의 몫입니다.
post()의 복잡한 과정을 성공적으로 다루었다는 점에서 스스로를 칭찬해 주세요! 직접 앱을 개발하는 단계에 있다면 오류는 언제든 발생할 수 있음을 기억하세요. 침착하게 디버깅하면 반드시 해결할 수 있습니다.