Ajax

📌 Ajax에 대해서 설명해주세요.

• AJAX란 asynchronous Javascript and XML
• 비동기적으로 서버에 요청을 하면, 변경할 필요가 있는 부분만 한정적으로 렌더링하여, 페이지 전환 없이도 새로운 데이터를 가져올 수 있습니다.

📌 ajax, fetch, axios의 차이를 핵심 위주로 설명하세요

ajax, fetch, axios 모두 비동기 HTTP 통신 방법

• ajax
  • 자바스크립트에서 비동기 HTTP 통신이 가능하도록 해주며 서버와 통신 시 XMLHttpRequest 객체를 사용하여, XML 뿐만 아닌 JSON, HTML 그리고 일반 텍스트 형식 등 다양한 데이터 포맷을 주고 받는다.
  • 페이지 새로고침 없이 서버에 요청할 수 있고, 서버로부터 데이터를 받고 작업을 수행할 수 있게 해준다.
• fetch
  • 장점
    • JS 내장 라이브러리 -> 별도 import 필요 x, 업데이트 관련 에러 x
    • Promise 기반 -> 데이터 다루기 편리
  • 단점
    • 네트워크 에러 발생 시 response timeout 없이 기다려야 함
    • JSON 변환 과정 필요
• axios
  • 장점
    • 네트워크 에러 발생 시 response timeout 처리 방법 존재
    • 자동 JSON 변환 지원
    • Promise 기반 -> 데이터 다루기 편리
  • 단점
    • 별도의 import 필요 o

📌 XMLHttpRequest와 Fetch API의 차이점은 무엇인가요?

• XMLHttpRequest
  • XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용합니다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다.
• Fetch API
  • Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다.
  • Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있습니다.
  • 콜백 기반 API인 XMLHttpRequest와 달리, Fetch API는 서비스 워커에서도 쉽게 사용할 수 있는 프로미스 기반의 개선된 대체제입니다.

📌 Ajax의 장단점에 대해 설명해주세요.

• 장점
  • 웹 페이지의 속도 향상
  • 서버의 처리가 완료 될때까지 기다리지 않고 처리 가능
  • 서버에서 data만 전송하면 되므로 전체 코딩의 양이 줄어든다.
  • 기존 웹에서 불가능했던 다양한 UI를 가능하게 해준다.
• 단점
  • 히스토리 관리가 안 된다.(보안에 신경써야 한다.)
  • 연속으로 데이터 용청 시 부하가 증가할 수 있다.
  • XMLHTTPRequest를 통해 통신을 하는 경우 사용자에게 아무런 정보가 주어지지 않아서
  • 아직 요청이 완료되지 않았는데 페이지를 떠나거나 오작동할 우려가 발생한다.

📌 JSON과 XML의 차이점에 대해 설명해 주세요.

JSON과 XML은 모두 데이터 직렬화 형식

• 데이터 표현
  • JSON - 키-값 쌍
  • XML - 마크업 언어, SGML 하위 집합, 트리 패턴
• 구문
  • JSON - JS 함수로 빠르게 구문 분석
  • XML - 구문 분석기 사용 -> 프로세스 느려지고 복잡
• 데이터 유형
  • JSON - 문자열, 숫자, 객체 등 한정된 범위의 데이터 유형만 지원
  • XML - 더 유연 (이진 데이터 및 타임스탬프 같은 복잡 데이터 지원)
• 사용 편의성
  • JSON - 간결, 동일한 데이터를 더 작은 파일 크기로 표현하여 빠른 데이터 전송
  • XML - 복잡, 태그 구조
• 보안
  • JSON - 안전
  • XML - 취약 (XML 외부 엔터티 삽입, 비정형 외부 문서 형식 선언)