05. JS - JSON, 로컬 스토리지, 비동기 데이터 통신

30. 객체 리터럴

객체를 구성하는 속성의 이름과 실제 값을 한 쌍으로 묶어 표현하는 '객체 리터럴'을 이용하여 객체를 생성할 수 있음
이때 속성의 이름을 key, 속성의 실제 값을 value라고 함

예시)

const cat = {
	name: "국희",
    town: "부천"
}

생성자로 객체를 만들면 생성자 함수를 호출해야 객체가 만들어지지만 객체 리터럴을 이용해면 정의만하면 객체가 생성되어 바로 사용할 수 있다

value에 함수를 넣으면

속성의 밸류로 함수가 주어지면, 이 속성은 메소드가 됨

예시)

const cat = {
	name: "국희",
    town: "부천",
    eat: function(){
    	console.log("밥을 먹는다")
    },
    scratch: function(){
    	console.log("건드리면 할퀸다")
    }
}

키는 중복될 수 없다! 그러나 밸류는 같은 것이 있어도 상관 없다

속성에 접근하는 방법

객체 안의 속성 값을 참조할 때는 도트(.)연산자 또는 대괄호([])연산자를 사용할 수 있다

예시)

console.log(cat.town)
cat.scratch()

console.log(cat['name'])
cat['eat']()

키에 접근하는 방법

밸류는 키의 이름으로 접근할 수 있는데 그럼 키 값은 어떻게 접근할 수 있을까 -> Object의 keys라는 메소드 이용, 키 값들을 배열로 반환해 줌

예시)

Object.keys(cat)  // -> ['species', 'title', 'eat', 'scratch']

스프레드 연산자

스프레드 연산자(...)를 사용하면 객체 리터럴의 요소 목록을 펼칠 수 있음
전개 구문, 전개 연산자 등으로 불림

사용 방법

객체 리터럴에 대해 스프레드 연산을 수행하면 구성 요소를 그대로 복사할 수 있음

예시)

const bird = {
	parrot: "앵무새",
    chicken: "닭"
}

const animal = {
	...bird,
    dog: "강아지"
} 
// -> { parrot: '앵무새, chicken: '닭', dog: '강아지' }

스프레드 연산자는 배열의 요소를 복사할 때에도 사용할 수 있음

const pet = ["강아지", "고양이"]
console.log(...pet) // -> 강아지 고양이
console.log(pet) // -> ['강아지', '고양이']

• 스프레드 연산자는 사용된 자리에 개별 요소를 '놓고 온다'
• 원본을 복사하는 것이므로 원본에 대해서는 별다른 영향을 끼치지 않음

31.JSON

JSON은 자바스크립트 객체 표기법(JavaScript Object Notation)을 뜻하며, 자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다

주로 자바스크립트에서만 사용할 수 있는 객체 타입을 다른 프로그래밍 언어에서도 사용할 수 있는 형태(문자열)로 변환하기 위해 사용한다

사용법

JSON 형식은 자바스크립트 객체 리터럴 표기법에 기반을 두고 있음
객체 키와 문자열은 따옴표로 묶어야 하나, 나머지는 그대로 표기할 수 있다

예시)

const gokuJSON = `{
	"name": "손오공",
	"race": "사이야인",
	"skills": [
		"에네르기파",
		"계왕권",
		"원기옥",
		"순간이동"
	]
}`

빌트인 객체 JSON

JSON 형식으로 작성하는게 번거로울 때 JSON 표기를 도와주는 내장 객체 JSON의 두 메소드를 사용하면 객체를 JSON 형식 문자열로 변환하거나, 그 반대의 환원도 가능

메소드	기능	특이사항
stringify	객체 to JSON	undefined, 함수 등은 생략되거나 null로 반환
parse	JSON to 객체	작은 따옴표, 후행 쉼표는 파싱 불가하기도

32. 로컬 스토리지

window.localStorage

localStorage 속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 해 준다
로컬 저장소란 웹 브라우저에서 각 도메인에 대해 할당해주는 저장 공간으로, 여기에는 데이터를 영구적으로 보관할 수 있다
데이터 보관 시에는 데이터의 이름과 데이터의 실제 값을 각각 지정하며, 이때 데이터 타입은 문자열 형태만 허용된다

• 영구적으로 보관한다?
  브라우저를 껐다 켜거나 페이지를 새로고침해도 해당 도메인에 데이터가 남아있도록 할 수 있다는 뜻

사용방법

로컬 스토리지로부터 데이터를 읽거나 쓸 때에는 메소드를 이용

메소드명	기능	사용 예
setItem	키와 밸류를 전달받아 저장	setItem("key", "value")
getItem	전달받은 키에 해당하는 밸류 반환	getItem("key")
removeItem	전달받은 키에 해당하는 데이터 삭제	removeItem("key")
clear	모든 데이터 삭제	clear()

