01. Promise · GitBook about learnjs

[velopert]

@kneehunter

안녕하세요, 많이 답답하셨을텐데, 우선 늦은 답변에 대하여 사과드립니다.
이제 보니 Promise 에 대한 설명이 많이 부실했었네요. 초심자의 시각으로 생각하지 않고 제가 너무 대충 설명했었던것 같네요

말씀 주신 문제점들 반영하여 해당 강의는 업데이트하도록 하겠습니다.

질문들에 대한 답변입니다..

1. increaseAndPrint 콜백 지옥의 파라미터에 대한 설명 작동 흐름 설명

초반의 increaseAndPrint 함수에선 첫번째 파라미터 n에 숫자를 받아오고 두번째 파라미터에선 n에 1을 더한 결과값을 인자로 넣어서 호출 할 함수를 받아옵니다. increaseAndPrint가 호출되고나서 또 다시 자기 자신을 호출하기 위해 연달아서 increaseAndPrint가 작성됐습니다.

해당 코드에서는 <increaseAndPrint 호출 -> n 에 1 더함 -> 더한 값을 가지고 다시 increaseAndPrint 호출>이 값이 5가 될때까지 반복됩니다.

2. resolve 와 reject가 왜 나왔는가

Promise를 만들때에는 resolve와 reject를 파라미터로 받아오는 함수를 인자로 넣어주어야 합니다. async/await 부분에서 질문주셨던건데, reject는 사용하지 않는다면 생략 될 수 있습니다. resolve 는 처리가 성공됐을때 결과 값을 설정해주고 reject는 실패됐을 때 오류를 설정해줍니다.

3. catch, console.error

Promise 의 catch 함수는 앞서 만든 Promise 에서 reject 한 값을 받아올 때 사용합니다. 여기서 e 는 reject 에 인자로 넣어준 값입니다.

console.error는 console.log 와 달리 빨간색으로 나오게 됩니다. 콘솔에서 에러가 난 것을 더욱 쉽게 알 수 있게 해주죠.

4. increaseAndPrint 의 파라미터에 콜백이 사라진 이유

콜백을 없앤 이유는 우리가 콜백을 통해서 그 다음 처리 할 작업을 넣어주지 않고 Promise 의 then 을 통해서 하기 위함이었습니다.

5. error 를 따로 만든 이유

error 에 ValueIsFiveError 라는 이름을 설정해주기 위함이었습니다.
제가 n+1 값이 "반환" 된다고 표현을 했었는데 이 의미가 정확히 'return' 한다는 의미는 아니었고 정확히는 Promise의 결과값으로 n+1을 설정한다는게 더 옳은 표현일 것 같네요. Mozilla 문서에서는 이를 "이행했다" 라는 표현을 사용하기도 합니다.

6. then

increaseAndPrint(0)의 결과 1을 .then 의 파라미터 n으로 받아와서 다시 increaseAndPrint를 호출합니다.

.then 에서 Promise 를 반환하면 .then 을 다시 연달아서 사용 할 수 있습니다.

7. Codesandbox 이상한 현상

저장할때마다 코드가 자동으로 다시 실행됩니다. 그런데 그 과정에서 이미 실행된 Promise들이 사라지지 않고 잔존해있어서 저런 현상이 발생했었고 중요한건 아니여서 그냥 넘겼었습니다. 다만, 설명을 하지 않았을때 혼란을 줄 거라 예상을 못했었네요.

8. node 에서 왜 오류가 나는지

Node 에서 프로미스에서 발생한 에러를 .catch 하지 않으면 "UnhandledPromiseRejectionWarning" 라는 경고 메시지가 뜹니다. 브라우저에서는 "Uncaught (in promise) ValueIsFiveError" 라는 오류가 뜹니다.

9. catch 왜 했는지

catch를 한 이유는, 에러가 발생했을때 특정 작업을 하기 위함입니다.

catch를 안했을땐 "Uncaught (in promise) ValueIsFiveError" - ValueIsFiveError 가 잡히지 않았다.
했을땐

했을땐 "ValueIsFiveError" 라고 나타납니다.

즉 콘솔에 출려되는 결과가 다릅니다.

8. 함수를 넣어주기

이 부분 설명이 모호하긴 했네요. 제가 그냥이란 말을 저렇게 많이 하는지도 몰랐습니다..ㅎㅎ;
.then 에 인자로 넣어주어야 하는 것은 함수입니다.

