// 동기 처리 예시
console.log("1번 작업 시작");
console.log("2번 작업 시작");
console.log("3번 작업 시작");

// 출력 순서: 1번 → 2번 → 3번 (무조건 이 순서)

console.log("1번 시작");

setTimeout(() => {
console.log("2번 - 1초 후 실행");
}, 1000);

console.log("3번 시작");

// 실제 출력 순서: 1번 → 3번 → 2번 (!!)
// 2번은 1초 기다리는 동안 3번이 먼저 실행됨 ㅋㅋ

// 콜백 함수 기본 예시
function fetchData(callback) {
setTimeout(() => {
const data = { name: "재능넷 유저", skill: "JavaScript" };
callback(null, data); // 첫 번째 인자: 에러, 두 번째: 데이터
}, 1000);
}

fetchData((error, data) => {
if (error) {
console.error("에러 발생:", error);
return;
}
console.log("데이터 받음:", data);
});

// 콜백 지옥 예시 😱
getUser(userId, (err, user) => {
if (err) throw err;
getProfile(user.id, (err, profile) => {
if (err) throw err;
getPosts(profile.id, (err, posts) => {
if (err) throw err;
getComments(posts[0].id, (err, comments) => {
if (err) throw err;
getLikes(comments[0].id, (err, likes) => {
if (err) throw err;
// 이 시점에서 멘탈 붕괴 ㅋㅋㅋ
console.log(likes);
});
});
});
});
});

// Promise 기본 구조
const myPromise = new Promise((resolve, reject) => {
// 비동기 작업 수행
const success = true;

if (success) {
resolve("작업 성공! 🎉"); // Fulfilled 상태로 전환
} else {
reject(new Error("작업 실패 😭")); // Rejected 상태로 전환
}
});

// Promise 사용
myPromise
.then(result => console.log(result))   // 성공 시
.catch(error => console.error(error))  // 실패 시
.finally(() => console.log("무조건 실행")); // 항상 실행

// 아까 그 콜백 지옥을 Promise로 바꾸면?
getUser(userId)
.then(user => getProfile(user.id))
.then(profile => getPosts(profile.id))
.then(posts => getComments(posts[0].id))
.then(comments => getLikes(comments[0].id))
.then(likes => console.log(likes))
.catch(error => console.error("에러 발생:", error));

// 훨씬 읽기 쉽지 않음?? ㅋㅋ 에러 처리도 한 곳에서!

// 3개 API를 동시에 호출 — 순서대로 기다리지 않아서 빠름!
const [users, posts, comments] = await Promise.all([
fetch('/api/users').then(r => r.json()),
fetch('/api/posts').then(r => r.json()),
fetch('/api/comments').then(r => r.json())
]);

console.log(users, posts, comments);

const results = await Promise.allSettled([
fetch('/api/data1'),
fetch('/api/data2'),  // 이게 실패해도
fetch('/api/data3')   // 나머지 결과는 다 받을 수 있어
]);

results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('성공:', result.value);
} else {
console.log('실패:', result.reason);
}
});

// 타임아웃 구현에 race() 활용!
const timeout = (ms) => new Promise((_, reject) =>
setTimeout(() => reject(new Error('타임아웃!')), ms)
);

const result = await Promise.race([
fetch('/api/slow-endpoint'),
timeout(5000)  // 5초 안에 응답 없으면 에러!
]);

// async 키워드: 이 함수는 비동기 함수야!
async function fetchUserData() {
// await 키워드: Promise가 완료될 때까지 여기서 기다려!
const response = await fetch('https://api.example.com/user');
const data = await response.json();
return data;
}

// 화살표 함수로도 가능!
const fetchUserData = async () => {
const response = await fetch('https://api.example.com/user');
return await response.json();
};

// async 함수는 항상 Promise를 반환해!
fetchUserData().then(data => console.log(data));

async function getUserPosts(userId) {
try {
const userRes = await fetch(`/api/users/${userId}`);

// HTTP 에러 체크
if (!userRes.ok) {
throw new Error(`HTTP 에러! 상태: ${userRes.status}`);
}

const user = await userRes.json();
const postsRes = await fetch(`/api/posts?userId=${user.id}`);
const posts = await postsRes.json();

return posts;

} catch (error) {
console.error("에러 발생:", error.message);
throw error; // 필요하면 상위로 에러 전파
} finally {
console.log("요청 완료 (성공이든 실패든)");
}
}

// ❌ 나쁜 예시 — 순차 실행 (총 3초 걸림)
async function slowWay() {
const users = await fetchUsers();    // 1초
const posts = await fetchPosts();    // 1초
const tags = await fetchTags();      // 1초
// 합계: 3초 😭
}

// ✅ 좋은 예시 — 병렬 실행 (총 1초 걸림)
async function fastWay() {
// Promise.all로 동시에 실행!
const [users, posts, tags] = await Promise.all([
fetchUsers(),
fetchPosts(),
fetchTags()
]);
// 합계: 1초 🚀 (가장 오래 걸리는 것 기준)
}

// 배열의 각 항목을 순차적으로 처리할 때
async function processItems(items) {
for (const item of items) {
await processItem(item); // 순서 보장됨
console.log(`${item} 처리 완료`);
}
}

// ⚠️ forEach는 async/await과 잘 안 맞아!
// forEach는 await을 기다려주지 않음 — 이거 함정임 ㅋㅋ
items.forEach(async (item) => {
await processItem(item); // 이렇게 하면 안 됨!
});

