[JS] 자바스크립트에 Fetch() 함수로 HTTP 요청하기

이 글을 보기 전에 [JS] HTTP와 REST API에 관한 글을 이해하고 보면 좋다!

 

1. Fetch API

Fetch API는 웹 브라우저에서 제공하는 자바스크립트 인터페이스로, 네트워크로 요청을 보내고 응답 처리를 하는 기능을 제공한다.

기존 XMLHTTPRequest를 대체하며 원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 함수

XMLHTTPRequest와 비슷하지만, fetch()는 promise 기반으로 구성되어 더 간편하게 사용 가능

 

2. Fetch API 사용해서 데이터 가져오기 (GET 요청)

통신이 가능한 더미 웹 서비스 JSONPlaceholder: https://jsonplaceholder.typicode.com/

JSONPlaceholder 위 사이트에서 fetch() 함수 사용법도 알려준다.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => response.json())
  .then((data) => console.log(data));

1. 먼저 fetch() 함수를 호출하면서 첫 번째 인자에 데이터를 가져올 URL을 지정한다. 이 URL은 데이터가 위치한 곳을 가리키는데 URL을 지정하면 기본적으로 GET방식으로 동작한다.

2. fetch() 함수는 Promise를 반환하기 때문에 응답 처리를 하기 위해 .then() 메서드를 사용해서 응답 객체를 받고 JSON 형식으로 파싱한다.

3. 그 후 다시 .then()을 사용해서 JSON으로 파싱된 데이터를 받아와 콘솔에 출력한다.

 

 

근데 여기서 JSON으로 파싱한 이유는 뭘까?

JSON(JavaScript Object Notation)이란 자바스크립트에서 객체를 표현하는 방식 중 하나로 자바스크립트의 Object와 유사하지만,

그냥 단순 텍스트라고 생각하면 된다.

네트워크를 통해 받은 데이터가 일반적으로 텍스트 형식으로 전송되기 때문에 이 데이터를 자바스크립트가 이해할 수 있는 형식으로 변환하여 사용해야한다.

 

3. Fetch API 사용하기 (POST 요청)

 

fetch 요청을 해서 데이터를 받아왔다면 POST 메서드를 사용해서 데이터를 추가할 수 있다.

fetch(url, options)로 사용하며, 첫번째 인자에 위 처럼 url을 넣고 두번째 인자에 옵션을 설정하는 객체를 설정할 수 있다.

fetch(
  'https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // 요청 메서드를 POST로 지정
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

GET 요청할 때 보다 코드가 길어졌는데 하나하나 살펴보도록 하자.

 

1. fetch() 함수의 두번째 인자에 옵션을 설정하는 객체를 전달하는데 'method' 키를 사용해서 HTTP 요청 메서드를 지정할 수 있다.

2. 'body' 는 주로 전송할 데이터를 포함하는 부분으로 JSON.stringify를 사용해서 객체를 JSON 문자열로 변환하여 포함한다.

3. headers는 데이터 유형을 설명해야한다거나 추가적인 인증 데이터가 필요로 할 때 어떤 형식인지 서버에 알려주는 역할을 한다.

일반적으로 추가할 수 있는 헤더의 유형은 표준화 되어있어서 위 처럼 요청하는 본문이 JSON 형식임을 알려주고, 또 자율적으로 설정할 수 있다.

 

 

4. html 요소에 삽입하기

위 에선 콘솔에만 출력하도록 했는데 직접 화면에 띄우고 싶을 땐 어떻게 해야할까?

//index.html

<div>
    <h1 id="title"></h1>
    <p id="desc"></p>
</div>

 

const title = document.querySelector("#title");
const desc = document.querySelector("#desc");

showData();

async function showData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();

  title.innerHTML = data.title;
  desc.innerHTML = data.body;
}

 

 

아까 fetch 함수로 데이터를 받아올 때 then으로 응답을 받았지만 이번엔 async / await을 사용했다.

html 요소를 js로 가져오고 요소에 문구를 넣기 위해 innerHTML을 사용하여 데이터를 삽입하여 웹 화면에 띄웠다.

 

5. 요소로 만들고 삽입하기

이번엔 api로 데이터를 받아서 요소로 만들고 삽입해보기

// index.html
<div id="container"></div>

 

const container = document.querySelector("#container");

showData();

async function showData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();

  const title = data.title;
  const desc = data.body;

  container.insertAdjacentHTML("beforeend",`
    <h1 id="title">${title}</h1>
    <p id="desc">${desc}</p>
  `);
}

fetch()로 api 요청 후 응답 값을 템플릿 리터럴을 사용하여 요소 템플릿으로 요소 문자열을 만들어준다. 

 

insertAdjacentHTML

자바스크립트로 DOM요소를 삽입할 때 사용하는 함수로 innerHTML은 변경할 요소를 가져와서 기존값을 덮어씌운다면,

insertAdjacentHTML은 기존값을 건드리지 않고 DOM트리에 삽입한다. 

element.insertAdjacentHTML(position, text);

 

position값엔 아래 단어만 사용 가능하다.

- beforebegin: element 앞

- afterbegin: element 안 가장 첫번째 child

- beforeend: element안 가장 마지막 child

- afterend:  element 뒤

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

 

Reference

• MDN 문서