자바스크립트 Fetch API: AJAX의 현대적 대안 🚀

잠깐! 혹시 "AJAX가 뭐야?" 하고 궁금해하는 친구들이 있을 수 있겠다. 걱정 마, 우리 차근차근 설명해 나갈 테니까. 그리고 Fetch API가 얼마나 쿨한 녀석인지 알게 되면, 너도 모르게 "와우!" 하고 말하게 될 거야. 😎

AJAX의 핵심 포인트:

• 페이지 새로고침 없이 데이터 요청/수신 가능
• 비동기적으로 작동 (다른 작업을 방해하지 않음)
• 사용자 경험(UX) 향상

Fetch API의 장점:

• Promise 기반 (비동기 처리가 더 쉬워짐)
• 간결한 코드 작성 가능
• 더 많은 네트워크 요청 타입 지원
• 모던 브라우저에서 기본 지원

기본 문법:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));
    

🎭 재능넷 팁: 웹 개발에 관심 있는 친구들이라면, Fetch API 같은 최신 기술을 배우는 게 정말 중요해. 재능넷에서 웹 개발 강의를 찾아보면, 이런 최신 기술들을 쉽게 배울 수 있을 거야. 누군가의 재능이 너의 실력 향상에 도움이 될 수 있다고!

POST 요청 보내기:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: '홍길동',
    age: 30
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('에러 발생:', error));
    

async/await를 사용한 Fetch:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

fetchData();
    

💡 재능넷 아이디어: Fetch API와 async/await를 활용한 실전 프로젝트를 만들어보는 건 어때? 재능넷에서 관련 프로젝트 아이디어나 멘토링을 찾아볼 수 있을 거야. 실제 프로젝트에 적용해보면 이해가 더 잘 될 거야!

Request 객체:

const request = new Request('https://api.example.com/data', {
  method: 'POST',
  headers: new Headers({
    'Content-Type': 'application/json'
  }),
  body: JSON.stringify({ name: '홍길동', age: 30 })
});

fetch(request)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));
    

Response 객체:

fetch('https://api.example.com/data')
  .then(response => {
    console.log(response.status); // HTTP 상태 코드
    console.log(response.headers.get('Content-Type')); // 헤더 정보
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));
    

AbortController 사용하기:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch 취소됨!');
    } else {
      console.error('에러 발생:', error);
    }
  });

// 1초 후에 요청 취소
setTimeout(() => controller.abort(), 1000);
    

쿠키 포함하기:

fetch('https://api.example.com/data', {
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));
    

🎭 재능넷 팁: CORS 문제로 고민하고 있다면, 재능넷에서 관련 경험이 있는 개발자의 도움을 받아보는 건 어때? 실제 경험자의 조언이 문제 해결에 큰 도움이 될 거야!

CORS 모드 설정:

fetch('https://api.example.com/data', {
  mode: 'cors' // 'no-cors', 'cors', 'same-origin'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));
    

스트림 사용하기:

fetch('https://api.example.com/large-data')
  .then(response => {
    const reader = response.body.getReader();
    return new ReadableStream({
      start(controller) {
        return pump();
        function pump() {
          return reader.read().then(({ done, value }) => {
            if (done) {
              controller.close();
              return;
            }
            controller.enqueue(value);
            return pump();
          });
        }
      }
    });
  })
  .then(stream => new Response(stream))
  .then(response => response.blob())
  .then(blob => console.log(blob.size))
  .catch(error => console.error('에러 발생:', error));
    

더 나은 에러 처리:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));
    

💡 재능넷 아이디어: Fetch API의 고급 기능들을 활용한 미니 프로젝트를 만들어보는 건 어때? 예를 들어, 대용량 파일 업로더나 실시간 데이터 모니터링 도구 같은 거 말이야. 재능넷에서 이런 프로젝트에 대한 아이디어나 협업 파트너를 찾아볼 수 있을 거야!

API 호출 함수 만들기:

const API_BASE_URL = 'https://api.example.com';

async function apiCall(endpoint, options = {}) {
  const url = `${  API_BASE_URL}${endpoint}`;
  const defaultOptions = {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    }
  };
  const mergedOptions = { ...defaultOptions, ...options };

  try {
    const response = await fetch(url, mergedOptions);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('API 호출 중 에러 발생:', error);
    throw error;
  }
}

// 사용 예시
apiCall('/users')
  .then(data => console.log(data))
  .catch(error => console.error(error));

apiCall('/posts', {
  method: 'POST',
  body: JSON.stringify({ title: '새 글', content: '내용' })
})
  .then(data => console.log(data))
  .catch(error => console.error(error));
    

타임아웃 설정 예시:

function fetchWithTimeout(url, options, timeout = 5000) {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Request timed out')), timeout)
    )
  ]);
}

fetchWithTimeout('https://api.example.com/data', {}, 3000)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));
    

병렬 요청 예시:

Promise.all([
  fetch('https://api.example.com/users'),
  fetch('https://api.example.com/posts'),
  fetch('https://api.example.com/comments')
])
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(([users, posts, comments]) => {
    console.log('Users:', users);
    console.log('Posts:', posts);
    console.log('Comments:', comments);
  })
  .catch(error => console.error('에러 발생:', error));
    

🎭 재능넷 팁: Fetch API를 사용한 실제 프로젝트를 진행해보고 싶다면, 재능넷에서 관련 프로젝트를 찾아보는 것도 좋아. 다른 개발자들과 협업하면서 실전 경험을 쌓을 수 있을 거야!