[JavaScript] fetch()로 JSON 데이터 가져오기

JSON

JavaScript Object Notation
일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식

/* example */
{
  "name": "John Doe",
  "languages": ["JavaScript", "Python"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
  },
  "email": null
}

 

fetch()

비동기 함수로 네트워크를 통해 리소스를 가져오는데 사용된다. 일반적으로 서버에서 데이터를 가져오거나 API로부터 데이터를 요청할 때 사용된다.

// 기본 구조
fetch(url[, options])
  .then(response => {
    // 서버로부터 받은 응답 처리
  })
  .catch(error => {
    // 오류 처리
  });

• url (필수): 가져올 리소스의 URL
• options (선택): 요청에 대한 옵션을 설정하는 객체. 이 객체에는 method, headers, body 등을 지정할 수 있다.
  •  ex) GET 또는 POST 요청을 설정하거나 특정 헤더를 추가
• then(): 비동기 작업이 성공적으로 완료될 때 실행되는 콜백 함수. 콜백 함수는 서버로부터 받은 응답을 처리하는 데 사용된다. response 객체에는 응답 상태 코드, 헤더 정보 및 응답 본문 데이터 등이 포함되어 있다.
• catch(): 요청 중에 발생한 오류를 처리하는 콜백 함수

/* EXAMPLE */
fetch('https://api.example.com/data')
	// fetch() 함수로부터 받은 HTTP 응답 객체를 가져와서 json() 호출하여 JSON으로 파싱 후 반환	
  .then(response => response.json())
  .then(data => {
    // JSON 데이터를 처리
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error('오류 발생: ', error);
  });