.then 에서 새로 함수를 선언하지 않고 increaseAndPrint 를 넣어주면 앞서 호출한 increaseAndPrint 의 결과값을 다시 increaseAndPrint의 인자로 넣어서 호출하게 됩니다.

파라미터를 여러개 받아와야 하는 경우에는 함수를 새로 선언해야 합니다.

[JeahaOh]

강의가 지루하진 않고 어려운 건 사실인데 몇분이 강의 내용만 가지고 이해가 안된다고 찡찡 거리는 모습은 보기 불편하네요.
강의만으로 부족한건 사실이지만 그 부족한 부분은 구글링이라는 위대한 스승한테 여쭤 보는 좋은 방법도 있습니다.
vlpt 님, 좋은 강의 올리시고도 고생이 많으시네요.

[JeongSeongHun054]

설명이 너무 어렵네요 그리고 세부적인 설명없이 너무 혼자 하시는듯한 느낌입니다. 포괄적인 설명말고 좀 더 풀어서 친절한 설명으로 부탁드립니다.

[jamesdevjs]

배움이라는 것은 원래 어려운 것같습니다. 그리고 그만큼 내공이 쌓여야 되구요.
처음에는 이해가 안되어도 강좌의 내용을 반복해서 학습하면 자연적으로 습득되고 이해가 되는 부분이 있습니다.
모강좌에서 HTML/CSS를 태그 하나 하나 상세하게 강의해주는 것을 공부한 적이 있었는데 지쳐서 쓰러집니다. 처음부터 모든 것을 다 알 필요는 없거든요.
기초를 빨리 배우고 그 내용을 실습하다 보면 내게 더 필요한 부분이 있습니다.
노**코더, 인런, 유미 등 많는 강좌를 들었는데 JS 기초는 velopert님 강좌가 갑입니다. React도 그렇구요.
하지만 velopert님 강좌로 모든 것을 다 배우지는 못합니다. 나머지는 다른 강좌를 더 듣던 구현하면서 구글신에게 도움을 받던 각자의 몫이죠.
모르는 부분이 나모면 너무 답답하기도 하고 잘 하시는 분들이 강좌를 만드니 그냥 지나치는 부분도 많을 것입니다. 그 답답한 마음 저도 많이 겪고 지금도 겪고 있습니다.
그래도 이렇게 답변을 주시는 것을 보니 좋네요.
저도 then 에서 새로 함수를 선언하지 않고 increaseAndPrint 를 넣어주는 부분에서 이게 뭐야 라고 생각했는데 구글링을 하니 답이 있더군요. 찾는데 오래 걸렸지만.
항상 좋은 강좌 그리고 블로그 글 도움 많이 받고있습니다. 감사드립니다.

[JiHoon777]

이 강의가 애초에 리액트를 위한 자바스크립트 모던 강의 아니에요?
여기서 알려주는 개념들도 헷갈리면서
그렇게 무례한 언행을 가지구 리액트를 배우겠다는 것은 좀 아닌거 같은데요?
모르면 질문을 하면되고요,
모르면 구글링을 하면되요
그리고그렇게 무례하게 말을 하는 것은 너무 예의가 없는거 같은데요??
JeongSeongHun054 님 공부하기 전에 예의부터 배우고와주세요 제발 !! 부탁할게요^^
그리고 마지막으로 이거 리액트를 위한 부록강의 수준인걸로 아는데
그렇게 무례하게 구실거면
하나부터 열가지 알려주는 강의 들으세요
그거 듣고 오시면 님이 얼마나 기초가 부족했는지
얼마나 추태를 부리셨는지 이해하실 거 같은데
보기가 매우 안 좋습니다.

[JiHoon777]

@ghost
글을 제대로 안읽으신거 같은데 다시 한번 제 댓글 읽어보셨으면 좋겟네요^^
"무례한 언행을 가지구 리액트를 배우겠다는 것은 좀 아닌거 같은데요?"
자격없다는 말 한마디도 안했어요^^
그리고 async랑 promise가 원래 이해하기 어려운 파트인데
mdn, javascript.info 로 설명 봐도 처음엔 어려운게 사실인데
자바스크립트를 공부했던 사람들이 하나만 보고 공부했을까요??
이해할려고 엄청나게 노력했을거에요 다들
mdn도 보고, javascript.info도 보고 구글링해서 예시들 찾아보고
다 그랬을건데 왜 그렇게 쉽게쉽게 얻어갈려고하시는지요.
핵심 지식이자나요 핵. 심. 지. 식.
원래 어려운 파트니까요.
이해할려고 노력을 해보세요 단기간에 하려고하지말고요.

