inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

2.13) 비동기 작업 처리하기 2. Promise

Promise 의 reject 관련 오류

해결된 질문

95

챙준

작성한 질문수 7

0

2.13) 비동기 작업 처리하기 2. Promise 강의에서, if 문을 활용한 타입 검증 시 오류인 상황(else) 에서의 reject 가 정상 동작하지 않습니다.

 

/* Promise */
const promise = new Promise((resolve, reject) => {
  // 비동기 작업 실행 함수 : executor
  setTimeout(() => {
    let num = 10;
    num = '10';
    console.log(num);

    if (typeof num === 'number') {
      // 성공일 때 호출
      resolve(`${num}은 숫자입니다.`);
    } else {
      // 실패일 때 호출
      reject(`${num}은 숫자가 아닙니다.`);
    }
  }, 1000 * 1);
});

 

위 코드에서, num 타입을 string 으로 변경했을 때 else 문이 진행되는 것으로 기대했습니다. 이때, 브라우저의 디버거에서 오류를 발생시키면서 정상 동작되지 않습니다.

 

스크린샷 2025-09-03 오전 9.54.15.png.webp

 

터미널에서는 UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). 라는 오류가 발생됩니다.

 

스크린샷 2025-09-03 오전 9.55.49.png.webp

 

 catch 문 없이 reject 를 단독으로 사용하는 것에 문제가 있는 것 같은데, 예제와는 다르게 동작하는 것 같아 문의드립니다.

javascript react node.js

답변 2

1

챙준

아하! 감사합니다. 오류 메시지도 제대로 파악하지 않고 질문부터 했네요🥲 감사합니다!

1

이정환 Winterlood

안녕하세요 이정환입니다.

결론부터 말씀드리면 예제와 동일하게 동작하고 있습니다 😀

질문에 첨부해주신 아래의 사진을 살펴보면 기대하신대로 else 문이 정상적으로 잘 실행되어 reject가 실행되는걸 보실 수 있습니다.

그러나 이때 reject는 비동기 작업을 오류로 처리하는 메서드인 만큼 예외를 발생시킵니다. 따라서 지금처럼 디버거에서 동작을 확인하시면 말씀하신 것 처럼 오류 발생이 감지됩니다.

image.png

 

또 터미널에서는 UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). 오류가 발생한다고 하셨는데요 이는 reject 메서드가 호출되어 발생하는 오류로 의도된 오류입니다.

오류 메세지의 마지막 부분을 읽어보시면 rejecting a promise which was not handled with .catch(). 라고 하여 Promise에서 reject가 호출되어서 본 오류가 발생했음을 안내해주고 있기도 합니다.

 

우리 강의에서는 브라우저 디버거와 VSCode 터미널이 아닌 브라우저 콘솔을 통해 본 예제의 결과를 확인하고 있습니다. 강의를 자세히 살펴보시면 아래 그림처럼 브라우저 콘솔에도 동일한 오류 메세지가 발생하고 있는걸 보실 수 있습니다.

image.png

 

강의의 예제와 동일한 결과를 확인하시려면, 강의와 동일하게 브라우저의 디버거가 아닌 console 탭을 통해 결과를 확인하셔야 합니다.

useEffect와 lifecycle문의

0

27

2

프론트엔드 학습 수준 문의

0

39

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

48

2

데이터 로딩중 화면만 계속 나와요!!

0

55

2

퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요

0

79

2

이후의 커리큘럼 문의

0

102

2

실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.

0

50

2

최적화 관련 질문있습니다 (useMemo 등)

0

84

3

프로바이더 컴포넌트의 위치는 어떤 기준인가요?

1

82

3

Date 객체에 관련하여 질문드립니다.

0

85

2

리액트 개정판 교재 질문

0

60

2

예제코드가 안나와요!

0

78

2

select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com

0

108

2

onMouseEnter 관련 문의 드립니다

0

92

3

배열의 렌더링 관련 질문 드립니다.

0

73

2

2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.

0

113

2

TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?

0

136

2

useCallback 적용한 onCreate, onUpdate, onDelete 함수..

0

69

1

vs code 자동완성관련 문의

0

113

2

91강 useEffect내에서 상태변화함수 호출시 발생하는 에러

1

179

2

87강 필터 함수 질문

0

69

2

useRef, useState count 비교

0

67

2

안된다고했던 이유가 무엇이었는지 모르겠습니다

0

90

2

85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.

0

75

2