6주차 (12,13,17,18장)

서버와 통신하기 - HTTP통신과 JSON

 

HTTP

프로토콜 : 클라이언트와 서버 간에 자료를 주고받기 위해 사용하는 약속된 규칙

웹에서는 HTTP를 프로토콜로 사용한다.

*https는 기존의 http 프로토콜보다 보안이 강화된 것.

 

 

요청방식 Get

서버에 자료를 요청할 때 사이트 주소의 뒤에 자료를 붙여서 보내는 방식.

주소창에 요청 메세지가 함께 표시되고, 요청본문은 따로 사용하지 않음.

요청자료가 무엇인지 공개되어도 문제가 없는 경우에 사용.

 

요청방식 Post

서버에 자료를 요청할 때 중요한 자료를 입력하고 서버로 보낼 때 사용.

요청 내용이 겉으로 드러나지 않고 요청본문(request body)에 따로 담겨서 전송됨.

 

응답 상태

서버로 요청한 자료가 성공적으로 처리되었는지, 실패했는지 등의 응답 상태를 숫자로 표시함.

예) 404코드 : 페이지를 찾을 수 없음을 의미.

 

 

JSON (JavaScript Object Notation)

클라이언트와 서버간에 자료를 주고받기 위해서 양쪽 컴퓨터 모두가 이해할 수 있는 형식을 사용해야 함.

텍스트로만 구성되어, 아주 빠르게 전송된다.

프로그래밍 언어나 플랫폼에 독립적이므로 다양한 언어에서 사용하기 쉽고, 자바스크립트 객체로도 쉽게 변환이 가능하다.

//JSON 형식

{
	"이름" : 값,
		...
}

// 이름부분에 큰따옴표""를 꼭 사용해야 함
//값에는 숫자, 문자열, Boolean, null, 배열만 사용가능. 함수는 사용불가능.

JSON.stringify(객체)	객체를 JSON자료로 변환하기
JSON.parse(JSON문자열)	JSON 문자열을 객체로 변환하기

 

AJAX (Asynchronous JavaScript And XML)

서버와의 비동기 통신을 위한 방법

웹 문서 전채를 다시 불러오지 않고 일부분만 가져와서 실행하는 것.

 

비동기(Asynchronous) : 동시에 일어나지 않는다. 서버에 한번에 자료를 요청하고 완료될 때까지 기다리는게 아닌, 자료를 나누어 요청하고 진행되는 동안 다른 작업을 하는것.

 

XMLHttpRequest : 비동기 통신을 위해 서버와 클라이언트 사이에 주고받은 통신 기법. 서버에 있는 자료를 가져와서 사용하기 위해 씀. 에크마스크립트2015 이후엔 fetch AP를 사용하고있음.

 

예외 처리, 에러 핸들링, 오류 처리

try {
//실행할 코드
} catch (error) {
//try블록에서 예외가 발생했을 때 실행할 코드
} finally {
//try블록 이후에 실행할 코드, 예외와 상관없이 실행됨.
}

throw 메세지
//사용자가 직접 예외를 만들며, 오류 메세지 지정

---

API 활용하기

 

API (Application Programming Interface)

애플리케이션에서 프로그램을 작성할 떄 하나의 프로그램과 다른 프로그램 사이에 쉽게 정보를 주고받을 수 있게 도와주는 인터페이스

(인터페이스 : 웹-사용자, 스마트폰-사용자, 프로그램-프로그램 사이의 경계. 사용자를 도와주기 위한 체계)

 

쿠키

사용자가 웹 사이트에 접속해서 웹 사이트를 서핑하는 동안 사용자 컴퓨터에 저장되는 텍스트 파일.

접속했는 개인정보가 저장되어 사생활 침해의 우려도 존재함.(최대 4,096byte = 4kbyte)

 

웹스토리지

웹 브라우저 저장 공간.

쿠키와는 다르게 사용자가 일부러 스토리지 정보를 서버로 전송하지 않는 이상 서버에서 사용자 pc로 접근하여 스토리지 정보를 읽어가지는 못한다. 또한 쿠키에 비해 큰 용량.(도메인당 2~10MB)

 

-세션 스토리지 sessionSorage

세션 : 웹 브라우저의 창(탭)을 여는 순간부터 닫을 때까지를 말함.

세션동안만 데이터를 기억하고있다가 창이 닫히면 삭제하는 스토리지.

 

-로컬 스토리지 localStorage

세션이 끝나도 계속해서 데이터를 보관하는 스토리지.