웹 애플리케이션 개발의 핵심은 HTTP 요청입니다. HTTP 요청을 사용하면 사용자 입력으로부터 데이터를 받아 백엔드를 거쳐 서버로 전송하고, 이후 서버로부터 응답을 받을 수 있습니다.
때로는 POST 요청처럼 데이터베이스에 저장할 데이터를 전송하기도 합니다. 또 다른 일반적인 요청은 응답을 받아 사용자에게 표시하는 것으로, 이를 GET 요청이라고 합니다. jQuery는 get() 메서드를 통해 요청 전송 과정을 한층 간소화해 줍니다.
jQuery get()란 무엇인가요?
jQuery의 get()은 URL 엔드포인트에 GET 요청을 보내고 응답을 받는 메서드입니다. 여기서 응답이란 서버가 되돌려주는 데이터를 의미합니다. POST 요청과 달리 GET 요청은 서버에 이미 존재하는 데이터를 가져오기만 하며, 데이터베이스에는 아무것도 저장하지 않습니다.
GET 요청은 특정 데이터 집합을 요청한 뒤 그 데이터로 원하는 작업을 수행할 때 유용합니다. 예를 들어 전자상거래 앱을 만든다면, 상품 목록에 접근하기 위해 URL 엔드포인트에 GET 요청을 보낼 수 있습니다. 응답으로 받은 데이터를 가공하여 구매 가능한 모든 상품을 카드 레이아웃 형태로 보여줄 수 있습니다.
정리하자면, jQuery의 get()은 URL로 요청을 보내고 응답으로 데이터를 받는 역할을 담당합니다. 개발자는 이를 통해 서버의 데이터에 자유롭게 접근할 수 있으며, 원하는 방식대로 사용자에게 데이터를 표시할 수 있습니다.
GET 요청의 개념을 이해했으니, 이제 get() 메서드의 문법을 살펴보겠습니다.
get() jQuery 문법
jQuery는 GET 요청 전송을 매우 간단하게 만들어 줍니다. get()은 문자열 형태의 URL 주소와 데이터를 받을 콜백 함수를 인자로 받습니다. 콜백 함수란 나중에 실행되도록 메서드에 전달하는 함수를 말합니다.
get()은 몇 가지 선택적 인자를 더 받을 수 있지만, 가장 많이 사용되는 것은 URL과 콜백 함수입니다.
전자상거래 예시를 이어서 활용해보겠습니다. get()을 사용한 기본적인 GET 요청이 어떤 모습인지 살펴보겠습니다.
$.get('/products', (data) => {
console.log(data)
})
get()을 호출하고 URL을 문자열로 전달합니다. 이 요청은 상품 목록 페이지로 전송되며, 서버는 데이터를 되돌려줍니다. 콜백 함수는 여러 인자를 받을 수 있지만, 여기서는 data와 status면 충분합니다.
data는 요청을 통해 받은 데이터를 나타냅니다. 이 예제에서는 반환된 값을 단순히 콘솔에 출력합니다. jQuery는 여러 데이터 타입을 인식하도록 설계되어 있지만, 대부분의 경우 JSON 객체를 받게 됩니다.
JSON 객체에서 원하는 정보를 추출하려면 추가 코드가 필요합니다. 어떻게 처리할 수 있는지 살펴보겠습니다.
jQuery get() 실전 예제
이번에는 재미있는 공개 API를 활용해보겠습니다. 이 API는 현재 우주에 체류 중인 우주인의 수를 알려주며, 이름과 탑승 우주선 정보도 함께 제공합니다. 먼저 URL을 get()에 전달해보겠습니다.
$.get('https://api.open-notify.org/astros.json', (data) => {
console.log(data)
})
요청을 보내면 콘솔에 다음과 같은 응답이 기록됩니다.
URL에서 이미 서버가 JSON 객체를 반환한다는 것을 짐작할 수 있습니다. 콘솔에서 "message", "number", "people"이라는 세 가지 키를 확인할 수 있습니다. message 값인 success는 에러 처리 시 유용하게 활용됩니다.
number 키는 우주에 있는 사람의 총人数을 의미합니다. "people"은 객체 배열을 값으로 가지며, 이 배열을 순회(iterate)하면서 해당 정보를 리스트 형태로 사용자에게 표시할 수 있습니다. 이처럼 데이터를 받으면 서버가 반환한 데이터를 어떻게 렌더링할지는 개발자의 선택에 달려 있습니다.
결론
지금까지 GET 요청이 무엇인지, 그리고 jQuery가 이를 얼마나 빠르고 간편하게 만들어 주는지 살펴봤습니다. 기본 문법에 익숙해진 뒤 get()이 실제로 동작하는 모습도 확인했습니다. 특히 콜백 함수 본문 안에서 받은 데이터를 반복 처리하고 렌더링할 수 있다는 점이 중요합니다.
더 나아가, 간단한 공개 API를 찾아 소규모 프로젝트를 직접 만들어보면서 GET 요청 전송과 데이터 표시를 연습해볼 수 있습니다. 데이터를 받아서 보기 좋게 화면에 렌더링하는 능력은 숙련된 개발자로 성장하는 첫걸음입니다.