[멋쟁이 사자처럼 프론트엔드 스쿨] 40일차 TIL - AJAX, 동기/비동기, REST API

🍰 요즘... 어렵다.

🍴 AJAX(Asynchronous JavaScript And XML)

: 웹 애플리케이션이 서버와 비동기적으로 소통할 수 있게 해주는 기술.

• 웹 페이지 전체를 다시 로드X -> 서버와 데이터 주고 받음

핵심 요소

• XMLHttpRequest 객체: 브라우저 내에서 서버와의 HTTP 요청을 만들고 처리하는 데 사용됨.
• DOM: HTML 문서의 구조화된 표현 제공. 자바스크립트가 문서의 내용을 동적으로 변경할 수 있게 함.
• XML(or JSON): 서버와 데이터 교환 형식으로 XML이나 JSON 사용.

AJAX의 작동 원리

1. 사용자 이벤트 발생: 사용자가 웹 페이지에서 어떤 작업을 수행 (예: 버튼 클릭).
2. XMLHttpRequest 객체 생성: JavaScript를 통해 XMLHttpRequest 객체를 생성합니다.
3. 서버 요청 설정: XMLHttpRequest 객체를 사용해 서버로 보낼 요청을 설정 (예: GET 또는 POST 요청).
4. 요청 전송: 설정된 요청을 서버로 전송
5. 서버 처리 및 응답: 서버는 요청을 처리하고 결과를 반환
6. 응답 처리: 클라이언트는 서버로부터 받은 데이터를 처리하고, 필요에 따라 웹 페이지의 일부를 업데이트

 

🍴 동기(synchronous) & 비동기(asynchronous)

: 프로그램이 작업을 수행하는 방식에 대한 개념. 프로그램의 흐름과 작업 완료 시점에 따라 차이가 있음.

동기적 처리 방식

• 작업이 순차적으로 실행
• 각 작업은 이전 작업 완료 후에 시작됨
• 작업이 완료될 때까지 프로그램이 기다림

비동기적 처리 방식

• 작업이 병렬적으로 실행
• 작업이 시작되면 결과를 기다리지 않고 다음 작업 수행함
• 작업의 완료 여부와 관계없이 프로그램은 계속 진행됨

🍴 REST API(Representational State Transfer Application Programming Interface)

: 웹 서비스 설계를 위한 아키텍처 스타일

• REST는 HTTP 프로토콜을 기반으로 함
• REST는 리소스를 정의, 해당 리소스에 대한 작업 수행 방식을 명확하게 규정함
• 클라이언트와 서버 간의 상호 작용을 효율적으로 설계하기 위한 일련의 원칙과 제약 조건을 따름

REST API의 구성 요소

• Resource: URL로 식별됨. ex) https://api.example.com/users/123은 ID가 123인 사용자를 나타내는 리소스임
• HTTP 메서드: 리소스에 대한 작업을 나타냄.
  • GET - 리소스 조회
  • POST - 리소스 생성
  • PUT - 리소스 업데이트
  • DELETE - 리소스 삭제
  • PATCH - 리소스의 부분을 업데이트