HTTP GET 요청/jQuery, fetch API

시작하면서

주말간 틈틈히 프로그래머스에서 javascript, css, html을 사용해서 고양이 사진첩을 구현하는 과제를 했다. 과제 풀이를 하면서, 어려웠던 점이나 신경썼던 부분을 정리해 보고자 한다.

데이터 불러오기

HTTP GET 요청을 사용하여 데이터를 가져오는 방법은 jQuery, fetch API, 그리고 async/await 등 여러 방법이 있다. 세가지 방법을 비교해본다면 아래처럼 작성할 수 있다.

jQuery, fetch API, async/await

1. 제이쿼리 (jQuery)
   jQuery는 브라우저 환경에서 DOM 조작 및 AJAX 요청을 간편하게 수행하는 JavaScript 라이브러리이다.

   $.ajax({
   url: 'https://example.com/api/data',
   method: 'GET',
   success: function(data) {},
   error: function(error) {}
   });

2. fetch API
   fetch는 원시 JavaScript API로, 브라우저와 Node.js에서 모두 사용할 수 있다.

   fetch('https://example.com/api/data')
   .then(response => {
    if (!response.ok) throw new Error('네트워크 응답이 실패하였습니다.');
    return response.json();
   })
   .then(data => {})
   .catch(error => {});

3. async/await
   sync/await는 JavaScript의 비동기 작업을 동기식 코드처럼 작성할 수 있도록 하여, 예외 처리도 try...catch 블록을 사용하여 처리할 수 있다.

   async function fetchData() {
   try {
    const response = await fetch('https://example.com/api/data');
    if (!response.ok) throw new Error('네트워크 응답이 실패하였습니다.');
    const data = await response.json();
   } catch (error) {}
   }

jQuery

레거시 프로젝트에서는 jQuery를 많이 사용하는데 일부 제한사항과 위험요소를 가지고 있어서 지양해야한다고 이야기를 들었다. 이번 기회에 제이쿼리 사용을 지양해야 하는 이유에 대해 정리해보고자 한다.

1. 로딩 시간 및 페이지 용량 증가
   제이쿼리는 크기가 큰 라이브러리이로 웹 페이지에 포함되면 불필요한 코드를 다운로드하고 실행해야 한다. 이로인해 웹 페이지의 로딩시간이 늘어나고, 용량이 증가하는 문제가 생긴다.

2. 비효율적인 렌더링
   DOM은 웹 페이지의 구조와 내용을 표현하며, 변경 사항이 발생할 때마다 브라우저에서 다시 그려야 한다. 가상 DOM은 메모리에 있는 가벼운 복사본으로, 상태 변경을 추적하고 변경된 부분만을 효율적으로 업데이트한다.
   가상 DOM은 React, Vue.js 등과 같은 라이브러리와 프레임워크에서 사용되며, 웹 애플리케이션의 UI를 선언적으로 관리하고 상태를 업데이트하는 데 주로 사용된다. 이러한 이유로 jQuery를 사용해서 DOM을 직접 조작하는 방식은 지양되고 있다.

더 공부할 내용

선언적 프로그래밍

가상 돔을 사용하는 프레임 워크 중에 하나는 React이다. React에서 상태(state)가 변경되면 해당 상태를 기반으로 UI를 업데이트하도록 컴포넌트를 작성할 때, 개발자는 어떻게 UI를 업데이트할지를 명시적으로 구현하지 않고 상태를 정의하고 React가 필요한 변경 사항을 자동으로 반영하도록 선언적으로 코드를 작성할 수 있다. 이후에 간단한 예제를 따라해보면서 동작 방식에 대해 이해해보고자 한다.