프론트엔드 - 비동기(AJAX)

✔ 비동기(AJAX)

• AJAX : Asynchronous JavaScript and XML
  • 비동기로 자바 스크립트 실행하며 서버와 통신을 XML로 진행.

1. AJAX

• 언어나 프레임워크가 아닌 구현하는 방식.
• 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법.
  • JavaScript의 XMLHttpRequest(XHR) 객체로 데이터 전달 -> 비동기 방식으로 결과 조회.
  • 화면 갱신이 없어 사용자 입장에서 편리.
  • 동적으로 DOM을 구성해야 하므로 구현이 복잡.

◾ 요청에 대한 응답

• 일반 요청에 대한 응답.
  • data 입력 후 이벤트 발생.
  • 서버에서 data를 이용해 logic 처리.
  • logic 처리에 대한 결과에 따라 응답 page(html) 생성 및 전송.
  • client 화면 전환.
• Ajax 용청에 대한 응답.
  • data 입력 후 이벤트 발생.
  • 서버에서 data를 이용해 logic 처리.
  • logic 처리에 대한 결과에 따라 Text, XML, JSON 등으로 응답.
  • 응답 data를 이용하여 화면 전환없이 현재 페이지에서 동적으로 화면 재구성.

◾ 서버와 클라이언트의 상호 작용

• 웹 화면 구성 : 서버 중심, 클라이언트 중심.
• SSR : 서버 중심의 개발 방식.
  • 화면 구성 : 서버에서 진행.
  • JSP, PHP, ASP 등
• CSR : 클라이언트 중심의 개발 방식.
  • 화면 구성 : 클라이언트에서 진행(동적 화면 구성이 관건).
  • JavaScript

◾ AJAX 사용 방식

• XMLHttpRequest

var ajax = new XMLHttpRequesst();
ajax. onreadystatechange = function(){
  if(this.readyState == 4){
    if(this.status == 200){
      console.log(ajax.responseText);
      console.log(ajax.responseXML);
    }
  }
};
ajax.open("GET/POST", "호출 URL", true);
ajax.send();

• fetch() : [Callback -> Promise -> async/await] + axios

fetch("URL 링크")	// Promise 객체.
  // 콜백 함수를 통해 동작 실행.
  .then((response) => {
    if(!response.ok){
      throw new Error("400 또는 500 에러 발생!!!");
    }
    return response.json();
  })
  .then((result) => {
    console.log(result);
  })
  .catch(() =>{
    console.log("에러 발생!!!");
  });

• jQuery

<script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  $(function(){
    $.ajax({
      type : "GET/POST",
      url : "호출 URL",
      dataType : "xml/json",
  	  success: function(result){
  		//Todo Action
  	  }
    });
  });
</script>

• axios

<script src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  axios
    .get("호출 URL")
    .then((result) => {
      console.log(result.data);
    })
    .catch(() => {
      console.log("에러 발생!!!");
    });
</script>

◾GET 방식과 POST 방식

• GET
  • URL에 변수(데이터)를 포함시켜 요청.
  • 데이터를 Header에 포함하여 전송.
  • 데이터가 노출되어 보안 취약
  • 길이 제한 O
  • 캐싱 가능 (빠른 접근을 위해 레지스터에 데이터를 저장시키는 것.)
• POST
  • URL에 변수(데이터)를 노출하지 않고 요청.
  • 데이터를 Body(바디)에 포함.
  • URL에 노출되지 않아 기본 보안을 달성.
  • 길이 제한 X
  • 캐싱 불가능

2. XMLHttpRequest

• JavaScript가 Ajax 방식으로 통신할 때 사용하는 객체.
• XMLHttpRequest 객체 : Ajax 통신시 전송 방식, 경로, 서버로 전송할 Data 등 전송 정보를 담는 역할.
• 실제 서버와 통신은 브라우저의 Ajax 엔진에서 수행.
  • 자바스크립트로 Ajax 프로그래밍시 브라우저별로 통신 방식이 달라 복잡해짐.(옛날말~)

◾ httpRequest 속성값

• readyState
  • 0(Uninitialized) : 객체만 생성(open 메소드 호출 전)
  • 1(Loading) : open 메소드 호출
  • 2(Loaded) : send 메소드 호출. status 헤더가 아직 도착되기 전 상태.
  • 3(Interactive) : 데이터 일부 받은 상태.
  • 4(Completed) : 데이터 전부 받은 상태.
• status
  • 200(OK) : 요청 성공.
  • 201(Created) : 요청이 성공하여 리소스가 만들어졌음을 의미. (주로 CRUD 이벤트)
  • 403(Forbidden) : 접근 거부.
  • 404(Not Found) : 페이지 없음.
  • 500(Internal Server Error) : 서버 오류 발생.

