에러회고 - 자바스크립트 옵셔널 체이닝

에러 회고 시리즈에서는 제가 백엔드 개발자로서 일을 하면서 제가 발생시켰던 에러에 대해 정리해서
다음에는 이런 실수를 하지 않도록 정리 하는 내용입니다!

옵셔널 체이닝?

옵셔널 체이닝 연산자는 참조나 기능이 undefined 또는 null일 수 있을 때 연결된 객체의 값에 접근하지 않고 undefined을 반환합니다.

장점

• 자바스크립트에서 객체에 접근할때 undefined에서 다음 데이터를 찾으려고 하면 에러가 발생하는데 옵셔널 체이닝을 통해 에러없이 undefined 반환 처리가 가능합니다.

const market = {
  code: "AA",
  name: "전통시장"
}
console.log(market.storeManager);
// undefined 호출됩니다. 
console.log(market.storeManager.name);
// undefined이 호출되는 것이 아니라 에러가 발생합니다.
console.log(market?.storeManager?.name);
// 에러 없이 undefined이 호출됩니다. 

• undefined가 반환 되는 특징을 통해 다른 데이터 또는 default 값을 넣어줄 수 있습니다.

const marketRoadAddress = market.address?.roadAddress || "주소 추가 필요" 

😭 에러를 발생시켰던 이유

현재 회사에서 스마트스토어를 사용하고 있는데 취소(cancel) 같은 경우는 사유를 받아오고 있지만 환불(return) 같은 경우 사유를 받고 있지 않았습니다.

이번에 어플에서 상인들이 사유를 볼 수 있게 하기 위해 환불에 대한 사유를 받아야 하는데,
네이버에서 제공해주는 스마트스토어 API는 취소와 환불의 상태값이 다르기 때문에 상태에 따라 던져주는 값도 달라 아래와 같이 처리하였습니다.

이때 옵셔널 체이닝을 빼먹는 실수를 하여, 해당 데이터 처리 작업에서 에러가 발생하였습니다 ㅠㅠ

this.DetailedReason = prdOrdNaver?.CancelInfo?.CancelDetailedReason 
  || prdOrdNaver?.ReturnInfo.ReturnDetailedReason || null;
// 취소 또는 환불 사유를 받을 수 있게 작성 하는 것이 목표였습니다. 취소 사유가 없으면 환불 사유 체크하고 없으면 null 값으로 저장 

🤔 느낀점

• 외부 API 관련 작업을 하는 경우 옵셔널 체이닝을 빼먹지 말 것!
• 현재 에러 발생 시 몇몇 상황에서는 slack으로 알림을 받고 있는데 해당 처리에서는 에러 발생에 관련된 알림을 받고 있지 않아 제때 대응을 못했습니다. 에러 대응에 대해 신경을 더 써야겠다고 느꼈습니다.