[TIL] Fetch를 활용한 웹 통신(+ GET & POST)

🟡 Fetch API란?

Fetch API는 JavaScript에서 HTTP 계층에서의 요청과 응답을 처리하고 조작할 수 있도록 하는 인터페이스를 제공한다.

🟡  Fetch의 기본 사용법

1. GET 방식
    기본적으로 GET 방식을 사용한다.

fetch("URL 입력") // 웹 통신 요청을 보낼 URL
.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화
.then(data => { 
	...//서버로부터 받은 데이터 처리
}) // JSON 형태로 바뀐 데이터에 따로 변수명을 붙여 사용(여기서는 data)

2. POST 방식

fetch('API url', { //요청을 보낼 url 입력
  method: 'POST', //요청 방식을 POST로 설정
  headers: {
    'Content-Type': 'application/json', //요청 본문이 JSON 형식임을 서버에 알림
    'Authorization': 'Bearer YOUR_TOKEN' //인증 토큰
  },
  body: JSON.stringify({ //요청 본문에 포함될 데이터 설정. .stringify()로 JS 객체를 JSON 문자열로 변환
    key1: 'value1' //서버로 보낼 데이터(키-값)
  })
})
 .then(res => res.json()) //응답 본문을 JSON 형식으로 변환하여 반환
  .then(data => {
    ... // 서버로부터 받은 데이터 처리
  });

• headers
  요청/응답에 대한 추가 정보가 담겨 있다.
• body
  전송할 데이터가 담겨있다.

🟡  GET vs POST

GET과 POST는 

• GET 방식
  클라이언트가 서버로부터 데이터를 요청할 때 사용하는 방식이며, 주로 정보 조회와 웹 페이지 요청에 사용된다.
  
  • 데이터를 URL에 포함시킴. (즉, URL에 데이터가 노출된다.)
    따라서 보안에 취약한 편이며, 한번에 요청할 데이터 양에도 한계가 있다.
  • 주로 데이터 조회에 사용된다.
  • GET 방식의 URL은 특정 페이지를 북마크할 수 있다.

GET 방식의 URL

• POST 방식
  서버에 저장된 리소스를 생성 및 변경하기 위해 사용한다. 파일 업로드, 폼 데이터 제출 등 작업에 사용된다.
  
  • 데이터를 HTTP body 에 포함시킴. 
  • 전송할 데이터 크기 제한이 없어 대용량 데이터 전송에 사용.
  • 보안이 필요한 부분에 사용.
  • POST 방식의 URL은 특정 페이지 북마크가 불가능 하다.