프론트엔드 스터디 8주차: 클로저, Promise, async/await

function makeCounter() {
  let count = 0; // 외부 함수의 변수

  return function () {
    // 내부 함수 — 클로저
    count++;
    return count;
  };
}

const counter = makeCounter();
// makeCounter()는 이미 종료됐지만
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
// count 변수가 여전히 살아있음

function createAccount(initialBalance) {
  let balance = initialBalance; // 외부에서 직접 접근 불가

  return {
    deposit(amount) {
      balance += amount;
    },
    withdraw(amount) {
      if (amount > balance) return "잔액 부족";
      balance -= amount;
    },
    getBalance() {
      return balance;
    },
  };
}

const account = createAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500
console.log(account.balance); // undefined — 직접 접근 불가

// 콜백 지옥
fetch("/user", function (user) {
  fetch("/posts?userId=" + user.id, function (posts) {
    fetch("/comments?postId=" + posts[0].id, function (comments) {
      // 점점 깊어짐...
    });
  });
});

// Promise 체이닝 — 수평으로 나열
fetch("/user")
  .then((user) => fetch("/posts?userId=" + user.id))
  .then((posts) => fetch("/comments?postId=" + posts[0].id))
  .then((comments) => console.log(comments))
  .catch((err) => console.error(err));

// 순차 실행 — 느림 (앞이 끝나야 다음 시작)
async function sequential() {
  const a = await fetchA();
  const b = await fetchB();
  return [a, b];
}

// 병렬 실행 — 동시에 시작하고 모두 완료 기다림
async function parallel() {
  const [a, b] = await Promise.all([fetchA(), fetchB()]);
  return [a, b];
}

// 가장 먼저 완료된 것만 사용
async function race() {
  return await Promise.race([fetchA(), fetchB()]);
}

// Promise 체이닝
function getUser(id) {
  return fetch(`/users/${id}`)
    .then((res) => res.json())
    .then((user) => user)
    .catch((err) => {
      throw err;
    });
}

// async/await — 같은 동작, 더 직관적
async function getUser(id) {
  try {
    const res = await fetch(`/users/${id}`);
    const user = await res.json();
    return user;
  } catch (err) {
    throw err;
  }
}

// 잘못된 예 — 순차 실행 (불필요하게 느림)
async function bad() {
  const a = await fetchA(); // fetchA 완료 대기
  const b = await fetchB(); // 그 다음에야 fetchB 시작
}

// 올바른 예 — 병렬 실행
async function good() {
  const [a, b] = await Promise.all([fetchA(), fetchB()]);
}

useEffect(() => {
  async function fetchData() {
    try {
      const res = await fetch("/api/data");
      const data = await res.json();
      setData(data);
    } catch (err) {
      setError(err);
    }
  }

  fetchData();
}, []);

async function fetchUser(userId) {
  const res = await fetch(`/api/users/${userId}`);

  if (!res.ok) {
    throw new Error(`HTTP error: ${res.status}`);
  }

  const data = await res.json();
  return data;
}

let loading = true;
let error = null;
let data = null;

try {
  data = await fetchUser(1);
} catch (err) {
  error = err;
} finally {
  loading = false;
}

// 서로 독립적인 요청 — 병렬 가능
const [user, notifications] = await Promise.all([
  fetchUser(userId),
  fetchNotifications(userId),
]);

// 앞 요청 결과가 뒤 요청에 필요 — 순차 실행
const user = await fetchUser(userId);
const posts = await fetchPostsByUser(user.id);