fetch 함수, 자바스크립트로 서버와 대화하는 법입니다

✅ fetch란?

fetch는 JavaScript에서 서버에 요청(Request)을 보내고, 응답(Response)을 받기 위해 사용하는 함수입니다.
예를 들어 뉴스 기사 목록을 받아오거나, 댓글을 서버에 저장하는 등의 작업에 쓰입니다.

---

🧾 기본 문법

javascript

fetch(요청할_URL)
  .then(response => response.json())
  .then(data => {
    // 받아온 데이터를 처리
    console.log(data);
  });

 

 

---

📦 실제 예제

javascript

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(posts => {
    console.log("받아온 글 목록:", posts);
  });

 

 

위 코드는 샘플 API에서 글 목록 데이터를 받아와 콘솔에 출력합니다.
fetch는 기본적으로 GET 요청을 보냅니다.

---

🛠 fetch에 옵션 추가하기 (POST 요청)

POST는 데이터를 서버에 보낼 때 사용하는 요청 방식입니다.
이때는 fetch()에 **두 번째 인자(옵션 객체)**를 넣어야 합니다.

javascript

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "테스트 제목",
    body: "내용입니다",
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => {
    console.log("서버에 저장된 결과:", data);
  });

 

 

          옵션 설명

---

💡 에러 처리도 꼭 함께

서버가 응답하지 않거나, 문제가 생겼을 때를 대비해 에러 처리를 함께 작성하는 것이 좋습니다.

javascript

fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) {
      throw new Error("서버 응답 오류");
    }
    return response.json();
  })
  .then(data => {
    console.log("데이터:", data);
  })
  .catch(error => {
    console.error("에러 발생:", error);
  });

 

 

---

🧩 요약

• fetch()는 자바스크립트에서 서버와 통신하는 함수입니다.
• 기본적으로 GET 요청을 보내며, POST 요청 등을 하려면 옵션을 추가합니다.
• 응답을 처리할 때는 .then()과 .catch()를 함께 사용하는 것이 좋습니다.

---

💡 보너스 팁

• 실제 프로젝트에서는 async/await 문법을 함께 사용하면 더 직관적으로 코드를 작성할 수 있습니다.
• fetch는 Promise 기반이므로, JavaScript의 비동기 흐름을 이해하는 데도 큰 도움이 됩니다.