Javascript(JSON, ajax)
*JSON
JSON을 사용하면 다른 프로그래밍 언어와의 데이터 송수신이 간단해진다.
서버와 웹 클라이언트가 데이터를 주고 받을 때 JSON을 자주 사용
JSON(JavaScript Object Notation)은 자바스크립트 객체를 문자열로 표현하는 데이터 포맷
객체를 직렬화 할 수 있다.
속성과 값의 쌍의 배열 자료형이이면 직렬화가 가능
원래는 자바스크립트 언어로 부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립적인 포맷
사람과 기계가 모두 읽기 편하도록 고안
자바스크립트 객체를 JSON 문자열로 변환하기 : JSON.stringify
첫번째 인수인 value에는 JSON으로 변환할 객체를 지정
두 번째 인수인 replacer에는 함수 또는 배열을 지정
JSON 문자열을 자바스크립트 객체로 환원하기 : JSON.parse
인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환
*HTTP 제어(Ajax)
Ajax란 자바스크립트를 사용하여 비동기 HTTP 통신을 하는 기법
Ajax 기법을 활용한 웹 앺프리케이션은 사용자에게 데스크톱 애플리케이션과 같은 편의성을 제공
HTTP
웹 브라우저와 웹서버가 HTML로 작성된 웹페이지나 동영상, 음성 파일 등을 주고받기 위함 프로토콜
HTTP 통신
HTTP에서는 클라이언트가 서버에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환
서버는 응답 메시지를 반환한 후에 초기 상태로 돌아간다.
이 때 서버는 클라이언트의 상애를 저장하지 않는다.
HTTP에서는 전송 계층 프로토콜로 TCP를 사용하고 네트워크 계층 프로토콜로 IP를 사용한다.
이 두계층을 합쳐서 TCP/IP라고 부른다.
HTTP에서는 기본적으로 80번 포트를 사용
HTTP 요청 메시지
요청 행, 요청 헤더, 메시지 본문으로 구성
요청 메시지의 전송 방법은 GET와 POST 방식
Ajax
Ajax란 Asynchronous JavaScript and XML의 약자
Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
JSON, XML, HTML, 텍스트파일 등 다양한 데이트를 주고 받을 수 있다.
Ajax의 장점
웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.
웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.
백그라운드 영역에서 서버로 데이터를 보낼 수 있다.
Ajax의 한계
Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 폴링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
Ajax로는 바이너리 데이터를 보내거나 받을 수 없다.
Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다.
클라이언트의 PC로 Ajax 요청을 보낼 수는 없다.
XMLHttpRequest
XMLHttpRequest 객체
Ajax의 가장 핵심적인 구성 요소
Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용
웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것이 이 객체를 사용하기 때문이다.
전체 페이지를 새로 고침하지 않아도 URL을 통해 데이터를 전송하거나 받아올 수 있다.
기본적인 처리의 흐름
① XMLHttpRequest 객체를 생성
② 서버와 통신 할 때 사용할 처리 방법을 등록
③ 요청을 전송하고 통신을 시작
객체 생성
XMLHttpRequest 객체는 브라우저에서 제공하는 Web API이기 때문에 브라우저환경에서만 정상적으로 동작
node.js 환경에서는 제공되지 않는다.
XML-HttpRequest 생성자 함수를 호출해서 생성
const xhr = new XMLHttpRequest();
요청 전송
클라이언트(브라우저)에서 서버로 요청을 보내기 위해서는 HTTP Method, 요청 URL을 정의하는 것 부터 시작 한다.
(XMLHttpRequest의 내장 함수인 open()을 이용)
xhr.open('GET', '/posts'); // HTTP Method, URL 정의, 비동기 여부(기본 값true)
open() 함수에서 첫 번째 매개변수는 HTTP Method, 즉 HTTP 요청 방식
open() 메소드
open() 메소드는 서버로 보낼 Ajax 요청의 형식을 설정
테스트
가짜 서버를 만들어서 요청 및 응답 테스트를 할 수 있다.
JSONPlaceholder(https://json-placeholder.typicode.com/)
Fetch API
Fetch API와 XMLHttpRequest의 가장 큰 차이점은 Fetch API는 Promise방식으로 구현되어 있다.
첫 번째 then() 함수는 서버 요청에 대한 응답이 왔을 때 실행이 된다.
이때 응답받은 데이터는 문자열 형식이기 때문에 response.json() 함수를 호출해서 json 데이터로 변경을 실행 한다.
json 데이터로 변경이 완료되면, 두 번째 then()함수의 매개변수로 변경된 json 데이터를 전달 한다.