로컬스토리지의 데이터 이름(키 값)은 중복될 수 없다!

33. 배열 메소드 추가

새로운 배열을 만드는 배열 메소드 map, filter

• map: 배열 각각의 요소에 대해 콜백을 호출한 결과를 모아 새로운 배열을 반환
• filter: 배열 각각의 요소에 대해 콜백을 호출한 결과 true를 반환하는 모든 요소를 모아 새로운 배열 반환

두 메소드의 공통점
1. 콜백함수를 인자로 전달받는다
2. 배열의 멤버를 기반으로 새로운 배열을 생성한다

35. 비동기 데이터 통신

HTTP

HTTP(HyperText Transfer Protocol)는 웹 브라우저와 웹 서버가 데이터를 주고받을 수 있게 디자인된 통신 규약
-> 웹을 통해서 데이터를 주고받을 때 그 데이터를 주고받는 방식의 이름
HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 이 규약을 암호화하여 보안을 확보한 규약을 HTTPS라 한다

데이터를 주고 받는다?
HTML, 이미지, 영상, 음성 파일 등을 주고 받는다

HTTP 통신

HTTP에서는 클라이언트(사용자)가 서버(호스트)에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환
서버는 응답 메시지를 반환한 후에 초기 상태로 돌아감
이러한 특징으로 인해 HTTP를 stateless 규약이라고도 한다

HTTP 요청

HTTP 요청 메시지는 요청 행, 요청 헤더, 메시지 본문으로 구성된다

• 요청 행: 요청 메소드, URL(요청 주소), HTTP 버전(프로토콜 버전) 정보 등을 포함
• 요청 헤더: 부가적인 정보(메시지 정보, 메시지에 저장한 데이터 정보 등)를 포함
• 메시지 본문: 서버 측으로 보내는 데이터를 포함

요청 메소드: GET, POST 등 데이터 송수신 방식을 지정한 것

HTTP 응답

HTTP 응답 메시지는 응답 행, 응답 헤더, 메시지 본문으로 구성된다

• 응답 행: 상태 코드, 보충 메시지, HTTP 버전 정보 등을 포함
• 응답 헤더: 메시지 정보, 메시지에 저장한 데이터 정보 등을 포함
• 메시지 본문: 클라이언트 측으로 보내는 데이터를 포함

상태 코드: 요청이 성공적으로 완료되었는지를 보여주는 숫자 코드

주요 상태 코드

상태 코드	상태 이름	내용
200	OK	요청 성공
401	unauthorized	인증 실패
403	Forbidden	엑세스 허용되지 않음
404	Not Found	요청한 리소스를 찾지 못함
500	Internal Server Error	서버 내부 오류 발생
503	Server Unavailable	서비스를 일시적으로 사용 불가

400번대는 대체로 요청을 보낸 쪽이 잘못한 경우, 500번대는 대체로 서버쪽 문제

XMLHttpRequest

XMLHttpRequest는 서버와 상호작용하기 위해 사용하는 자바스크립트 빌트인 생성자이다
이를 이용하면 서버로부터 데이터를 받아와 전체 페이지의 세로고침 없이도 페이지의 일부만 업데이트하는 비동기 방식의 데이터 통신을 수행할 수 있다

이러한 프로그래밍 기법을 Ajax라 한다
Ajax(Asynchronous JavaScript And XML)는 웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법을 말한다

사용 흐름

Ajax 기법에 기초한 XMLHttpRequest 비동기 통신은 다음 세 단계를 거친다

1. XMLHttpRequest 객체를 생성
2. 서버와 통신할 때 필요한 정보 및 처리 방법 등을 기입
3. 요청을 전송해 통신을 시작

이벤트 핸들링

비동기 통신을 할 때는 서버와의 통신 상태를 감시할 수 있으며 이때 발생하는 이벤트에 대한 이벤트 핸들러를 등록할 수 있음

이벤트명	발생하는 시기
abort	요청이 취소되었을 때
error	요청이 실패했을 때
load	요청을 성공하여 응답을 가져올 수 있을 때
progress	데이터를 주고받는 중
timeout	요청 시간을 초과했을 때

사용 방법 - 요청 초기화 및 전송

서버에 요청을 보낼 때는 XMLHttpRequest 객체의 open 메소드로 요청을 초기화하고, 이후 send 메소드로 요청을 보냄

예시)

const request = new XMLHttpRequest();
request.open("HTTP메소드", "서버URL");
request.addEventListener('load', function(){
	// response: 요청이 처리가 되면 rqs에 response라는 응답에 대한 키가 업데이트됨
    console.log(JSON.parse(request.response));
})
request.send()

웹 브라우저 창이 처음 열렸을 때 실행 시킬 동작을 작성하는 방법

window.addEventListener('load', function(){
	//실행시킬 동작
}}

window의 'load'(웹 페이지가 처음 로딩되었을 때)와 request의 'load'(응답이 로드되었을 때)는 다름