패스트캠퍼스 환급챌린지 24일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

 

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스

https://fastcampus.info/4n8ztzq

 

 

회식을 하고와도 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

 

24일차 공부 시작!

오늘 공부 시작 시간 (07.24 23:08)

 

오늘의 강의 주제는 'XHR to Fetch & Promise'이다.

 

학습 인증샷 - 1

(오늘도 마찬가지로 모자이크 처리..)

 

오늘의 학습 내용

- XHR에서 Fetch & Promise로 -

* 동기 처리가 가진 한계

기존에는 AJAX를 사용할 때 주로 XHR(XMLHttpRequest) 객체를 이용하여 서버와 통신했다. 하지만 동기 방식으로 데이터를 요청하면 사용자가 응답을 기다리는 동안 웹 페이지의 UI가 멈추거나 끊기는 듯한 현상이 발생한다. 이는 사용성 측면에서 큰 단점이며, 특히 네트워크 환경이 느리거나 동시에 여러 개의 API를 호출할 때 사용자 경험을 크게 저해할 수 있다. 동기식 코드는 응답을 받아오기 전까지 다음 동작을 진행할 수 없기 때문에 인터페이스가 즉각적으로 반응하지 않는다.

* 비동기 처리 필요성

실무에서는 API의 응답 속도를 알 수 없는 경우가 많다. 하나의 API가 빠르면 문제없지만, 여러 개의 느린 API를 동시에 호출하는 상황에서는 반드시 비동기 호출이 필요하다. 비동기 방식으로 코드를 작성하면 UI가 중단되지 않고 사용자는 다른 작업을 이어갈 수 있으므로 웹 애플리케이션의 전반적인 능동성이 높아진다.

* XHR의 한계와 Fetch의 등장

XHR은 오랜 기간 표준처럼 사용되었으나, 사용하기 번거로울 뿐 아니라 코드가 복잡하고 유지보수가 어렵다는 문제가 있다. 이를 보완하기 위해 등장한 것이 fetch API다. fetch는 간결한 문법과 명확한 동작 방식으로 XHR에 비해 훨씬 직관적이고 활용하기 쉽다.

- fetch는 Promise 객체를 반환한다. 덕분에 비동기 처리에서 익숙한 then, catch 같은 체이닝이 가능하다.
- 콜백 지옥이라 부르는 깊은 중첩 구조 없이 직선적인 코드 흐름을 만들 수 있다.
- 최근의 모던 브라우저에서는 대부분 fetch API가 내장되어 있어 별도의 추가 설정 없이 사용할 수 있다.
- JSON 데이터를 주로 사용하는 현대 개발 방식과도 자연스럽게 호환된다.

* Promise의 구조와 이점

fetch의 기본적인 리턴 값인 Promise는 비동기 작업의 성공, 실패, 대기 상태를 직관적으로 다룰 수 있게 한다. then 메서드를 이용하면 비동기적으로 실행할 함수를 순서대로 이어붙일 수 있다. 기존의 콜백 패턴에서 벗어나 코드가 더 읽기 쉬워지며, 예외 처리도 catch로 일관되게 관리할 수 있게 된다. 유지보수성 역시 향상되고, 코드의 논리 구조를 명확히 드러낼 수 있다.

 

- fetch의 기본 동작은 네트워크 오류에만 catch가 호출되고, HTTP 에러 코드(예: 404, 500)는 정상(resolved)으로 간주한다. 따라서 응답 객체의 ok 속성 등을 반드시 확인해 실제 실패 여부를 자체적으로 판단하는 습관이 필요하다.
- JSON 등의 데이터 파싱도 비동기로 처리되기 때문에, then 체인 안에서 response.json() 등과 함께 사용해야 한다.
- fetch를 사용할 때는 CORS 정책 등 서버 측 설정도 함께 고려해야 한다.
- 기존 XHR 대비 코드량이 줄지만, 에러 처리와 데이터 변형 등 필요한 기능은 적절히 보완해주어야 한다.

* 코드

import { NewsFeed, NewsDetail } from '../types';

export default class Api {
  xhr: XMLHttpRequest;
  url: string;

  constructor(url: string) {
    this.xhr = new XMLHttpRequest();
    this.url = url;
  }

  getRequestWithXHR<AjaxResponse>(cb: (data: AjaxResponse) => void): void {
    this.xhr.open('GET', this.url);
    this.xhr.addEventListener('load', () => {
      cb(JSON.parse(this.xhr.response) as AjaxResponse);
    });

    this.xhr.send();
  }

  getRequestWithPromise<AjaxResponse>(cb: (data: AjaxResponse) => void): void {
    fetch(this.url)
      .then(response => response.json())
      .then(cb)
      .catch(() => {
        console.error('데이타를 불러오지 못했습니다.');
      });
  }
}

export class NewsFeedApi extends Api {
  constructor(url: strisng) {
    super(url);
  }

  getDataWithXHR(cb: (data: NewsFeed[]) => void): void {
    return this.getRequestWithXHR<NewsFeed[]>(cb);
  }

  getDataWithPromise(cb: (data: NewsFeed[]) => void): void {
    return this.getRequestWithPromise<NewsFeed[]>(cb);
  }
}

export class NewsDetailApi extends Api {
  constructor(url: string) {
    super(url);
  }

  getDataWithXHR(cb: (data: NewsDetail) => void): void {
    return this.getRequestWithXHR<NewsDetail>(cb);
  }

  getDataWithPromise(cb: (data: NewsDetail) => void): void {
    return this.getRequestWithPromise<NewsDetail>(cb);
  }
}

 

 

26강 수강 완료

 

오늘 공부 종료 시간 (07.24 23:21)

 

26강 강의 내용 정리 필기

 

학습 인증샷 - 2

마치며

 

오늘도 환급 챌린지 26강 공부 완료!!

 

이번 강의에서는 XHR 대신 fetch를 사용하는 방법과 Promise에 대한 간단한 내용을 다루었다. 드디어 fetch와 promise가 나와서 좋았고 드디어 파트의 끝이 다가오고 있다. 계속해서 꾸준하게 들어야지!