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

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

 

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

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

 

https://fastcampus.info/4n8ztzq

 

긴 회의로 지치지만 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

 

25일차 공부 시작!

오늘 공부 시작 시간 (07.25 23:07)

 

오늘의 강의 주제는 '콜백 함수 없는 비동기 코드 작성법'이다.

 

학습 인증샷 - 1

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

 

오늘의 학습 내용

- 콜백 함수 없는 비동기 코드 작성법 -

* 비동기 코드의 진화

프론트엔드 개발에서는 사용자의 입력, 서버 데이터 요청 등 다양한 이벤트가 비동기로 처리된다. 과거에는 이러한 비동기 처리를 콜백 함수로 구현했다. 하지만 콜백 방식은 중첩이 많아질수록 코드 가독성이 떨어지고 유지보수가 어려워진다. 흔히 콜백지옥으로 불리는 구조적 한계로 인해 복잡한 비동기 로직을 작성할 때 큰 불편을 겪었다.

* 프로미스와 비동기 함수의 등장

처음에는 복잡한 로직이 필요 없을 때 콜백이 더 쉬워 보일 수 있다. 하지만 여러 비동기 작업이 연결될 경우, 콜백 방식은 금방 한계를 보인다. ES6에서 프로미스가 도입되며 then, catch와 같은 메서드로 체이닝을 구현할 수 있게 되어 개선이 이뤄졌다. 이후 async와 await 키워드가 등장하면서, 비동기 코드를 동기 코드처럼 작성할 수 있게 됐다. 이제 try-catch로 에러를 처리하고, await으로 결과를 기다리는 형태로 코드를 단순하게 구성할 수 있다.

* 코드 구조의 변화

비동기 코드를 처리하면서도 구조적으로 동기 코드와 비슷한 흐름을 만들 수 있다. 이전에는 콜백 안에서만 데이터를 접근하거나 처리가 가능했다면, async 함수에서는 데이터의 흐름을 단순하게 추적할 수 있다. 예를 들어 루프나 조건문 안에서도 await을 통해 자연스러운 결과 처리가 가능하다. 이는 전체 프로젝트의 코드 품질은 물론 디버깅과 유지보수의 효율성도 크게 개선한다.

* tsconfig.json 수정하기

타입스크립트에서 async, await을 제대로 사용하려면 빌드 설정이 중요하다. tsconfig.json 파일에서 strict 옵션을 true로 설정하면 타입 체크가 엄격해져 코드의 안정성을 높일 수 있다. 그리고 lib 옵션에 es6와 dom을 추가해야 fetch, Promise, async, await 등 최신 자바스크립트 기능과 DOM 관련 API가 정상적으로 인식된다.

 

- strict: true 값으로 타입 엄격성 강화
- lib: ["es6", "dom"]으로 ECMAScript 6 및 DOM API 지원

 

* 비동기 API 클래스 설계의 장점

클래스를 활용한 비동기 API 설계의 가장 큰 장점은 코드의 재사용성과 확장성에 있다. 기본이 되는 Api 클래스를 두고, 실제 데이터에 따라 NewsFeedApi, NewsDetailApi처럼 하위 클래스를 확장할 수 있다. 각 클래스의 getData 메서드에 async를 적용하면 실제 API 호출 시 데이터를 비동기적으로 받아오되 코드 흐름은 동기처럼 직관적으로 작성할 수 있다.

 

비동기 함수에서 예외 처리에 신경 써야 한다. await 키워드로 호출하는 모든 비동기 로직은 예상치 못한 에러가 발생할 수 있으므로 반드시 try-catch문으로 감싸는 것이 안전하다. 또한 fetch 사용 시 네트워크 오류나 응답 값이 올바르지 않을 경우를 대비해 상태 코드 체크 등 추가 로직을 도입하는 것도 권장된다.

 

* 코드

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

export default class Api {
  url: string;

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

  async request<AjaxResponse>(): Promise<AjaxResponse> {
    const response = await fetch(this.url);
    return await response.json() as AjaxResponse;
  }
}

export class NewsFeedApi extends Api {
  constructor() {
    super(NEWS_URL);
  }

  async getData(): Promise<NewsFeed[]> {
    return this.request<NewsFeed[]>();
  }
}

export class NewsDetailApi extends Api {
  constructor(id: string) {
    super(CONTENT_URL.replace('@id', id));
  }

  async getData(): Promise<NewsDetail> {
    return this.request<NewsDetail>();
  }
}

 

 

27강 수강 완료

 

 

오늘 공부 종료 시간 (07.25 23:16)

 

27강 강의 내용 정리 필기

학습 인증샷 - 2

마치며

 

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

 

이번 강의는 지난 시간 Promise에 이어서 async, await 구문에 대한 내용이었다. async, await은 실제로도 많이 쓰고 있어서 익숙하지만 강사님께 타입스크립트와 함께 이전 코드들을 변화시켜서 하다보니 새로웠던 것 같다.