JS NORMAL | Https, Ajax, Fetch, JSON

chaen·2024년 1월 22일

JS Grammar

목록 보기

15/28

WWW (World Wide Web) : 인터넷에 연결된 사용자들이 서로의 정보를 공유하는 공간
API (Application Programming Interface) : 프로그램의 상호작용을 도와주는 매개체

💻 Https

기본 개념 정의

Http (Hyper Text Transfer Protocol) : 네트워크에서 HTML 문서, 데이터 파일을 주고 받기 위한 규약
Protocol : 네트워크 통신을 위해 정해진 규칙 (매서드: GET / POST / PUT / PATCH / DELETE.. )
Https : Http + SSL
SSL : Secure Socket Layer (보안 소켓 레이어)

웹 동작 과정

사용자에 의한 이벤트 발생
서버의 웹 서버로 http 요청
데이터베이스에서 데이터 조회
요청 결과 Https 응답 생성
웹 페이지 로드

💻 Ajax

Asynchronous JavaScript and XML
전체 새로고침 x HTML페이지 일부 DOM만 업데이트 → 비동기 처리
자원과 시간 소요 ↓
속도의 향상, 코드 간소화
다양한 UI 구현이 가능
예시로, 구글 Earth, 네이버 자동 검색어, 장바구니 담기 기능 등이 있다.

동기 통신(Synchronous) vs 비동기 통신(Asynchronous)

동기 통신: 전체 페이지를 로딩하는 방식으로, 비동기 통신 이전에 사용되었다.

서버 부하가 커지고 시간이 오래 걸린다.

로딩하는 시간동안 다른 데이터 처리가 불가능

요청과 응답 값의 순서, 처리 결과 값을 보장

비동기 통신: 반응을 기다리지 않고 Non Block 상태로 계속하여 일을 진행하는 방식

자원 사용이 효율적, 성능 향상

순서를 보정하지 않음

Response에 대한 처리 결과를 보장받고 처리해야 하는 서비스에는 적합하지 않음

Ajax 동작 과정

사용자에 의한 이벤트 발생
JavaScript Ajax 호출
서버의 웹 서버로 요청 (XmlHttpRequest)
데이터베이스에서 데이터 조회
요청 결과 Https 응답 생성
JavaScript Ajax를 통해 데이터 응답 받음
웹 페이지 일부만 다시 로드

Ajax 사용하는 다양한 방법

서버에 Ajax 요청을 보내는 방법 브라우저 자체 내장되어 있는 XMLHttpRequest, fetch를 사용하거나, 외부 라이브러리인 jQuery, axios 등을 사용할 수 있다.
Axios가 가장 선호되는 추세이다.

1. XmlHttpRequest(XHR)

AJAX의 가장 핵심적인 구성 요소
서버와 데이터를 주고 받을 때 사용
W3C 표준으로 정의(주요 웹브라우저에 내장)

// IE7 이상, CROME, FIREFOX, SAFARI, OPERA
var var = new XMLHttpRequest();
// IE5, IE6
var var = new 
ActiveXObject("Microsoft.XMLHTTP");

2. fetch

조금 더 쉽게 사용하는 방법
모던 비동기 Promise 기반으로 구성되어, 대부분 브라우저에서 지원

3. JQuery, Axios 라이브러리

JQuery → $.ajax ... 로 임포트하여 사용, React와 Vue가 사용되면서 이용 빈도가 줄었다.
Axios → Node.js와 브라우저를 위한 Promise API를 활용하는 ‘HTTP 통신 라이브러리’
timeout 설정 가능, 브라우저 호환성이 뛰어 남

💻 JSON

JavaScript Object Notation, 즉 자바스크립트 객체 문법 (객체 리터럴)
구조화된 데이터 표현을 위한 표준 형식으로, 데이터 전송 시에 사용된다.
문자열 형태, 따옴표 표시
언어가 다른 서로 다른 프로그램에서 이용 가능하다.

var jsonData = `{
 "name" : "Jaxon", 
 "age" : 42, 
 "gender" : "men",
 "interest" : ["music", "dance"],
 "family" : {"dad":"Jhon","mom","Lilly"},
 "married" : true,
 "Works At" : null
}`;

JSON 내장 함수

JSON.parse() JSON 객체 → JS 객체
JSON.stringify() JS 객체 → JSON 객체

var jsData = JSON.parse(jsonData);
console.log(jsData);

> Object
  name: Jaxon,
  age: 42,
  gender : "men",
  interest : (2)["music", "dance"],
  family : {dad:"Jhon",mom,"Lilly"},
  married : true,
  Works At : null