200203_TIL

future·2021년 2월 3일

TIL (Today I Learned)

목록 보기

52/53

📎 오늘 한 일

✔️ HTTP 요청 메서드 종류

GET : 리소스를 요청할 때 사용

POST : 리소스를 새로 만들 때 사용

PUT : 리소스를 수정 할 때 사용 (전체 수정)

PATCH : 리소스를 부분 수정 할 때 사용 (일부 수정)

DELETE : 리소스를 삭제 할 때 사용

✔️ HTTP의 특징 2가지

비연결성 (connectionless)
- 클라이언트와 서버가 연결을 맺고, 클라이언트의 요청에 대해 서버가 응답을 마치면 연결을 끊는 것

무상태성 (stateless)
- 서버가 클라이언트를 식별하지 못해 이전 요청이나 다음 요청을 기억하지 못하는 것

✔️ fetch() 함수로 API 호출하기

GET 호출 (리소스 요청)

fetch('https://API.주소')
.then(response => response.json())	// 응답의 body의 JSON 포맷을 해석해준다
.then(data => console.log(data))

POST 호출 (리소스 생성)

fetch('https://API.주소', {
  method: 'POST',			// 메서드 옵션
  headers: {
    'Content-Type': 'application/json',	// JSON 포맷을 사용한다는 의미
  },
  data: JSON.stringify({	// 요청 body를 JSON 포맷으로 직렬화 시켜서 보내준다
    title: 'practice',
    body: 'I am calling out POST',
    userId: 1,
  }),
})
  .then(response => response.json())	// 응답의 body의 JSON 포맷을 해석해준다
  .then(data => console.log(data))

PUT 호출 (리소스 수정)

fetch('https://API.주소/1', {
  method: 'PUT',			// 메서드 옵션
  headers: {
    'Content-Type': 'application/json',	// JSON 포맷을 사용한다는 의미
  },
  data: JSON.stringify({	// 요청 body를 JSON 포맷으로 직렬화 시켜서 보내준다
    title: 'practice',
    body: 'I am calling out POST',
    userId: 1,
  }),
})
  .then(response => response.json())	// 응답의 body의 JSON 포맷을 해석해준다
  .then(data => console.log(data))

DELETE 호출 (리소스 삭제)

fetch('https://API.주소/1', {
  method: 'DELETE',		// 보낼 데이터가 없기 때문에 headers/data 옵션이 필요 X
})
  .then(response => response.json())	// 응답의 body의 JSON 포맷을 해석해준다
  .then(data => console.log(data))

🐬 기억할 것

'프로토콜'이란? 클라이언트와 서버가 상호작용을 하며 지켜야 하는 통신 규약이다.
클라이언트가 서버에게 리소스를 요청할 경우 정확한 요청 방법을 따라야 한다. 그래서 서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스를 제공하는데 이것을 'API'라고 한다.
fetch() 함수는 브라우저의 window 객체에 소속되어 있기 때문에 window.fetch()로 사용된다.