서버와 클라이언트

• 요청하는 주체: 클라이언트
• 요청에 따른 응답을 주는 서버(서비스 제공)

서버에게 요청하기

• 일반적으로 서버에게 HTTP(URL)요청 후, 응답을 처리
• 응답은 다양한 형태로 받을 수 있음(JSON, HTML, plain text 등)
• HTTP 요청은 fetch API로 요청한다.

fetch('https://koreanjson.com/users/1')
.then(function(resp) {
    return resp.json();
})
.then(function(json) {
     console.log(json);
});

API 유의할 점

• 악용하는 사례가 있어 서비스 제공자로부터 권한을 받아야 한다.
• API는 공짜가 아니다. 그래서 API Key는 암호처럼 취급되야 한다.

API 예제

fetch('http://api.openweathermap.org/data/2.5/weather?q=Seoul&appid={API Key}')
.then(function(resp) {
    return resp.json();
})
.then(function(json) {
    console.log('현재 서울 날씨는 섭씨', json.main.temp - 273.15,'도');
})

서버에 기록하기

• HTTP 요청을 GET이 아닌 POST를 이용
• 내용(payload)와 함께 전달
• payload란, 전송되는 데이터를 의미한다. 헤더와 메타데이터, 에러 체크 비트 등과 같은 다양한 요소들을 함께 보내어, 데이터 전송의 효율과 안정성을 높히게 됩니다. 이 때, 보내고자 하는 데이터 자체를 의미한다.
  우리가 택배 배송을 보내고 받을 때, 택배 물건이 페이로드이고, 송장이나 박스, 뾱뾱이와 같은 완충재 등등은 부가적인 것이기 때문에 페이로드가 아닙니다.

[위키피디아]

https://ko.wikipedia.org/wiki/%ED%8E%98%EC%9D%B4%EB%A1%9C%EB%93%9C_(%EC%BB%B4%ED%93%A8%ED%8C%85)

페이로드(payload)라는 단어는 운송업에서 비롯하였는데, 지급(pay)해야 하는 적화물(load)을 의미합니다. 예를 들어, 유조선 트럭이 20톤의 기름을 운반한다면 트럭의 총 무게는 차체, 운전자 등의 무게 때문에 그것보다 더 될 것이다. 이 모든 무게를 운송하는데 비용이 들지만, 고객은 오직 기름의 무게만을 지급(pay)하게 된다. 그래서 ‘pay-load’란 말이 나온 것이다

• 예제로, 게시판에 새로운 글을 쓰고자 할때, 아이디와 비밀번호로 로그인을 하고자 할때

//출처: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT', POST 방식으로 데이터 전송
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data), // payload
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});