AJAX, fetch
네트워크 요청
AJAX(Asynchronous Javascript And XML)
fetch(url, [options]) : options가 없으면 GET 메소드로 진행되며 프로미스가 반환된다.
반환된 프로미스 response 프로퍼티
response.status() : 상태
response.ok() : 상태가 200~ 299사이 이면 true
response.text() : 응답을 읽고 텍스트로 반환
response.json() : JSON형태로 파싱
response.formData() : FormData 객체형태로반환
response.blob() : 응답을Blob형태로 반환
response.arrayBuffer() : 응답을 ArrayBuffer형태로 반환
응답헤더
response.headers.get 헤더추출
options에 {headers: {Authentication : 'secret'}} 등 헤더 정보객체를 담아
보낼 수 있다.
POST 요청
options {method: 'POST', headers: {}, body: JSON.stringify(obj)}
주로body에 객체를 실어 문자열로 보낸다.
headers에 Content-type은 문자열일 때 default값으로 text/pain;charset=UTF-8이기
때문에 JSON일 경우 'Content-Type' : 'application/json;charset=utf-8'설정
formData
비동기식으로 데이터나 파일 모두 전송가능하다.
const formData = new FormData()
delete(key), has(key), entries(), keys(), values(), set(key ,value),
get(key)CORS
Cross-Origin Resource Sharing : 도메인, 프로토콜, 포트가 다른곳에 리소스 교환이 가능하도록 하는 기술
simple 요청
simple method : GET, POST, HEAD 메서드를 사용한 요청
simple header :
Accept
Accept-Language
Content-Language
값이 application/x-www-form-urlencoded이나 multipart/form-data, text/plain인 Content-Type
크로스 오리진 요청을 보낼 때 브라우저는 Origin이라는 헤더를 요청에 추가함.
Origin헤더에는 오리진 정보(도메인 프로토콜 포트)가 담겨있음.
서버는 Origin을 검사하고 요청을 받아들이기로 하면 헤더 Access-Control-Allow-
Origin을 응답에 추가함. 이과정에서 브라우저는 CORS 요청 시 Origin이 제대로 설정
및 전송되었는지 확인. 서버로 부터 받은 응답에 Access-Control-Allow-Origin이 있는지
확인 있으면 자바스크립트로 응답에 접근 가능
자바스크립트는 simple 응답헤더에만 접근할 수 있고 이외의 응답 헤더에 접근하려면
서버에서 Access-Control-Expose-Headers라는 헤더에 접근 허용 non-simple
헤더 목록을 담아보냄.
ex) Access-Control-Expose-Headers: Content-Length,API-Key
non-simple 요청
GET, POST뿐만 아니라 PATCH, DELETE등의 HTTP 메서드를 사용해 요청을 보낼 수 있다.
non-simple요청의 경우 브라우저는 preflight 요청을 서버에 먼저 보내
권한이 있는지를 확인한다. 권한 확인이 되면 CORS 심플요청 방식을 사용하게된다.
preflight요청 헤더 : ex) Access-Control-Request-Method : PATCH,
Access-Control-Request-Headers: Content-Type,API-Key쿠키
쿠키
브라우저에 저장되는 작은 크기의 문자열
쿠키 읽기
document.cookie // name=value 쌍으로 구성 ;로 구분
쿠키 쓰기
document.cookie = "name=value" name의 쿠키 값을 value로 변경
name과 value값을 쿠키에 쓸 때
encodeURIComponent(name) + '=' + encodeURIComponent(value) 로
인코딩하여 사용할 것
name=value 쌍은 4kb를 넘으면 안됨.
쿠키 옵션
ex) document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038
03:14:07 GMT" 세미콜론으로 구분
path=/ : /하위경로에 있는 페이지만 쿠키에 접근가능 미지정시 기본값은 현재경로.
domain : domain=goos.com 도메인 옵션에 아무 값도 넣지 않았다면 쿠키를 설정한
도메인에서만 쿠키에 접근 가능. 도메인은 https://www.을 포함하지 않은 값.
expires, max-age expires: 만료기간 설정. 반드시 GMT 포맷으로 설정 GMT로 설정하는
방법 date.toUTCString(); max-age는 초로 환산한 값. max-age=3600
만료기간을 음수로 설정하면 쿠키삭제 가능.
secure : secure을 설정하면 https로 통신하는 경우에만 쿠키 전송가능
semesite : 크로스 사이트 요청 위조 공격을 막기 위한 옵션으로 제 3의 도메인에서
요청이 이루어질 때 쿠키가 전송되지 않음.