// 재사용 가능한 API 호출 유틸리티
async function apiCall(url, options = {}) {
const defaultOptions = {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
}
};

try {
const response = await fetch(url, { ...defaultOptions, ...options });

if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || `HTTP ${response.status}`);
}

return await response.json();

} catch (error) {
if (error.name === 'TypeError') {
throw new Error('네트워크 연결을 확인해주세요');
}
throw error;
}
}

// 사용 예시
const userData = await apiCall('/api/users/me');
const newPost = await apiCall('/api/posts', {
method: 'POST',
body: JSON.stringify({ title: '새 글', content: '내용' })
});

// 실패 시 자동 재시도 함수
async function withRetry(fn, maxRetries = 3, delay = 1000) {
for (let attempt = 1; attempt <= maxRetries; attempt++) {
try {
return await fn();
} catch (error) {
console.log(`시도 ${attempt}/${maxRetries} 실패`);

if (attempt === maxRetries) throw error;

// 지수 백오프: 1초, 2초, 4초... 점점 늘어남
await new Promise(resolve => 
setTimeout(resolve, delay * Math.pow(2, attempt - 1))
);
}
}
}

// 사용 예시
const data = await withRetry(
() => fetch('/api/unstable-endpoint').then(r => r.json()),
3,  // 최대 3번 재시도
1000 // 1초 기본 딜레이
);

// 간단한 메모이제이션(캐싱) 구현
const cache = new Map();

async function fetchWithCache(url, ttl = 60000) {
const cached = cache.get(url);

if (cached && Date.now() - cached.timestamp < ttl) {
console.log('캐시에서 반환 ⚡');
return cached.data;
}

const response = await fetch(url);
const data = await response.json();

cache.set(url, { data, timestamp: Date.now() });
console.log('서버에서 새로 받아옴 🌐');

return data;
}

// React에서 비동기 데이터 fetching 패턴
import { useState, useEffect } from 'react';

function useAsyncData(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
let cancelled = false; // 클린업을 위한 플래그

const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(url);
const result = await response.json();

if (!cancelled) { // 컴포넌트가 언마운트되지 않았을 때만
setData(result);
}
} catch (err) {
if (!cancelled) setError(err);
} finally {
if (!cancelled) setLoading(false);
}
};

fetchData();

return () => { cancelled = true; }; // 클린업
}, [url]);

return { data, loading, error };
}

// ❌ 잘못된 코드
async function wrong() {
const data = fetch('/api/data'); // await 빠뜨림!
console.log(data); // Promise 객체가 출력됨 😅
}

// ✅ 올바른 코드
async function correct() {
const response = await fetch('/api/data');
const data = await response.json();
console.log(data); // 실제 데이터 출력 ✅
}

// ❌ 잘못된 코드 (일반 함수에서 await 사용)
function notAsync() {
const data = await fetch('/api/data'); // SyntaxError!
}

// ✅ 해결책 1: async 함수로 만들기
async function isAsync() {
const data = await fetch('/api/data'); // OK!
}

// ✅ 해결책 2: 최상위 레벨 await (ES2022, 모듈에서만)
const data = await fetch('/api/data'); // .mjs 파일에서 가능

// ❌ 에러 처리 없음 — UnhandledPromiseRejection 발생!
async function noErrorHandling() {
const data = await fetch('/api/might-fail');
return data.json();
}

// ✅ 에러 처리 포함
async function withErrorHandling() {
try {
const response = await fetch('/api/might-fail');
return await response.json();
} catch (error) {
console.error('에러:', error);
return null; // 기본값 반환
}
}

// Promise.all은 하나라도 실패하면 전체 실패!
// 개별 에러 처리가 필요하면 이렇게
const results = await Promise.all([
fetchUsers().catch(err => ({ error: err, data: [] })),
fetchPosts().catch(err => ({ error: err, data: [] })),
fetchTags().catch(err => ({ error: err, data: [] }))
]);

// 또는 Promise.allSettled 사용!
const settled = await Promise.allSettled([
fetchUsers(),
fetchPosts(),
fetchTags()
]);

// ❌ var 사용 시 클로저 문제
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
// 출력: 3, 3, 3 (예상: 0, 1, 2) 😱
}

// ✅ let 사용으로 해결
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
// 출력: 0, 1, 2 ✅
}

// Generator 기반 비동기 (async/await의 원형)
function* asyncGenerator() {
const user = yield fetchUser();
const posts = yield fetchPosts(user.id);
return posts;
}

// async/await은 이걸 자동으로 처리해주는 것!
async function asyncAwaitVersion() {
const user = await fetchUser();
const posts = await fetchPosts(user.id);
return posts;
}

// 비동기 이터레이터 — 대용량 데이터 스트리밍에 유용!
async function* asyncDataStream() {
const pages = [1, 2, 3];

for (const page of pages) {
const data = await fetch(`/api/data?page=${page}`)
.then(r => r.json());
yield data; // 한 페이지씩 yield
}
}

// for await...of로 사용
for await (const pageData of asyncDataStream()) {
console.log('페이지 데이터:', pageData);
// 메모리 효율적으로 대용량 데이터 처리 가능!
}

// 진행 중인 fetch 요청 취소!
const controller = new AbortController();
const { signal } = controller;

async function fetchWithCancel() {
try {
const response = await fetch('/api/large-data', { signal });
return await response.json();
} catch (error) {
if (error.name === 'AbortError') {
console.log('요청이 취소됐어!');
} else {
throw error;
}
}
}

// 5초 후 자동 취소
setTimeout(() => controller.abort(), 5000);
fetchWithCancel();