3. fetch()

• fetch 이전
  • XMLHttpRequest로 직접 HTTP 요청 및 응답.
  • JQuery, axios 등 라이브러리 사용.
  • 브라우저가 fetch()를 지원하며 라이브러리 없이 간단히 구현 가능.

◾ fetch() 사용법

• fetch(url, [options]) : 실행 결과를 Primise 타입의 객체 반환.
  • options를 입력하지 않으면 GET 방식 : url로부터 contents가 다운로드 됨.
  • 결과 사용
    • API 호출 성공 : 응답 객체(response) reseolve
    • API 호출 실패 : 예외(error) 객체 reject
    • resolve, reject를 사용하기에 복잡하기에 async/await 사용.

// 선언
let promise = fetch(url, [options]);

// 사용
let response =  await fetch(url);

if(response.ok){
  // http status code가 200 ~ 299일 경우.
  let json = await response.json();
}else{
  alert("에러 발생 : "+response.status);
}

• 응답 본문(data) 받는 방법.
  • response.text() : 응답을 읽고 text 반환 (csv, xml) => parsing 필요
  • response.json() : 응답을 읽고 JSON 형식으로 파싱.
  • response.formData() : 응답을 FormData 객체로 반환.
  • response.blob() : 응답을 Blob 형태로 반환

◾ fetch() : GET

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => console.log(data.userId));
  //.then((response) => response.text())
  //.then((data) => console.log(data));

◾ fetch() : POST

• method option : POST로 설정
• headers option : Content-Type에 JSON 사용 여부 설정.
• body option : 요청 data 값을 JSON 형식으로 직렬화 하여 설정.

let config = {
    method : "POST",
    headers:{
      "Content-Type" : "application/json",
    },
    body : JSON.stringify({
      title : "안녕하세요.",
      body : "싸피 여러분 좋은 결과 만들어요.",
      userId : 1,
    }),
};

fetch("https://jsonplaceholder.typicode.com/posts", config)
  .then((response) => response.json())
  .then((data) => console.log(data));

◾ fetch() : PUT

let config = {
    method : "PUT",
    headers:{
      "Content-Type" : "application/json",
    },
    body : JSON.stringify({
      title : "안녕하세요.",
      body : "싸피 여러분 좋은 결과 만들어요.",
      userId : 1,
    }),
};

fetch("https://jsonplaceholder.typicode.com/posts", config)
  .then((response) => response.json())
  .then((data) => console.log(data));

◾ fetch() : PUT

fetch("https://jsonplaceholder.typicode.com/posts", {method : "DELETE"})
  .then((response) => response.json())
  .then((data) => console.log(data));

---

✔ 데이터(CSV, XML, JSON)

• Server와 Client는 주고 받을 data의 형식 통일 필수.
  • 대표적인 형식 : CSV, XML, JSON

1. CSV(Comma Separated Values)

• 각 항목을 쉼표(,) 로 구분해 데이터 표현.
• 장점 : 짧은 형식으로 많은 양의 데이터 전송에 유리.
• 단점 : 각각의 데이터가 어떤 내용인지 파악하기 어려움.(데이터 구조를 완벽히 공유할 경우 가능.)

2. XML(EXtensible Markup Language)

• tag로 구분해 데이터 표현.
• 장점
  • tag를 통해 각 데이터의 의미 파악 가능.
  • 사용자 정의 속성을 사용할 수 있어 복잡한 data 전달 가능.
• 단점 : 복잡하게 보일 수 있음.

3. JSON(JavaScript Object Notation)

• CSV와 XML의 단점을 극복한 형식.
• JavaScript에서 사용하는 객체 형식으로 데이터 표현.
• Ajax 사용시 거의 표준으로 사용되는 데이터 형식.
• 특징
  • 데이터를 주고 받을 때 쓸 수 있는 간단한 파일 포멧.
  • 텍스트 기반으로 가벼움.
  • 읽기 편함.
  • Key와 Value 쌍으로 구성.
  • 데이터 주고받을 때 : 직렬화(Serialize), 역직렬화(Deserialize) 사용
  • 프로그램 언어나 플랫폼에 상관없이 사용 가능.
• 직렬화
  • 객체를 문자열로 변환하는 작업
  • 통신을 할 때 문자열로 직렬화하여 주고받는 것이 안전.
  • JSON.stringify
• 역직렬화
  • 문자열을 객체로 변환하는 작업.
  • 서버로부터 받은 문자열은 객체로 역직렬화하여 사용.
  • JSON.parse