JS 이벤트 처리 - 8(AJAX 와 Fetch API)

 

 💡 학습 목표
AJAX에 대해 알아 보자Fetch API란?Fetch API 사용해보기

1. AJAX에 대해 알아 보자

 💡 AJAX (Asynchronous JavaScript and XML)

AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술입니다

전통적인 방식의 문제점:

• 웹 페이지에서 데이터를 서버로 전송하면 새로운 페이지를 로드해야 했음.
• 이로 인해 화면이 깜빡이거나, 데이터 양이 많을 경우 웹 사이트가 느려지는 문제가 발생함.

AJAX의 장점:

• 웹 페이지의 특정 부분만을 동적으로 업데이트하여 전체 페이지 리로드 없이 데이터를 갱신.
• 사용자 경험이 향상되며, 서버 부하 감소로 웹 애플리케이션의 성능 개선 가능.

기술적 세부 사항:

• 원래 XMLHttpRequest 객체를 이용하여 서버와 비동기 통신.
• 최근에는 더 간편한 fetch API가 많이 사용됨. 

2. Fetch API란?

 💡 Fetch API란? 웹 브라우저에서 제공하는 인터페이스로, 네트워크 요청을 쉽게 수행할 수 있게 해주는 기술입니다. 전통적으로 웹에서 비동기적으로 서버와 데이터를 주고받을 때 주로 사용되던 기술은 XMLHttpRequest(XHR)였습니다. XHR은 웹 개발 초기부터 사용되었으며, AJAX(Asynchronous JavaScript and XML)의 핵심 구성 요소로서 많은 웹 애플리케이션에서 사용되었습니다.그러나 XHR에는 복잡한 인터페이스, 불편한 오류 처리, 비표준화, Promise 미지원 등 한계점이 있어서 이를 대체 하기 위해 Fetch API 가 도입 되었습니다.

 

 

    
    
  
  
    통신 요청
      // 네트워크 요청 처리 Fetch API 의 활용
      // 소화시키는 방법 1
      async function fetchTodo1(todoId) {
        try {
          // 인수 1 -> URL 넣기
          // fetch 함수는 미래타입으로 응답 한다.
          let promiseData = await fetch(
            "<<a href=https://jsonplaceholder.typicode.com/todos/>https://jsonplaceholder.typicode.com/todos/</a>>" + todoId,
            {
              method: "GET",
              headers: {
                "Content-type": "application/json",
              },
            }
          );
          console.log('동기적 방식으로 요청 및 파싱 까지');  
          let todo = await promiseData.json();
          console.log(todo);
        } catch (error) {
          // 요류 발생시 콘솔에 출력
          console.log("error :  " + error);
        }
      }

      // 소화시키는 방법 2 = 비동기 처리 then() 과 catch 사용하기
      function fetchTodo2(todoId) {
        fetch(`<a href=https://jsonplaceholder.typicode.com/todos/$>https://jsonplaceholder.typicode.com/todos/$</a>{todoId}`, {
          method: "GET",
          headers: {
            "Content-type": "application/json",
          },
        })
          .then((proData) => {
            console.log("수행 1");
            return proData.text(); // 응답 본문(body)을  문자열 변환 처리
          })
          .then((bodyText) => {
            console.log("수행 2");
            const todo = JSON.parse(bodyText);
            console.log("파싱된 객체 : ", todo);
            console.log(" completed : ", todo.completed);
            console.log(" id : ", todo.id);
            console.log(" title : ", todo.title);
            console.log(" userId : ", todo.userId);
          })
          .catch((error) => {
            console.log(error);
          });
      }

      // HTTP 1.1 <--- JSON - GET, POST () --> REST API  // --> GET, POST, PUT, DELETE
      function fetchPost1() {
        fetch("<<a href=https://jsonplaceholder.typicode.com/posts>https://jsonplaceholder.typicode.com/posts</a>>", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            title: "서버에 자원 등록 요청",
            body: "비동기 통신 POST 처리 방식 연습",
            userId: 1,
          }),
        })
          .then((proData) => {
            console.log("수행 1");
            return proData.html(); // 응답 본문(body)을  문자열 변환 처리
          })
          .then((bodyText) => {
            console.log("수행 2");
            const todo = JSON.parse(bodyText);
            console.log("파싱된 객체 : ", todo);
            console.log(" completed : ", todo.completed);
            console.log(" id : ", todo.id);
            console.log(" title : ", todo.title);
            console.log(" userId : ", todo.userId);
          })
          .catch((error) => {
            console.log(error);
          });
      }

      // fetchPost1(); // 함수에 호출

      testPatch();  // 함수 호출 
      function testPatch() {
        fetch("<<a href=https://jsonplaceholder.typicode.com/posts/1>https://jsonplaceholder.typicode.com/posts/1</a>>", {
          method: "PATCH",
          body: JSON.stringify({
            title: "foo",
          }),
          headers: {
            "Content-type": "application/json; charset=UTF-8",
          },
        })
          .then((response) => response.json())
          .then((json) => console.log(json));
      }