HTTP통신과 Ajax, JSON

2900 단어 frontendfrontend

1. HTTP

  • HTTP는 Hyper Text Transfer Protocol의 줄임말로 HTML로 작성된 웹 페이지나 동영상, 음성 파일 등을 주고 받기 위한 통신 규약이다.
    ➡️ 이것을 SSL로 암호화한 것이 HTTPS이다.

HTTP에서는 클라이언트가 요청 메세지(Request)를 보내고 서버가 응답메세지(Response)를 반환한다.
HTTP에서는 전송 계층 프로토콜로 TCP를 사용하고 네트워크 계층 프로토콜로 IP를 사용하는데 이를 합쳐 TCP/IP라고 부른다.

(IP주소를 사용한 포트 번호를 이용해 통신할 컴퓨터를 결정한다. 기본적으로 80번 포트를 사용한다.)

1️⃣ TCP/IP란?

  • TCP/IP는 패킷 통신을 위한 인터넷 규약이다.
  1. IP는 데이터의 조각들을 최대한 빨리 목적지로 보내는 역할을 하고 조각들의 순서가 뒤바뀌거나 일부가 누락되더라도 크게 상관하지 않는다. 최대한 빠르게 데이터 조각을 보내는 것에 집중한다.
  2. TCP는 IP보다 느리지만 꼼꼼하게 도착한 조각을 점검하여 정렬하고 빠진 조각을 다시 요청한다.

참고 : 03. 개알못을 위한 TCP/IP의 개념

2. Ajax

  • Ajax는 Asynchronous(비동기적) Javascript + XML로 XMLHttpRequest라는 자바스크립트 객체를 이용하여 웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법을 말한다.

주로 JSON과 text 데이터를 사용하고 있다. Ajax의 포인트는 필요한 부분만 DOM으로 변경한다는 것이다. 또한 통신이 비동기적으로 이루어지기 때문에 서버가 데이터를 다 보내지 않은 상태라 하더라도 클라이언트를 자유롭게 사용할 수 있다.

✳️ Ajax의 장점

  • 최소한의 데이터 통신으로 속도가 빠르고 부하가 적다.
  • 비동기 통신이기 때문에 클라이언트가 다른 작업을 할 수 있다.
  • 웹 페이지의 갱신을 클라이언트가 담당하여 페이지 전환대신 일부분만 변경하여 빠른 렌더링이 가능하다.

3. JSON

  • JSON은 JavaScript Object Notation의 약자로 클라이언트와 서버간의 데이터 교환 규칙(데이터 포맷)을 말한다. JSON은 일반 데이터 포맷보다 효과적인 데이터 구조화가 가능하며 XML보다 가볍기 때문에 사용이 편리하다. 또한 순수한 텍스트로 구성되어 있다.

자바스크립의 객체와 유사한 구조를 가지고 있다.
자바스크립트의 객체와는 다르게 키는 따옴표로 둘러싸야 한다.

{
  "name": "KIM",
  "gender": "male",
  "age": 29,
  "alive": true
}

JSON에도 메서드가 있다.


참고 : HTTP 통신과 Ajax | Rootjang's IT Blog
자바스크립트 10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON | 프론트엔드 개발자 입문편 (JavaScript ES6)

좋은 웹페이지 즐겨찾기