[TIL/Coin Site Project] 2024/02/07

reference: 1.https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94 2.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

✅ Promise란?

Promise는, ES6에서 도입된, 비동기 처리에 사용되는 자바스크립트 객체이다. 비동기 처리라는 것은, 특정 코드의 실행이 완료될 때까지 기다리는 것이 아니라 다음 코드를 먼저 수행하는, 자바스크립트의 특성을 의미한다.

짜장면 배달원이, 고객이 그릇을 내놓을 때까지 기다리는 것이 아니라, 다른 곳으로 먼저 배달을 가는 상황을 떠올리면 이해하기 쉽다.

✅ Promise가 왜 필요한가?

Promise는 보통, 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.

$.get('url 주소/products/1', function(response) {
  // ...
});

위 코드처럼, 데이터를 보내달라는 요청을 보냈다고 가정하자. 문제는 데이터를 받아오는 데 어느 정도 시간이 소요되는데, 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것처럼 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다. '비동기 처리'가 필요하다는 말이다.

따라서 누군가가 "Promise가 왜 필요한 거죠?"라고 물어보면, "비동기 처리를 해야 하니까요."라고 답하면 되겠다.

✅ Promise의 세 가지 상태

1. Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태 2. Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 3. Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

예제 코드

import React, { useState } from "react";

function MyComponent() {
  // state
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // fetchData Fn
  const fetchData = () => {
    setLoading(true);
    setError(null);
    // 1. new Promise() 호출: Pending
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        // 2. 부동소수점 난수가 0.5 미만이면 성공이라고 가정, 0.5 이상이면 실패라고 가정
        const success = Math.random() < 0.5;
        if (success) {
          resolve("Data fetched successfully!");
        } else {
          reject("Error fetching data");
        }
      }, 2000);
    });
// 3. 프로미스 체이닝
    promise
      .then((result) => {
        setData(result);
      })
      .catch((error) => {
        setError(error);
      })
      .finally(() => {
        setLoading(false);
      });
  };

  // handleClick Fn
  const handleClick = () => {
    fetchData();
  };

  return (
    <div>
      <button onClick={handleClick} disabled={loading}>
        {loading ? "Loading..." : "Fetch Data"}
      </button>
      {error && <p>Error: {error}</p>}
      {data && <p>Data: {data}</p>}
    </div>
  );
}

export default MyComponent;

Promise Flow

✅ json() 메서드와 Promise의 관계

Promise 개념에 대한 정리의 필요성은, json() 메서드의 사용으로부터 시작되었다.

json()은, 서버에서 받은 응답(response)의 본문(body)을 JSON 형식으로 파싱 하는 메서드이다. json()은 비동기적으로 호출된다. 응답을 받는 과정을 주야장천 기다릴 수는 없는 노릇이기 때문이다.

서버로 응답을 받을 때 json() 메서드를 사용하게 되는데, json() 메서드는 비동기적으로 호출되고(=Promise 객체를 return 하고), 따라서 json() 메서드를 활용한 통신의 에러 처리를 위해 Promise의 개념에 대해 학습해야 했던 것이다.

+) 통신의 근본 fetch를 살펴봤으니, ajax도 한 번 정리해야 하지 않을까 싶다.

✅ 회고

우리는 종종 무엇인가를 하겠노라고 말하고 결국에는 그것을 이행하지 않는 사람을, 게으르다고 치부하는 경향이 있다. 그러나, 내가 봐온 바로는, 게으름보다는 '두려움'에 기인한 문제인 경우가 많다. 자신의 시도가 헛수고가 될까 두려운 것이다.

결과로 이어지지 않을 수 있는 시도를, '헛수고'라고 여기는 태도 자체가 문제의 핵이다. 사람은 결국 다 죽는데, 그렇다면 모든 사람들의 인생은 헛인생인가. gae소리임이 너무도 자명하다. 그렇기에, "일단 이것만 해보자"라는 식의 최소 단위 계획이 필요하다.

최소 단위 계획은, 모든 일에 관성의 힘을 불어넣는 시발점이다. 관성의 힘은, 남들이 볼 때 어려워 보이는 일도, 스스로는 그럭저럭 무던하게 수행할 수 있도록 돕는다. 내 안에서 나도 모르게 자라난 '모난 삐딱함'이 나를 찌르는 상황에서도, "일단 이것만 해보자"라는 '생각의 등속도 운동 상태', 즉 관성은 여전히 유효하다.