풀스택 웹개발 부트캠프 5주차 (2)

비동기 HTTP 통신

• 비동기 HTTP 통신을 이용하여 form을 전송하면, 페이지 이동 없이 실시간으로 변화된 부분만 보여줄 수 있음
• dynamic : 웹 문서가 정적으로 멈춰있는 것이 아니라 일부 내용이 실시간으로 변경
• 비동기 HTTP 통신은 폼의 데이터를 서버와 dynamic하게 송수신 = 동적 form 전송
• 일반 form은 정보를 전송하고 끝! 그 이후에 다른 작업을 하지 않음
• 비동기 form은 정보를 전송한 다음, 백엔드로부터 응답을 받고 그에 따른 작업 수행 → 대부분 비동기 form 사용

동기 vs 비동기

• 동기 방식 : 한 번에 하나만 처리 → 페이지를 이동해 서버가 데이터 처리
• 비동기 방식 : 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리 가능

비동기 HTTP 통신 방법

1. Ajax
2. Axios
3. Fetch

Ajax

• Asynchronous Javascript And XML
• javascript를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신
• 장점
  • JQuery를 통해 쉽게 구현 가능
  • Error, Success, Complete의 상태를 통해 실행 흐름 조절 가능
• 단점
  • JQuery를 사용하지 않는 페이지에서는 사용할 수 없음
  • Promise 기반이 아님
  • 리액트에서 사용할 수 없음

$.ajax({
  url: "/ajax",
  type: "GET" or "POST",
  data: data,
  success: function (data) {
    ...
  },
});

Axios

• 프론트와 백에서 모두 사용 가능하여 가장 많이 이용되는 비동기 HTTP 통신 방식
• Node.js와 브라우저를 위한 Promise API를 활용
• Promise 객체가 반환됨
• 장점
  • Promise 기반 = async, await 가능
  • 리액트에서도 사용 가능
  • 브라우저 호환성이 뛰어남
• 단점
  • 모듈 설치 or 호출을 해주어야 사용 가능
  • 클라이언트에서 사용할 때에는 cdn 방식으로 사용
  • 백엔드에서 사용할 때에는 npm install axios 이용하여 사용
• 백엔드에서는 res.send()를 이용하여 클라이언트로 데이터를 보냄

// GET 방식
axios({
  method: "GET",
  url: "/axios",
  params: data,
}).then(function (response) {
  ...
});

• get 방식을 사용할 경우, url 주소에 그 값을 바로 넣어서 보내는 것도 가능
  ex) url: /axios?name=${form.name.value}&gender=${form.gender.value}

// POST 방식
axios({
  method: "POST",
  url: "/axios",
  data: data,
}).then(function (response) {
  ...
});

Fetch

• Javascript 내장 라이브러리
• Promise 기반
• 장점
  • Javascript 내장 라이브러리이므로 별도로 import할 필요 없음
  • Promise 기반
• 단점
  • Timeout 기능 없음
  • 상대적으로 axios에 비해 기능 부족

// GET 방식
fetch(`/fetch${urlQuery}`, {
  method: "GET",
}).then(fuction (response) {
    return response.json(); 
}).then(function (data) {
    ...
});

• response.text() : 응답을 읽고 텍스트를 반환
• response.json() : JSON 응답을 네이티브 javascript 객체로 파싱

// POST 방식
fetch("/fetch", {
  method: "POST",
  headers: {
    "Content-Type" : "application/json",
  },
  body: JSON.stringify(data),
}).then(function (response) {
  return response.json();
}).then(function (data) {
    ...
});

• JSON.stringify() : javascript 객체를 JSON 텍스트로 변환
• JSON.parse() : JSON 텍스트를 javascript 객체로 변환

JSON

• 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용됨
• {key: value} 형태의 객체
• 외부 api를 사용해서 데이터를 받을 경우, 대부분 JSON 형태
• 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링할 수 있는 라이브러리를 제공함

HTTP 메서드

• get, post, patch, delete
• get 조회 방식일 때에는 url을 query string 또는 파라미터 방식으로 지정
  • query string 방식은 페이지 이동 ❌ 파라미터 방식은 페이지 이동 ⭕

app.use 대신 app.get/post/patch/delete를 사용하는 이유

• get, post, patch, delete는 하나하나가 모두 미들웨어
• use도 미들웨어이므로 app.get 대신 app.use라고 써도 상관 없음
• 그러나 use는 http 전송 방식을 이해하지 못함
  → app.post("/ex")와 app.get("/ex")는 같은 end point 중복 설정 ⭕ (다른 페이지로 인식)
  → app.use("/ex")는 중복 설정 ❌ (같은 페이지로 인식하므로 한 번만 사용 가능)
  → 따라서 get, post, patch, delete로 분리하는 것
• use를 사용할 때에는 app.js 내에서 선언한 위치도 중요함 (위에서 선언된 것이 우선 적용됨)
• 오류 처리는 app.use 사용