HTTP 통신, 라이브러리

김서윤·2024년 7월 3일

2024 http 라이브러리 프론트엔드

*️⃣ HTTP 통신

HTTP 통신이란?
클라이언트와 서버가 데이터를 주고받는 과정

요청 Request, 응답 Response으로 이루어짐
클라이언트가 서버에게 요청을 보냄
서버는 요청에 대한 응답 결과를 줌
클라이언트는 사용자에게 응답 받은 결과를 보여줌

비동기 HTTP 통신의 종류 : Ajax, Fetch, Axios
→ response와 request를 비동기 식으로 다루는 통신

1️⃣ Ajax

→ Asynchronous JavaScript And XML (비동기 자바스크립트와 XML)

비동기적으로 자바스크립트 코드로 서버에 request를 보내고 response를 받아오는 기술
JSON, XML 등 다양한 데이터 형식을 사용하여 요청과 응답을 주고 받으나 요즘은 JSON 형태를 주로 사용
전체 페이지를 새로고침하지 않고, 일부분만 리로드

➕ Ajax에 대한 오해
JQuery의 Ajax가 아닌, Ajax를 JQuery를 통해 보다 더 쉽게 사용할 수 있음
Jquery를 사용할 경우 브라우저 호환성에 대해서도 보장 가능

순수 Ajax를 사용하는 경우

// use Ajax without Jquery

function reqListener (e) {
    console.log(e.currentTarget.response);
}

var oReq = new XMLHttpRequest();
var serverAddress = "https://jsonplaceholder.typicode.com/posts";

oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();

Jquery를 통해 Ajax를 사용하는 경우

// use Ajax with Jquery

var serverAddress = 'https://jsonplaceholder.typicode.com/posts';

// jQuery의 .get 메소드 사용
$.ajax({
    url: ,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

2️⃣ Fetch

→ ES6에 도입된 자바스크립트 내장 라이브러리

프로미스(Promise) 기반으로 동작
모던 웹 애플리케이션에서 사용되는 새로운 방식의 네트워크 요청이 가능

//fetch
const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
  	name:'may',
    	age:20
  })

  fetch(url,options)
  	.then(response => console.log(response))

3️⃣ Axios

→ 웹 브라우저, Node.js를 위한 Promise API를 활용하는 라이브러리

데이터를 받아올 때, 자동으로 JSON 형식으로 데이터를 변환
return을 promise 객체로
다른 라이브러리나 모듈과의 협업이 용이
서버와의 요청과 응답에 대한 에러 핸들링 및 디버깅이 용이

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Seoyoon',
    lastName: 'Kim'
  }
});

4️⃣ HTTP 통신 비교

	Ajax	Fetch	Axios
설치	X	X	O (크기가 큼)
브라우저 호환성	O (← JQuery)	X	O
JSON 형식 자동 변환	X	X	O
Promise 기반	X	O	O
XSRF 방어	X	X	O

XSRF(Cross-Site Request Forgery) : 사용자가 의도하지 않은 요청을 악성 웹 사이트로부터 받는 공격

→ (개인적인 의견) 웹 프론트엔드 프레임워크(React, Vue.js 등)을 다룰때에는 Axios 사용 추천❗️

→ (Next.js) App Router의 서버 사이드 로직 처리에서 fetch 사용을 권장❗️

출처

김서윤

이전 포스트

[Codeit boost 1기] 2주차 메타 태그/자바스크립트 웹 개발 기본기 (1)

다음 포스트