코드잇 학습일기 Day7. Promise 객체와 Promise Chaining

벌써 코드잇 학습일기 챌린지 마지막 주가 되었다. 시간이 정말 빠른 것 같다.

그리고 한달이 다 되어가는데 아무리 회사 업무가 바쁘다지만 나는 토픽 하나도 제대로 끝내지 못하고... 그렇다고 자바스크립트 웹 기본기를 잘 다졌냐고 물으면 그것도 자신이 없고... 솔직히 조금 속상하다. 그래도 포기하지 않으면 언젠가는 잘 할 수 있게 되리라 믿으며, 오늘도 코딩 인강 시작!

 

코드잇 학습일기

---

fetch 함수는 promise 객체를 리턴한다고 한다. 그렇다면 promise 객체는 무엇일까?

Promise 객체란?

어떤 작업에 대한 '상태 정보'를 가지고 있는 객체이다. 예를 들어 fetch 함수를 보내면 성공할 수도 있고, 실패할 수도 있는데 이러한 정보들이 promise 객체에 저장된다. promise 객체는 3개의 상태 정보를 가진다.

 

• pending - 작업 진행 중
• fulfilled - 작업 성공
• rejected - 작업 실패

 

1. pending → fulfilled : 작업을 진행해서 성공을 하면, promise 객체는 그 작업의 성공 결과도 함께 가진다. (작업 성공 결과)

2. pending → rejected : 작업을 진행하다가 인터넷이 끊기는 등의 사유로 실패를 하면, 그 작업의 실패 이유를 가지게 된다. (작업 실패 정보) 

 

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

 

위와 같은 코드에서 작업을 성공(fulfilled 상태가 됨)한다면 promise 객체는 response를 작업 성공 결과로 갖는다.

 

코드잇 실제 강의 화면 캡처

 

Promise Chaining이란?

.then 메소드 뒤에 계속해서 .then 메소드를 이어 붙이는 것을 promise chaining 이라고 한다. chaining은 한국어로 '연쇄' 라는 의미를 갖는다.

 

구글 번역기 chaining 검색 결과

 

예시 코드는 아래와 같다.

 

fetch('https//jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => {
    const users = JSON.parse(result);
    return users[0];
  })
  .then((user) => {
    const { address } = user;
    return address;
  })
  .then((address) => {
    console.log(address);
    const { geo } = address;
    return geo;
  });

// 이하 생략

 

.then 메소드는 각각 별개의 새로운 promise 객체를 리턴한다. 때문에 .then 메소드 뒤에 또 다른 .then 메소드를 붙일 수 있는 것이다.

 

콜백에서 promise 객체를 리턴하는 경우

콜백에서 promise 객체를 리턴하면 .then 메소드가 리턴했던 promise 객체는 콜백에서 리턴한 객체와 동일한 상태와 결과를 갖게 된다. 콜백에서 리턴한 객체가 fulfilled 상태가 되면 .then 메소드가 리턴한 promise 객체도 fulfilled 상태가 되어 동일한 작업 성공 결과를 가지지만, 만약 fulfilled가 아닌 rejected 상태가 되면 둘 다 rejected 상태와 작업 실패 정보를 갖게 된다. 

 

콜백에서 promise 객체가 아닌 것(숫자, 문자열, 일반 객체 등)을 리턴하는 경우 

.then 메소드가 리턴했던 promise 객체는 fulfilled 상태가 되고, 콜백이 리턴값을 작업 성공 결과로 갖게 된다. 

 

Promise Chaining이 필요한 경우

굳이 .then 메소드를 따로 쓸 것 없이, 원하는 것을 하나의 콜백 안에 모두 몰아서 써도 동일한 결과값을 얻을 수 있다. 그렇다면 우리가 Promise Chaining을 하는 이유는 무엇일까?

그 이유는 비동기 작업을 순차적으로 수행해야 할 때, 전체 코드를 좀 더 깔끔하게 사용하기 위해서이다.

---

이제 학습일기를 하나만 더 쓰면 이 챌린지도 끝나니까, 잠시 쉬어가는 코드잇 홍보 타임!

나는 개발에 관심이 많은 디자이너라 코딩 온라인 강의를 많이 들었는데, 아직까지 수강했던 사이트들 중에서 코드잇 멤버쉽이 가장 만족스럽다. 2023년 2월 기준, 연간 멤버쉽 27,417원으로 모든 강의를 무제한 수강할 수 있으며, 7일동안 무료 체험도 가능하다. 

 

코드잇 멤버쉽 비용

 

무엇보다 코드잇에서 직접 강의를 제작하기 때문에, 전반적인 강의 퀄리티가 높은 수준으로 유지되고 있다는 것이 느껴진다. 어떤 강의를 선택하더라도 기대한 것 만큼의 결과를 얻을 수 있다고 생각하니 믿음이 가고, 또 다른 사람에게 추천하는 데에도 망설임이 없다.

 

코드잇에서 수강할 수 있는 강의들

 

프로그래밍 기초부터 파이썬, 자바스크립트, 웹퍼블리싱 등 다양한 분야의 강의가 준비되어 있고, 최근에는 UI 디자인 기초(피그마) 강의도 생겼다. 피그마의 경우, 아직은 기초 부분만 다루고 있어 디자이너에게 추천하기에는 어렵고... 좀 더 기다리면 다음 커리큘럼이 업데이트 될것으로 기대한다. 

정말 재미있는 코딩인강 코드잇, 온라인으로 코딩을 독학하려는 분들께 강력 추천한다!