본문으로 건너뛰기

Ajax

🧑🏻‍💻 Ajax vs. Fetch API vs. Axios​

  • Ajax, Fetch, Axios는 모두 JavaScript를 사용하여 브라우저가 서버로부터 웹페이지에 변경이 필요한 데이터만 비동기 방식으로 전송받아, 동적으로 변경할 필요가 있는 부분만 변경하는 프로그래밍 방식에 쓰이는 도구들이다.

  • 위 도구들을 사용하면 필요한 데이터만 통신할 수 있고, 동적으로 데이터를 업데이트할 수 있어 깜박임 현상과 블로킹 현상을 방지할 수 있다.

✅ Asynchronous JS and XML​

  • XML, JSON 등 다양한 데이터를 처리할 수 있으며, 기본적으로 XMLHttpRequest 객체를 사용한다.

  • XMLHttpRequest는 콜백 함수를 사용하여 비동기 작업을 처리한다.

  • 상대적으로 낮은 수준의 API를 제공하므로 구현이 복잡할 수 있다.

✅ Fetch API​

  • JSON 및 다른 형식의 데이터를 처리할 수 있으며, Promise를 기반으로 간단한 API를 제공한다.

  • XMLHttpRequest보다 더 간결한 코드를 작성할 수 있으며, Promise를 사용하여 비동기 작업을 처리한다.

✅ Axios library​

  • 브라우저 및 Node.js에서 사용할 수 있는 JavaScript HTTP 클라이언트 라이브러리이다.

  • JSON 데이터를 처리하는 데 적합하며, Promise를 기반으로 동작 한다.

✅ 주요 차이점​

  • Ajax는 XMLHttpRequest를 사용하기 때문에 콜백 함수를 사용하여 비동기 요청 및 응답을 처리합니다. 이 때문에 후속 처리시 콜백 지옥 현상이나 에러 처리가 힘든 문제점이 있습니다.

  • Fetch API는 프로미스를 기반으로 비동기 요청 및 응답을 처리합니다. 따라서 Ajax에서 나타나는 콜백 지옥이나 에러 처리에 대한 문제점을 해결할 수 있습니다. 하지만 잘못된 url을 넘겼을 때 반환하 에러의 경우 불리안 값을 반환하여 if 문을 활용하여 명시적 에러 처리를 추가로 해주어야 하는 경우가 있습니다.

  • Axios 또한 Fetch API와 마찬가지로 Promise 기반으로 비동기 요청 및 응답을 처리합니다. 이때 axio는 Fetch보다 더 다양한 메서드는 물론 모든 HTTP 에러를 프로미스로 반환하기 때문에 모든 에러를 catch에서 처리할 수 있어 훨씬 편리합니다.

🧑🏻‍💻 JSON​

✅ JS Object Natation​

  • 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포멧이다.

  • JS에 종속되지 않는 언어 독립형 데이터 포맷이다.

  • 작은 따옴표는 사용이 불가하다.

{
    name: "최지훈",
    "age": 5,
    "happt": true,
    "team": ["CS 잘 먹기", "일찍 끝내조"]
}

✅ 직렬화 (serializing)와 역직렬화 (deserializing)​

  • 클라이언트가 서버로 객체를 전송할 때 객체를 문자열화 하는 행위
const obj = {
    name: "최지훈",
    "age": 5,
    "happt": true,
    "team": ["CS 잘 먹기", "일찍 끝내조"]
}

//직렬화
const json = JSoN.stringify(obj):

// 역직렬화
const parsed = JSON.parse(json);

console.log(typeof parsed, parsed);

/*
object {
    name: "최지훈",
    "age": 5,
    "happt": true,
    "team": ["CS 잘 먹기", "일찍 끝내조"]
}
*/

참고 자료

  • 모던 자바스크립트 Deep Dive