Communication
최근의 프론트 앤드 변화 - 모바일에서 접속을 많이하고 사용자에서 가까운 쪽에서 많은 것을 할수 있도록 합니다.
모바일은 언제든지 네트워크에 변화가 생겨서 서버와의 연결이 끊어질수 있습니다.
화면 전환은 최소화 해야 합니다. 이런 이유 때문에 single Page Applicagtion입니다.
화면 전환을 하지 않는 대신 하나의 화면에 2개 이상의 컨텐츠를 보여 줄수 있어야 합니다.
로컬에 저장해서 출력하는 부분에 대해서도 고민을 해야 합니다.
AJAX (Asynchronous Javascript XML-eXtensible Markup Language)
XML(eXtensible Markup Language)
HTML은 마크업 형태로 작성을 해서 해석을 브라우저가 합니다.
HTML에서는 태그의 기능이 고정이다.
확장 마크업 언어로 태그의 기능을 개발자가 정하는 것입니다.
XML의 목적은 서로 간에 데이터를 교환하기 위해서 만든 포맷.
AJAX는 비동기적으로 XML을 주고받기 위한 자바스크립트 기술
최근에는 XML뿐만 아니라 JSON이나 CSV(TEXT)도 데이터 포맷으로 사용됩니다.
최근에는 자바스크립트를 이용해서 비동기적으로 데이터를 받아오는 것을
AJAX라고 합니다.
=>자바스크립트에서는 AJAX를 XMLHttpRequest라는 객체를 이용해서 구현합니다.
AJAX는 예전에 나와서 가독성이 떨어지기 때문에 fetch API가 추가되었습니다.
HTML5에서는 Server Sent Events(Web Push)와 Web Socket API가 추가되었습니다.
기본적으로 클라이언트와 서버의 통신 방식은 클라이언트가 서버에게 요청을하면 서버가 응답을 보내는 방식입니다.
push는 클라이언트의 요청이 없어도 서버가 클라이언트에게 데이터를 전송하는 것입니다.
HTTP나 HTTPS는 데이터 이 외에 헤더정보를 같이 전송하고 한번응답이 오면 연결이 끊어집니다.
짧은 메시지를 보낼때 HTTP나 HTTPS를 사용하면 오버헤드가 큽니다.
상태유지가 안되기 때문에 쿠키와 세션을 이용해서 상태 유지를 했는데 이 문제를 해결하기 위해서 연결형 서비스이고 오버헤드가 적은 Web Socket 이 HTML5에서 추가되었습니다.
AJAX작업 순서
XMLHttpRequest 객체 생성
서버에게 보낼 데이터를 준비
서버에게서 응답이 왔을때 처리할 콜백 함수를 등록하고 그 안에서 처리하는 코드를 작성
open메서드를 호출해서 연결요청을 준비
send메서드를 호출해서 요청을 전송
XMLHttpRequest의 속성
readyState: 객체의 상태를 나타내는 속성으로 숫자로 저장되는데 0이면 객체 생성 직후
이고 1이면 open()을 호출한 상태이고 2이면 send()를 호출한 상태이며 3이면 서버에서
응답이 오기 시작한 상태이고 4이면 서버 응답이 완료된 상태
status: 서버에서 응답을 보냈을 때 응답의 상태 입니다.
100번대이면 처리 중
200번대이면 정상 응답
300번대이면 redirect 중(처리는 끝나고 응답을 전송하고 있는 경우)
400번대이면 클라이어늩 오류 (401-권한없음 , 404-요청한 URL을 처리할수 없음)
500번대이면 서버 오류
responseXML: 서버가 XML로 전송한 경우 XML 데이터, XML파싱을 해서 사용
responseText: 서버가 XMl이외의 형식으로 전송한 경우의 문자열 ,json 데이터의 경우 json 파싱을 해서 사용
XMLHttpRequest의 메서드
abort(): 요청 취소
open(요청 방식, 요청, URL, 비동기 전송 여부): 연결 요청 준비
send(데이터):요청 전송
setRequestHeader(인자, 값):헤더 설정을 하는것으로 인증(로그인)에서 중요
sendAsBinary(데이터): 요청을 전송하는 것으로 파일을 업로드 하고자 할때 사용
XMLHttpRequest 이벤트 :
abort:취소할 때
error: 에러가 발생했을 때
load : 응답이 전부 왔을 때
SOP(Same Origin Policy - 동일 출처 정책)
동일한 출처에서 불러온 데이터만 사용할수 있도록 하는 브라우저의 보안 정책
ajax와 Fetch API에는 적용이되고 img,link,script, video, audio, embed 등에는 적용되지 않음 ajax와 Fetch API에서는 동일한 도메인의 데이터만 사용할수 있습니다.
다른출처의 데이터를 ajax와 Fetch API에서 사용할려면 서버에서 CORS(교차 출처 리소스 공유) 설정을 하거나 클라이언트 쪽 에서 proxy(웹에서 데이터를 받아올수 있는 언어의 프로그래밍을 이용해야 하는데 react 나 vue에서는 설정만으로 가능) 를 이용해야 합니다.
JSON파싱 XML파싱 집에서 해보기
XML데이터 = ajax객체.responseXML;
//필요한 태그 추출
태그들= XML데이터.getElementsByTagName("태그 이름");