[JiHoon777]

아 그리고 기초가 부족하신거 같아서
https://ko.javascript.info/

여기 아주 잘 되어 있어요^^

왕... 너무 어렵당..ㅎㅎ

강의 소개
이 강의에서 뜻하는 "모던 자바스크립트"는, 2019년에 사용하기에 걸맞는 그리고 또 뒤쳐지지 않는, 그런 자바스크립트를 칭합니다. 이 강의에서는 자바스크립트 기초부터 시작해서 실무에서 필요한 핵심 지식들까지 다뤄보게 됩니다.

강의 대상
이 강의는 프로그래밍을 한번도 해본적 없는 사람이 들어도 도움이 될 수 있으며, 자바스크립트 기초를 이미 배우신 분들도 도움이 될 수 있습니다. 특히 React, Angular, Vue 등의 웹 프레임워크 및 라이브러리를 공부하기 전에 이 튜토리얼을 통하여 자바스크립트를 한번 공부하고 나면 큰 도움이 될 수 있습니다. 그리고, Node.js 를 통하여 백엔드 개발을 하기 전에도 도움이 될 수 있습니다.

자바스크립트 복습하는 사람이 아니고서는 아무리 생각해도 비약적으로 갑자기 어려워졌고 이해도 안 가는 건 사실인데 참…. 리엑트를 위한 자바스크립트 모던 강의 라고 하면서 갑자기 이거 이해 못하면 리엑트 배울 자격도 없다 하고.

[dogcolley]

2019.09 개정판 사서 읽기전에 2015 JS 주입중입니다.

2018년에 제이쿼리를 시작했는데

덕분에 탈 제이쿼리 할수있을거같아 무지 기쁩니다 ㅠㅜ
감사합니다.

[JiHoon777]

질문에 관해서 제가 생각했을 때는 질문 기능 없이 강의를 만든 패스트캠퍼스 잘못이 큰 거 같습니다....
패스트캠퍼스가 괜히 욕 먹고 있는게 아니니까요.
열공하세요!!

[youngdonkim]

답변하신 @velopert 님,
짜증내지 않고 대단하시네요. 이렇게 대답하는 분은 처음인 것 같네요.
@JeongSeongHun054님 마음도 이해가 갑니다.

어디서 어떻게 이해가 안 가고 그 부분 설명이 강의자에 의해 덧붙여지고
전 이 과정이 정말 좋네요.

[eunju-song]

안녕하세요. 저는 디자인 분야에 있다가 넘어온지 얼마 안된 뉴비이고 현재 패캠에서 벨로퍼트님 강의를 시청중인데요.

위에 @JeoungSoungHun054 님이 하셨던 질문들이 날카로우신 말투긴 하셨으나 거의 제가 궁금했던 질문들이었어요. 특히 왜 resolve/reject를 갑자기 쓰는지, catch는 왜 나오는지 전혀 이해가 안갔습니다. 구글에서 찾아보기는 했지만 사실 초보자에게 구글에 검색해서 보는 것 자체가 습관이 되어있지 않기도 하고, 구글에 검색해서 게시글을 봐도 이해가 안되는 경우도 많아 시간이 많이 지체되는 것이 사실입니다.

모든 것을 세세하게 설명하기에는 초보자도 강의가 짧다는 정도는 알고 있습니다. 단지 사용하기 전에 왜 사용하는지에 대해 정확히는 설명해주어야 한다고 생각합니다. 그래야 그것에 관해 구글링을 하지요. 저 또한 강의를 몇번씩 돌려가며 보았지만 이해 안되는 것은 마찬가지였습니다. 당연하겠죠 알고리즘 자체가 이해안가는데 몇번 돌려본다고 이해가 될까요.

