Ajax와 REST API 알아보기 [모던 자바스크립트 43장, 44장]

조성원·2023년 5월 22일
0

AJAX

Ajax란 자바스크립트로
브라우저가 서버에게 비동기 방식으로 데이터를 요청하고
데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식입니다.

기존 방식에서는
HTML을 서버로부터 전송받아 처음부터 재렌더링하는 방식으로 화면을 구성했습니다.

이러한 방식에는 몇 가지 문제점이 있었습니다.
변경할 필요가 없는 부분까지 재렌더링하기 때문에

  1. 불필요한 데이터 통신 발생
  2. 화면 전환 시 깜박이는 현상
  3. 서버 응답까지 다음 처리 블로킹

되는 문제점이 있었습니다.

이러한 문제점을 Ajax로 해결할 수 있었습니다.
변경할 필욕 있는 부분만 한정적으로 렌더링하는 방식으로
더욱 빠르고 부드러운 화면 전환이 가능해졌습니다.

JSON

JSON은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷입니다.

JSON.stringfy

JSON.stringfy 메서드는 객체를 JSON 포맷의 문자열로 변환합니다.
클라이언트가 서버로 객체를 전송하기 위한 직렬화를 수행합니다.

const obj = {
  name: 'Lee',
  age: 20,
  hobby: ['traveling', 'tennis']
}

const json = JSON.stringfy(obj)
console.log(typeof json, json)
// string {"name":"Lee","age":20,"hobby":["traveling","tennis"]

JSON.parse

JSON.parse 메서드는 JSON 포맷의 문자열을 객체로 변환합니다.
서버로부터 수신된 JSON 데이터를 객체로 사용하기 위한 역직렬화를 수행합니다.








REST API

REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정하는 아키텍처고,
REST API는 REST를 기반으로 API를 구현한 것을 의미합니다.

REST API의 구성

REST API는 자원, 행위, 표현으로 구성됩니다.
여기서 자원 = URI(엔드포인트), 행위 = HTTP 요청 메서드, 표현 = 페이로드

REST API의 설계원칙

  1. URI는 리소스를 표현해야 합니다.
    동사보다는 명사를 사용해야 합니다.

  2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현해야 합니다.

profile
IT 트렌드에 관심이 많은 프론트엔드 개발자

0개의 댓글