[HTML/CSS/JS] fetch를 활용한 API 연결

API란

Application Programming Interface의 약자로 응용 프로그램에서 다른 소프트웨어 구성 요소들과 상호작용하기 위해 만든 인터페이스이다. 

 

Web에서의 API

프로그램이 데이터베이스, 여러 기능 등과의 통신을 도와주는 매개체라고 할 수 있다. 

데이터베이스 자체는 아니지만 요청에 따라 데이터, 서비스, 기능 등을 제공해주는 역할을 한다. 

더 축약적이고 좁은 의미로 말해보면 요청과 응답을 주고 받는 일련의 과정을 도와주는 역할을 하는 인터페이스라 할 수 있다.

 

 JSON 형식

JavaScript Object Notation의 약자로 정보를 나타내는 JavaScript의 데이터 포맷이다. 

형태는 객체와 비슷하지만 차이점이 존재한다.

1.  JSON 에서는 프로퍼티 네임에도 따옴표를 붙여줘야 한다. 
2. 값이 문자열이면 큰 따옴표를 사용한다.
3. undefined, NaN 등 표현할 수 없는 값들이 존재한다.
4. 주석을 추가할 수 없다. 

{
  "name": "Song",
  "age": 25,
}

 

fetch를 통한 API 연결

Head와 Body

request는 head와 body로 이루어져 있다. 

head에는 request에 대한 부가적인 정보가 담겨져 있으며 보통 request의 종류를 설정한다. 

body에는 reuqest로 보낼 데이터 값을 담는다. 전달할 값이 존재하지 않는 get 과 delete의 경우에는 body 값을 설정해주지 않아도 된다. 

GET 

데이터를 받아올 수 있는 메소드이다. fetch의 경우 기본적으로 get 메소드로 설정되어 있기 때문에 따로 head에서 method를 설정하지 않아도 된다. 

fetch('https://koreanjson.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))

 

POST

값을 추가할 수 있는 메소드이다. 

const member = {
  "name": "Song",
  "age": 25,
};

fetch('https://koreanjson.com/users', {
  method: 'POST',
  body: JSON.stringify(member),
});

body 데이터는 JSON 값으로 넘겨줘야 한다. 

그렇기 때문에 객체 형식으로 변수를 생성해준 후 JSON.stringify() 메소드로 값을 변형해주어야 한다. 

 

PUT / PATCH

값을 변경할 수 있는 메소드이다. 

fetch('https://koreanjson.com/users', {
  method: 'PUT',
  body: JSON.stringify(member),
});

메소드를  PUT으로 작성해주면 된다. 

 

PUT과 PATCH는 둘 다 값을 변경할 때 사용되지만 차이점이 존재한다. 

PUT은 기존 데이터를 완전히 덮어 씌우며 PATCH는 새 데이터로 기존 데이터의 일부를 수정할 때 사용한다. 

 

DELETE

값의 삭제를 요청하고 싶을 떄 사용한다.

  fetch('https://koreanjson.com/users', {
    method: 'DELETE',
  })