🍦Vanilla JS (11) HTTP 비동기 통신

HTTP(HyperText Transfer Protocol)

• 인터넷에서 데이터를 전송하는 프로토콜
• 클라이언트와 서버간에 데이터를 주고받기 위해 사용되며, 주로 HTML, CSS, JavaScript, 이미지, 동영상 등의 리소스를 전송하는데 사용
• HTTP는 요청(Request)과 응답(Response)의 구조로 이루어져 있습니다. 클라이언트는 HTTP 요청 메시지를 서버에 전송하고, 서버는 이에 대한 응답 메시지를 클라이언트에 전송합니다.
• 요청과 응답 메시지는 헤더와 바디로 이루어져 있습니다. 헤더에는 요청 혹은 응답에 대한 정보가 포함되어 있고, 바디에는 요청 또는 응답에 대한 데이터가 포함되어 있습니다.
• 서버는 클라이언트로부터 요청을 받아야만 응답할 수 있습니다.
• HTTP는 보안적인 이유로 HTTPS(HTTP Secure)를 사용하기도 합니다. SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security)를 이용하여 통신 내용을 암호화하므로, 제 3자가 중간에서 데이터를 가로채는 것을 방지할 수 있습니다.
• HTTP는 웹 서버와 웹 브라우저를 비롯한 다양한 응용 프로그램에서 사용됩니다. 또한 RESTful API, 웹 서비스 등에서도 사용되며, 최근에는 웹 소켓(Web Socket)이라는 기술을 이용하여 양방향 통신을 제공하기도 합니다.

통신 방식

HTTP 통신은 위에서 언급했듯 클라이언트와 서버 간의 요청과 응답으로 이루어지는 통신 입니다.

이러한 HTTP 통신 방식에는 크게 GET과 POST 방식이 있습니다.

이외에도 PUT, DELETE, PATCH, OPTIONS 등이 있습니다. 이들은 주로 RESTful API에서 사용 됩니다.

GET 방식

• GET 방식은 서버로부터 데이터를 요청할 때 사용됩니다. URL에 데이터를 포함하여 전송하며, 보통 웹 브라우저에서 링크를 클릭하거나 주소창에 URL을 직접 입력하는 방식으로 사용됩니다.
• GET 방식은 요청 정보를 URL에 포함하기 때문에 캐싱이 가능합니다. 따라서, 같은 요청을 반복해서 보낼 때, 서버에서 처리하는 부하를 줄일 수 있습니다. 하지만, 보안성이 낮기 때문에 비밀번호나 개인 정보 등을 전송할 때는 사용되지 않습니다.

POST 방식

• POST 방식은 서버에 데이터를 전송할 때 사용됩니다. HTML form 태그를 이용하여 데이터를 입력하고, 전송 버튼을 눌러 데이터를 서버에 전송합니다.
• POST 방식은 요청 정보를 URL에 포함하지 않기 때문에 캐싱이 불가능합니다. 또한, GET 방식보다 보안성이 높기 때문에 비밀번호나 개인 정보 등을 전송할 때 주로 사용됩니다.

비동기 통신

• 클라이언트가 서버와 통신할 때 HTTP 요청을 보내고, 서버에서 HTTP 응답을 받는 것을 동기적으로 처리하지 않고, 비동기적으로 처리하는 것을 말합니다. 이를 통해 클라이언트는 서버로부터 응답을 받을 때까지 대기하지 않고 다른 작업을 처리할 수 있습니다.
• HTTP 비동기 통신을 구현하기 위해서는 XMLHttpRequest 객체나 Fetch API를 이용합니다. 이들을 이용하여 서버에 HTTP 요청을 보내고, 응답을 받았을 때 콜백 함수를 호출하여 처리합니다.

요청 메시지

---

1. Ajax(Asynchronous JavaScript and XML)

• JavaScript를 이용하여 비동기적으로 서버와 데이터를 주고 받는 기술 입니다.
• Ajax를 이용하면 웹 페이지를 다시 로드하지 않고도 새로운 데이터를 화면에 반영할 수 있습니다.
• Ajax는 XMLHttpRequest 객체를 이용하여 서버에 비동기적으로 HTTP 요청을 보내고, 이에 대한 응답을 처리 합니다.
  이를 통해 서버에서 전송된 데이터를 동적으로 화면에 반영할 수 있습니다.

장점

• 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
• 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있습니다.
• 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있습니다.
• 백그라운드 영역에서 서버로 데이터를 보낼 수 있습니다.

단점

• Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 폴링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
• Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.
• Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없습니다.
• 클라이언트의 PC로 Ajax 요청을 보낼 수는 없습니다.

---

XMLHttpRequest 객체

Ajax의 가장 핵심적인 구성 요소는 XMLHttpRequest 객체 입니다.

이 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용됩니다.

👩‍💻 웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문입니다.

👩‍💻 전체 페이지를 새로 고침하지 않아도 URL을 통해 데이터를 전송하거나 받아올 수 있습니다.

