패스트캠퍼스 챌린지 23일차

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

 

지금까지의 코드에서 비동기 처리를 해야하는 부분(서버에서 데이터를 가져오는)은 XHR을 통해 콜백함수로 받아오거나, fetch를 사용해서 Promise를 리턴하는 방법이 있다.

 

Promise 패턴을 사용하게되면 then(), catch(), finally 등으로 코드를 단계적으로 확인할 수 있는데, 이 방법 말고도 보기에는 동기적인 코드로 작성하지만 작동은 비동기적으로 사용할 수 있는 패턴이있다. 마찬가지로 이것은 Promise를 반환할 때 사용하며, 내부적으로 비동기처리에 대한 사이클이 달라지는 것은 아니지만 다른 프로그래밍 언어의 코드 진행처럼 비동기처리를 작성할 수 있다.

 

 

async & await

 

async

export default class Api {
  ...

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

export class NewsFeedApi extends Api {
  ...

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

export class NewsDetailApi extends Api {
  ...

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

사용하는 함수나 메소드에 async 키워드를 사용하고 해당 함수나 메소드는 await으로 받아서 사용할 수 있다.

 

await

export default class NewsDetailView extends View {
  ...

  render = async (id: string): Promise<void> => {
    const api = new NewsDetailApi(id);
    
    const { title, content, comments } = await api.getData();

    this.store.makeRead(Number(id));
    this.setTemplateData('currentPage', this.store.currentPage.toString());
    this.setTemplateData('title', title);
    this.setTemplateData('content', content);
    this.setTemplateData('comments', this.makeComment(comments));

    this.updateView();
  }
  
  ...
}

export default class NewsFeedView extends View {
  ...

  render = async (page: string = '1'): Promise<void> => {
    this.store.currentPage = Number(page);

    if (!this.store.hasFeeds) {
      this.store.setFeeds(await this.api.getData());
    }

    for(let i = (this.store.currentPage - 1) * 10; i < this.store.currentPage * 10; i++) {
      const { id, title, comments_count, user, points, time_ago, read } = this.store.getFeed(i);

      this.addHtml(`
        <div class="p-6 ${read ? 'bg-red-500' : 'bg-white'} mt-6 rounded-lg shadow-md transition-colors duration-500 hover:bg-green-100">
          <div class="flex">
            <div class="flex-auto">
              <a href="#/show/${id}">${title}</a>  
            </div>
            <div class="text-center text-sm">
              <div class="w-10 text-white bg-green-300 rounded-lg px-0 py-2">${comments_count}</div>
            </div>
          </div>
          <div class="flex mt-3">
            <div class="grid grid-cols-3 text-sm text-gray-500">
              <div><i class="fas fa-user mr-1"></i>${user}</div>
              <div><i class="fas fa-heart mr-1"></i>${points}</div>
              <div><i class="far fa-clock mr-1"></i>${time_ago}</div>
            </div>  
          </div>
        </div>    
      `);
    }  

    this.setTemplateData('news_feed', this.getHtml());
    this.setTemplateData('prev_page', String(this.store.prevPage));
    this.setTemplateData('next_page', String(this.store.nextPage));
  
    this.updateView();
  }
}

마찬가지로 비동기 처리를 위한 await을 사용하는 함수는 async로 선언되어 있고 그 함수는 Promise를 반환한다. await은 순서대로 코드를 작성해도 차례대로 비동기로 실행된다.

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

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

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential