먹짱(쇼핑몰 프로젝트) - 리팩토링(1) - then chaining을 async/await으로

• 그동한 작성한 코드를 가지고 현업 개발자분에게 코드 리뷰를 받았고, 지적받은 사항이였던 일관성 있는 Promise 사용을 위해 then chaining을 async, await으로 바꾸는 작업을 진행했다.

• 상품 상세 페이지에 사용했던 코드를 예시로 가져와서 어떻게 코드를 수정했는지 살펴보겠다.

기존 코드

• 다시 봐도 이상한 것 같다. 분명 async/await문법을 활용하여 비동기식을 작성했는데, then으로 받고 then chaning을 이어가는게 어색하다. then chaining 자체가 나쁘다기보단 then chaining으로 받을거면 차라리 async/await이 아닌 Promise객체를 구성해서 하는게 자연스러웠을 것 같다.

• 아래와 같은 이유로 나는 async/await으로 코드를 다시 작성해보려고 한다.

  • async/await은 비동기의 result값을 변수에 할당할 수 있다는 장점이 있다.
  • then chaining으로 발생할 수 있는 then 지옥을 사전에 방지한다.
  • 비동기코드를 동기적으로 보이게하는 async/await을 사용하여 가독성을 올린다.

코드 예시

async function setData() {
  try {
    const res = await fetch('../itemList/data.json'); // tempData
    const itemList = await res.json();
    return itemList[0];
  } catch (err) {
    console.error(err);
  }
}

..(생략)..

setData()
  .then((res) => {
    const {oid, brand, name, price, img} = res;
    $itemInfoSection.insertAdjacentHTML(
	..(생략)..
     return document;
  })

..(생략)..

  .then((doc) => {
    quantityControlBox(doc);
  });      

수정한 코드

• 바꾼 코드도 결국은 await이 연결고리처럼 이어져서 문제가 있어보인다.
• 하지만 async/await로 promise를 활용함으로서 코드의 일관성을 확보했고, 코드의 실행 순서가 섞이지 않고, 코드가 적힌 순서대로 코드를 읽을 수 있다는 장점이 생겼다.

코드 예시

async function setData() { // get Data
 try {
   const itemList = await Api.get('/api/product/list', `${params}`);
   return itemList;
 } catch (err) {
   console.error(err);
 }
}

async function createItemInfoElements() { // create HTML
 try {
   const res = await setData();
   const {shortId, manufacturer, prod_title, price, img, description} = res;
   $itemInfoSection.insertAdjacentHTML(
   ..(생략)..
   );
   return document;
 } catch (err) {
   console.error(err);
 }
}

async function addquantityControlEvent() { // add Event 
 await createItemInfoElements(); // 수량 조절 버튼 모듈
 quantityControlBox(document);
 const $itemInfoCart = document.getElementById('itemInfo_cart'); // 장바구니 버튼
 const $itemInfoBuyNow = document.getElementById('itemInfo_buyNow'); // 바로구매 버튼