단지 내가 이 수업 중에 어느 부분을 잘 모르겠다 -> 구글링 해봐야지 하는 프로세스로라도 넘어가게는 설명해주셔야 하지 않을까요. 위에 @JiHoon777님이 말씀하신 것처럼 이건 비단 벨로퍼트님의 문제라기보다 패스트캠퍼스에 질문 기능이 없는 게 너무 큰것 같습니다. 매번 강의가 이해 안될때 마다 이 사이트로 들어와서 댓글을 찾아보아야 하는게 좀 어이없긴 합니다.

자랑은 아니지만 저를 비롯한 초보자에겐 단어 하나 하나 이해하고 정의내리는 것, 그리고 알고리즘을 이해하는 것 그 어떤 것도 쉽지 않습니다. 초보자의 마음을 100% 이해하기는 쉽지 않으시겠으나, 최대한 배려해 주셨으면 하는 바램입니다.

강의 잘 듣고 있습니다 벨로퍼트님^^

[Seokkey]

ㅁㄴㅇㄹ

[zzangisdaeho]

function increaseAndPrint(n) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const value = n + 1;
if (value === 5) {
const error = new Error();
error.name = 'ValueIsFiveError';
reject(error);
return;
}
console.log(value);
resolve(value);
}, 1000);
});
}

increaseAndPrint(0)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.catch(e => {
console.error(e);
});

전 이글의 마지막 부분이 헷갈려서요..
function을 부르를때 인자 안넘겨줘도 되는 이유를 알 수 있을까요

[linkb]

---

-- 상단위에 써있네요..

함수를 넣어주기
이 부분 설명이 모호하긴 했네요. 제가 그냥이란 말을 저렇게 많이 하는지도 몰랐습니다..ㅎㅎ;
.then 에 인자로 넣어주어야 하는 것은 함수입니다.

.then 에서 새로 함수를 선언하지 않고 increaseAndPrint 를 넣어주면 앞서 호출한 increaseAndPrint 의 결과값을 다시 increaseAndPrint의 인자로 넣어서 호출하게 됩니다.

파라미터를 여러개 받아와야 하는 경우에는 함수를 새로 선언해야 합니다.

[pullthechin]

강의 잘듣고 있습니다. 핵심 내용만 전달하다보니 디테일한 부분에서 불만사항이 생기는것 같네요...

[pullthechin]

강의가 잘 이해안되시는 분들은
https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
여기서 promise에 대해서 잘 정리해뒀으니 한번 확인해보세요. 좋은 글인것 같아서 공유드립니다.

[woorara7]

코맨트 보다보니... 음...
비동기-동기... 라는 개념이 원래 쉽지 않은 겁니다.. 그 자체가 OS적인 개념이라...
저 같이 C/C++ 만 했던 사람도 promise 나 async/await 은 생소합니다.
저는 비동기 처리를 하기 위해서 스레드를 생성하고 상태변수를 저장하고 결과가 올때까지 루프타면서 기다리고... 등등.. 을 일일히 처리 했었는데요... 언어가 나날이 발전하고 있다는 것을 느끼고 있습니다.
이런 것들이 어떻게 나왔는지 그 밑바닥부터 이해하면 참 좋겠지만... 쉽지 않습니다... 롱히스토리거든요.
그래서 개념적으로 이해하고.. promise 나 async/await 는 사용법을 익히는 수준으로 가는게 좋을 것 같다는...

[JeongSeongHun054]

날카롭게 제가 코멘트 단 부분 죄송하다는 말씀드립니다.

[dev-93]

비동기-동기 라는 개념이 OS적인 개념이였구나...
OS도 다시 한번 봐야겠어요 ㅎㅎ
넘나 어려운것

[ungraduated]

function increaseAndPrint(n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const value = n + 1;
      if (value === 5) {
        const error = new Error();
        error.name = 'ValueIsFiveError';
        reject(error);
        return;
      }
      console.log(value);
      resolve(value);
    }, 1000);
  });
}

increaseAndPrint(0)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .catch(e => {
    console.error(e);
  });

이 코드에서 reject(error); 를 reject(error.name); 으로 바꿔야
첨부해주신 사진처럼 'ValueIsFiveError'이 콘솔로 나오는거 아닌가요?
강의에서 추천해준 코드샌드박스의 콘솔에서는
그냥 error 를 불러올 경우에는 name값을 표시해주지 못 하는 것 같습니다...

[zuzubibi]

22.03.26

[studyToStudy]

22.08.29