[포스코x코딩온] 웹 풀스택 과정 5주차 회고 | 동적 form 전송

 

지난 시간에 배운 폼 전송은 type="submit"인 버튼으로 폼이 전송되어 페이지 이동이 일어났다.
이렇게 페이지 이동이 바로 일어나면, 예외처리를 할 수 없다는 단점이 있다.

비동기 HTTP 통신을 이용하면, 요청과 응답을 비동기식으로 다루어 웹페이지 전체를 로딩하는 것이 아니라 웹페이지 일부만을 다시 로딩할 수 있다.

이번 시간에는 비동기 HTTP 통신 방법에 대해 배웠다.

비동기 HTTP 통신

동기 방식

• 한 번에 하나만 처리하기 때문에, 페이지를 아예 이동하여 서버가 데이터를 처리한다.

비동기 방식

• 클라이언트가 서버에 데이터를 보내고 응답을 기다리는 동안, 다른 처리도 할 수 있다.
  (로그인 창에서 입력한 정보가 올바르지 않을 때, 다른 페이지로 넘어가지 않고, 이에 대한 경고 문구를 표기할 수 있다.)
• dynamic: 이렇게 웹 문서가의 일부 내용이 '실시간'으로 변경되기 때문에, 비동기 HTTP 통신은 동적 송수신으로 일어난다. (웹 페이지가 정적으로 멈춰있는 게 아님!)

비동기 HTTP 통신 방법

📌 Ajax

• Asynchronous JavaScript and XML
• Javascript를 이용해 클라이언트와 서버 간 데이터를 주고 받는 비동기식 HTTP 방식

장점

• jQuery로 쉽게 구현 가능하다.
• error, success, complete의 상태를 지정하여, 실행 흐름을 조절할 수 있다.

단점

• jQuery를 사용해야만 간편하고 호환성이 보장된다. (jQuery cdn을 항상 가져와야 함)
• 나머지 두가지 방법(Axios, Fetch)과 달리, Promise 기반이 아니다.

🚩 기본 형식

• GET 방식

$.ajax({
  url: '정보를 보내고자 하는 주소',
  type: '요청 방식', // get, post, patch, delete
  data, // 전송할 데이터.
  // data: data, (key, value 이름이 동일할 때는 생략 가능)
  // 여기까진 정보 보내기
  
  // 여기부터 정보 보낸 이후
  success: (res) => {
    // 서버로부터 응답을 받아 실행할 코드 입력
    console.log('res', res);
  }
})

• Post 방식의 경우, type이 post로 바뀜

📌 Axios

• 가장 많이 사용하는 방법으로, 리액트에서도 사용 가능하다. (Ajax는 리액트 사용 불가능)

장점 

• Promise 기반으로 만들어졌다. → .then 사용 가능
• 브라우저 호환성이 뛰어나다.

단점

• 모듈 설치 or 호출을 해야 사용 가능하다. (그렇게 큰 단점은 아니다.)

🚩 설치, 호출

🚩 기본 형식

• Get 방식
  : url 파라미터로 정보를 전달하여, request의 query가 받는다. (req.query) 또는, url 자체에 포함하여 (http://~~~?key=value&key=value) 보낸다.

axios({
  url: '정보를 보내고자 하는 주소',
  method: '요청 방식' // get
  params: data
}).then((res) => { 
  		// 성공 시 실행
  console.log(res.data); // 서버가 제공한 응답
  console.log(res.status); // 서버 응답의 HTTP 상태 코드 (성공이면 200)
  console.log(res.headers); // 서버가 응답한 헤더
}).catch((err) => { 
  		// 에러인 경우 실행
  console.log(err);
}).then(()=>{ 
  		// 항상 실행
})

• POST 방식
  : request의 body로 데이터를 보낸다. (req.body)

axios({
  url: '정보를 보내고자 하는 주소',
  method: '요청 방식' // post, patch, delete
  data: data
}).then((res) => {
  console.log(res.data);
})

• 서버로부터 받은 응답(res)에서 data에 우리가 원하는 정보가 있기 때문에, res.data으로 먼저 접근한 뒤에, 원하는 key 값을 입력해야 value를 뽑아낼 수 있다.

📌 Fetch

장점

• Promise 기반으로 만들어졌다. → .then 사용 가능
• Javascript에 내장되어 있어, 별도의 작업이 필요없다.

단점

• Axios에 비해 상대적으로 기능이 부족하다.

🚩 기본 형식

• Get 방식

fetch(`/fetch${url}`, {
  method: "GET",
}).then((res) => {
  return res.json(); // JSON 응답을 네이티브 Javascript 객체로 파싱
}).then((data) => {
  console.log("data", data)
})

• Post 방식

fetch("/fetch", {
  method: "POST",
  headers: {
    "Content-Type": "application/json", // applicatoin/json 타입으로 백엔드로 보낸다.
  },
  body: JSON.stringify(data),
  //JSON.stringify(); Javascript 객체를 텍스트로 변환 (그 반대는 JSON.parse();)
}).then((res) => {
  return res.json();
}).then((data) => {
  console.log(data.gender);
})