새로고침 없는 웹, Fetch(AJAX)

인터넷 초창기 웹페이지는 단순했습니다.

버튼을 클릭하거나 폼을 입력하면, 브라우져는 페이지 전체를 새로 불러와 다음 화면을 보여줍니다. 로그인이나 댓글을 작성 할 때마다 화면이 깜박이던 시절이었죠.

오늘날 웹서비스는 다릅니다. 메신저, 지도, 쇼핑몰, 은행 앱까지.

화면을 깜박이지 않고도 매끄럽게 데이터가 오고 가는데요. 이런 경험을 가능케 만든 핵심 기술이 바로 AJAX(Asynchronous JavaScript and XML)입니다.

폼 요청

폼(form) 태그를 통한 전통적인 데이터 전송 방식을 생각해 볼까요.

• 사용자가 값을 입력하고 제출 버튼을 누르면

• 브라우져는 페이지 전체를 지우고 새로운 요청을 보냅니다.

• 서버가 응답을 보내면 브라우져는 다시 전체 페이지를 그립니다.

   

이 방식은 단순하지만 그만큼 느립니다. 작은 동작 하나에도 전체 화면을 갈아엎는 구조이기 때문이에요.

AJAX의 등장

화면은 그대로 두고 데이터만 주고 받을 수 있다면 어떨까요? 필요한 부분만 바꾸어 훨씬 매끄러운 사용감을 제공할 수 있을 겁니다.

이런 방식을 가능하게 해주는 것이 바로 AJAX입니다.

• Asynchronous: 페이지 전체를 동시에 요청하지 않고, 데이터만 비동기로 주고 받습니다.

• JavaScript: HTML form 대신 자바스크립트 코드로 네트워크 요청을 보냅니다.

• XML: 초창기에는 데이터를 XML로 주고 받았지만, 지금은 가벼운 JSON이 거의 표준입니다.

   

AJAX를 구현한 첫 인터페이스는 XMLHttpRequest(XHR) 객체였습니다.

• 오래된 방식이지만 여전히 많은 브라우져에서 동작합니다.

• 콜백 기반 인터페이스라 다루기 번거롭지만, 과거에는 이것이 표준이었습니다.

   

시간이 지나면서 Fetch API가 등장합니다.

• fetch() 함수 하나로 간단히 네트워크 요청을 만들 수 있습니다.

• 프로미스(Promise) 기반이라 비동기 로직을 깔금하게 작성할 수 있습니다.

• 거의 모든 브라우져가 지원합니다.

   

특별히 구형 브라우져를 신경 쓰지 않는 다면, fetch 하나만으로도 충분합니다.

데이터 형식

AJAX 요청은 단순히 "보냈다, 받았다"에서 그치지 않습니다. 어떤 형식으로 데이터를 주고 받느냐도 중요합니다.

• 폼 데이터(FormData, urlencoded): HTML form과 유사한 방식으로, 로그인이나 간단한 값을 전달할 때  적합합니다.

• JSON: 구조화된 데이터를 교환할 때 널리 쓰입니다. 읽고 쓰기 쉽고, 자바스크립트 객체와 호환성이 높아 표준처럼 사용합니다.

• Blob, ArrayBuffer: 이미지, 영상 같은 대용량 바이너리를 전송할 때 사용합니다.

응답(Response) 다루기

요청을 받은 서버는 응답(Response)을 보내는데요, fetch는 응답을 프라미스로 감싸서 반환합니다.

• status, ok:  응답이 성공했는지를 나타내는 숫자 혹은 불리언 값

• headers:  응답 헤더를 담은 객체

• text(), json(), blob(): 응답 본문을 다양한 형식으로 읽기 위한 함수

   

예를 들어, 로그인 API 서버가 JSON을 응답하면, 프론트엔드에서는 json() 함수를 통해 자바스크립트 객체로 변환해 사용할 수 있습니다.

const jsonData = await response.json();
jsonData // { authenticated: true }

이 과정을 통해 화면 일부만 바꾸거나, 사용자에게 알림을 띄우는 식으로 유연한 인터랙션을 만들 수 있습니다.

AJAX가 바꾼 웹

생각해보면, 우리가 매일 쓰는 웹 서비스의 매끄러움은 대부분 AJAX 덕분입니다.

• SNS에서 좋아요를 눌러도 화면이 리프레시되지 않는 것

• 지도를 드래그할 때 매끄럽게 새로운 영역이 나타나는 것

• 쇼핑몰 장바구니가 즉시 업데이트되는 것

   

모두 AJAX와 Fetch API가 만들어낸 새로고침 없는 웹의 풍경입니다.

결론

HTTP는 단순히 "요청과 응답" 으로만 설계된 프로토콜이었습니다. 하지만 AJAX가 등장하면서 웹은 앱(APP)처럼 반응성이 좋아지게 됩니다.

웹이 이렇게 변화한 배경과 더불어 아래 주제들을 먼저 익혀 두신다면, 훨씬 폭 넓은 문제 해결 역량을 갖추실 수 있을 겁니다.

• 폼 요청과 AJAX의 차이

• Fetch API의 기본 사용법

• 다양한 데이터 형식 (JSON, FormData 등)

• 응답 처리 (Response 객체)

   

더 깊게 이해하고 싶으시다면 제가 준비한 강의  「웹 개발의 핵심, HTTP 완벽 가이드」  3편을 참고해 보세요. 한 단계 성장한 개발자로 나아가는 좋은 출발점이 될 것입니다.

이 강의에서 다루는 내용

• 1편. HTTP 기본

• 2편. 브라우져

• 3편. AJAX

• 4편. 추가 프로토콜

• 5편. 보안

• 6편. 성능