기본적인 처리의 흐름

1. XMLHttpRequest 객체 생성
2. 요청 전송
3. 응답 처리

1️⃣ 객체 생성

XMLHttpRequest 객체는 브라우저에서 제공하는 Web API이기 때문에 브라우저 환경에서만 정상적으로 동작됩니다.

(node.js 환경에서는 제공 X)

const xhr = new XMLHttpRequest();

2️⃣ 요청 전송

클라이언트(브라우저)에서 서버로 요청을 보내기 위해서는 HTTP Method, 요청 URL을 정의하는 것 부터 시작합니다.

(XMLHttpRequest의 내장 함수인 open()을 이용)

xhr.open('HTTP Method', '/서버 주소', 비동기 여부(boolean));
// HTTP Method
// (1) GET(요청할 때(단순 조회, 경로가 드러남))
// (2) POST(세팅할 때(회원가입, 로그인 등), 경로가 드러나지 않음)

// 서버 주소 : IP주소, port번호, 백엔드가 수신할 컨트롤러
// 집 주소(==ip주소)에 사는 누구(==port번호)야, 이런 일을 해!(컨트롤러)

💡비동기 여부(기본 값 true)

open() 함수에서 첫 번째 매개변수는 HTTP Method, 즉 HTTP 요청 방식 입니다.

💡DB의 CRUD와 유사한..?!

---

클라이언트에서 서버로 HTTP 요청을 하기 전에 요청에 맞는 헤더값을 설정해야 합니다.

setRequestHeader() 함수를 통해서 요청 헤더 값을 설정할 수 있습니다.

일반적으로 요청할 때 서버로 전송하는 데이터의 타입을 선언하기 위한 용도로 많이 사용합니다.

xhr.setRequestHeader('content-type','application/json');

👉 open() 함수와 setRequestHeader() 함수로 요청에 필요한 정의가 끝나면 최종적으로 send() 함수를 통해 요청을 보내게 됩니다.

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open("POST", "/posts"); // HTTP Method, URL 정의
xhr.setRequestHeader("content-type", "application/json"); // 헤더값의 content-type 정의

const data = {
    id : 100,
    title :"XMLHttpRequest 전송하기",
    author : "홍길동"
};

xhr.send(JSON.stringify(data)); // JSON.stringify를 통해 오브젝트를 문자열 형태로 변경해서 전송

3️⃣ 응답 처리

클라이언트에서 서버로 요청을 전송하면 서버는 요청한 결과를 응답 합니다!!

---

🛜 테스트

JSONPlaceHolder(https://json-placeholder.typicode.com/)은 무료로 사용할 수 있는 JSON 데이터 API 서비스 입니다. 이 서비스는 JSON 형식으로 구성된 다양한 유형의 테스트 데이터를 제공합니다.

 

이 서비스를 사용하면 개발자들은 REST API를 테스트 하거나 프로토 타입을 작성하거나 데이터를 시각화 등 다양한 목적으로 이용할 수 있습니다.

 

JSONPlaceHolder에서는 다음과 같이 테스트를 위한 리소스를 제공 합니다.

• /posts
• /comments
• /albums
• /photos
• /todos
• /users

---

위 테스트 사이트를 이용하였습니다.

// XMLHttpRequest()는 타임 아웃 걸 때가 없어서 서버에서 응답 없으면 무한대기 걸려버리는 단점이 있다.)
const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts"); // HTTP Method, URI
xhr.setRequestHeader("content-type", "application/json"); // 헤더 값 content-type 정의
const data = {
  // 아래 변수들은 추후에는 input에서 받아온 값(~.value)이 들어감.
  id : "test1",
  pwd : "test!@#$1",
  name : "홍길동",
  addr : "서울시 강남구" 
}
xhr.send(JSON.stringify(data)); // XMLHttpRequest 객체를 사용하여 서버로 HTTP 요청을 보내는 메소드
// GET은 open()에 정보를 다 담아서 보내기 때문에 send()는 parameter가 없음.
// POST는 send()에 정보를 담아서 보내기 때문에 외부에서 확인 불가

// XMLHttpRequest 객체를 사용하여 서버로부터 HTTP 응답을 받았을 때 호출되는 콜백 함수를 설정하는 프로퍼티
xhr.onload = () => { // onload() : 로딩이 되면 ...(서버가 응답을 주면) 'onload()'가 불려지는..콜백 함수
  // XMLHttpRequest 객체에서 요청이 공적으로 완료되었을 때 호출되는 핸들러
  if (xhr.status === 201) {
    // 정상적으로 응답되면 status가 200이나 해당 test 사이트는 201이 정상 응답인가 봄.
    // const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
    console.log(xhr.response);
  } else {
    // 에러 발생
    console.error(xhr.status, xhr.statusText); // 응답 상태와 응답 메시지를 출력
  }
};

정상적으로 넘어온 것을 확인할 수 있습니다!

2. Promise

Promise는 자바스크립트에서 비동기 처리에 사용되는 내장 객체 입니다.

비동기 처리란? 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있게 해주는 방식을 의미 합니다.

원래 웹은 요청(request)에 대한 반응(response)이 순차적으로 이루어지고, 먼저 실행된 코드가 실행이 완료되어야 다음 코드를 실행하는 순서를 가지고 있습니다. 그런데 자바스크립트에 Ajax(Asynchronous JavaScript and XML)가 추가되면서 XMLHttpRequest 통신이 가능해졌고, 그럼으로써 서버로 요청을 보낸 후 요청에 대한 응답을 받을 때까지 기다릴 필요 없이 다음 코드를 실행할 수 있게 되었습니다.

 

Promise는 브라우저에서 제공하는 비동기 함수인 Web API를 실행할 때 실행한 코드가 완료될 때까지 대기하지 않고, 바로 다음 코드를 실행할 수 있도록 해주고, 비동기 함수의 실행이 완료되면 then() 함수를 통해서 그 결과에 대한 코드를 실행할 수 있게 해줍니다.

 

이를 쉽게 예시를 통해 설명드리겠습니다.

A는 학원의 한 수업 커리큘럼을 보고 신청을 하고자 합니다. 하지만 아직 모집 인원이 다 모이지 않아서 개강하기까지는 시간이 걸리는 것을 알게되었습니다. 그래서 A는 학원 행정실에 개강 날짜가 확정이되면 알려달라 하고, 대기를 걸어놓고 집에 왔습니다.

A는 수업이 개강될 때까지 미리 공부를 하고, 알바를 하며 일상 생활을 보냅니다.
며칠 후, 학원에서 개강 되었다는 연락을 받고 A는 수업을 들으러 학원에 갑니다.

어떤가요? 이해가 쉽게 되시나요? ㅎㅎ

머리로 이해한 것을 글로 설명하는 것은 언제나 어려운 것 같습니다.😅

기본 사용법

// GET - 정보 조회
// 업계 기본 값은 GET 방식, JSON 형태이기 때문에 안넣어도 정보는 넘어옴.
fetch("https://jsonplaceholder.typicode.com/posts/1") // userId 1인 객체만 요청
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.error(error));

