[JS 기초] 서버 데이터 요청 fetch

서버 데이터 요청 fetch 🌐

웹사이트에서는
서버에서 데이터를 가져와야 하는 경우가 많습니다.

예를 들어

게시글 목록 불러오기
상품 데이터 가져오기
사용자 정보 조회

이처럼 서버에게 데이터를 요청할 때 사용하는 기능이
fetch입니다.

fetch는 JavaScript에서 제공하는
서버 요청 API입니다.

주요 포인트 Top3

01. fetch란 무엇인가

fetch는 서버에게 데이터를 요청하는 JavaScript API입니다.

즉

브라우저
→ 서버에게 요청
→ 데이터 응답

이 과정을 처리합니다.

02. fetch 기본 사용법

fetch("API주소");

예

fetch("https://jsonplaceholder.typicode.com/posts");

이 코드는

해당 서버에 데이터 요청

을 의미합니다.

03. fetch 데이터 처리

서버에서 데이터를 받으면
그 데이터를 사용해야 합니다.

이때 then을 사용합니다.

fetch("API주소")
.then(response => {
  console.log(response);
});

여기서 response는
서버가 응답한 데이터입니다.

04. JSON 데이터 변환

서버에서는 보통
데이터를 JSON 형식으로 보냅니다.

그래서 JavaScript에서 사용할 수 있도록
JSON을 변환해야 합니다.

fetch("API주소")
.then(response => response.json())
.then(data => {
  console.log(data);
});

여기서

response.json()

은

JSON 데이터를
JavaScript 객체로 변환

하는 역할을 합니다.

05. fetch 실행 흐름

fetch는 다음 순서로 동작합니다.

1 서버에게 데이터 요청
2 서버 응답 받기
3 JSON 데이터 변환
4 데이터 사용

코드로 보면

fetch("API주소")
.then(response => response.json())
.then(data => {
  console.log(data);
});

06. 실제 웹에서 fetch 사용

웹 개발에서는
fetch를 매우 많이 사용합니다.

예

게시글 목록 불러오기
상품 목록 가져오기
로그인 요청
댓글 데이터 조회

즉 서버 데이터를 가져올 때 사용하는 기본 기능입니다.

07. fetch는 비동기 작업

fetch는 비동기 작업입니다.

즉

서버 요청
→ 기다리지 않음
→ 다른 코드 먼저 실행
→ 데이터 도착 후 실행

이 방식으로 동작합니다.

그래서 fetch 다음에는
async / await 문법을 자주 사용합니다.

GOYO.’s Tip 💡

fetch 코드는 보통 다음 구조로 작성됩니다.

fetch
→ response.json
→ 데이터 사용

하지만 코드가 길어질 수 있기 때문에
실제 개발에서는 async / await 문법을 많이 사용합니다.

마무리 🎯

fetch는 JavaScript에서
서버에게 데이터를 요청하는 API입니다.

웹 개발에서는

게시글
상품
사용자 정보

같은 데이터를 가져올 때
fetch를 사용합니다.