// POST - 데이터 생성
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({
    //전송할 데이터
    title: "테스트 입니다.",
    userName: "홍길동",
    userId: "test1",
  }),
  headers: {
    //헤더 값 정의
    "content-type": "application/json; charset=UTF-8", //content-type 정의
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

// PUT - 데이터 수정
fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  body: JSON.stringify({
    id: 1,
    title: "PUT 테스트",
    body: "bar",
    userId: 1,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

// DELETE - 데이터 삭제
fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "DELETE",
});

// 새로운 Promise를 만들 때, executor 함수가 자동적으로 실행되기 때문에 사용자가 필요할 때에만 통신이 이루어져야 할 때에는 적합하지 않음.
// 즉 불필요한 네트워크 통신을 하게 될 수 있음
const promise = new Promise((resolve, reject) => {
  // 비동기 작업()...(네트워크, 파일 읽기 등)
  console.log("작업중...");
  setTimeout(() => {
    // resolve('kongmi');
    reject(new Error("네트워크가 없습니다."));
  }, 2000);
});

promise
.then(value => {
  console.log(value);
})
.catch(error => {
  console.log(error);
})
.finally(() => { // 성공 여부 상관없이 무조건.
  console.log('finally!!!');
});

// 연결하기
const fetchNumber = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
});

fetchNumber
.then(num => num * 2)
.then(num => num * 3)
.then(num => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(num - 1), 1000);
  });
})
.then(num => console.log(num)); // 5

3. Async / Await

Async/Await 역시 Promise와 동일한 목적으로 사용합니다.

Async는 말 그대로 비동기 실행을 말하며, Await은 비동기를 실행하는데 결과가 올 때까지 기다리겠다는 의미 입니다.

 

Async/Await을 사용하면 간결하고 가독성이 높은 코드를 구현할 수 있습니다.

비동기 함수를 호출할 때 함수 앞에 await을 정의하면 비동기 함수가 실행되고, 서버로부터 응답을 받을 때까지 대기한 후 결과를 받으면 실행되도록 해줍니다.

 

await을 사용하는 코드가 작성된 함수는 반드시 async여야 합니다.

함수 키워드인 function 앞에 async 키워드가 있는 것을 확인할 수 있습니다.

async function myFunction() {
  const res1 = await fetch(
    "https://jsonplaceholder.typicode.com/posts/1"
  );
  const res1Json = await res1.json();
  console.log(res1Json);

  const res2 = await fetch(
    "https://jsonplaceholder.typicode.com/posts/1",
    {
      method: "PUT",
      body: JSON.stringify({
        id: 1,
        title: "foo",
        body: "bar",
        userId: 1,
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    }
  );
  const res2Json = await res2.json();
  console.log(res2Json);
}

myFunction();