JSON(JavaScript Object Notation)
- 데이터를 문자열의 형태로 주고 받도록 만들어진 내장객체
- JavaScript는 JSON 전역 객체를 통해 문자열과 JSON 객체의 상호변환을 지원
- stringify() = JSON 객체 -> 문자열 변환
- parse() = 문자열 -> JSON 객체 변환
- JSON에서 이름 작성시 작은 따옴표('') 사용 불가 => 큰 따옴표("")만 사용
XMLHttpRequest
- 서버와의 상호작용을 위해 사용하는 JavaScript 객체(XML 이외의 데이터들도 수집가능)
- readyState = XMLHttpRequest 객체의 현재 상태 출력 (4가 정상적인 실행을 의미)
- status = 서버의 문서 존재 여부 출력 (200= 문서 존재 O, 404= 문서 존재 X)
ex) var request = new XMLHttpRequest();
request.open('GET', URL주소)
request.send()
fetch
- 원격 API를 간편하게 호출할 수 있도록 해주는 메소드
- fetch(URL, option) 형식으로 사용
- option에는 method(HTTP 방식), headers(HTTP 요청 헤더), body(HTTP 요청 전문) 등을 설정해줄 수 있음
- 결과값으로 Promise 타입 객체 반환 => then(), then().catch()를 자주 같이 사용
- 결과값(response 객체)으로부터 status, headers, body 등을 읽어올 수 있음
option method
- fetch의 option에서 method의 기본값 = GET 방식
- GET(출력) 방식을 사용시에는 option에 대한 입력이 따로 필요 X
- POST(추가) 방식 사용시에는 option에 {method:"POST" , headers: {"Content-Type": "application/json"}, body: JSON.stringify({})} 형식으로 입력
- PUT(변경) 방식 사용시에는 {method:"PUT" , headers: {"Content-Type": "application/json"}, body: JSON.stringify({})} 형식으로 입력
- DELETE(삭제) 방식 사용시에는 method:"DELETE"만 입력하면됨 (body, headers 입력 필요 X)
Axios
- node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트
- 사용을 위해서는 <head>태그 안에 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 입력
- axios.get() = fetch(method="get")과 같은 기능 => axios.get()은 json 반환, fetch()는 object 반환
rest(...)
- 객체를 구성하는 모든 요소들을 적용시킬 때 사용
ex) let A = [1,2,3];
=> let B = [...A, 4]; = [1,2,3,4];
ex) let C = {food: 'pizza'};
=> let D = {...C, num: 6}; = {food:'pizza', num:6};
- 함수의 인자에 ...을 적용하여 입력하면 해당 요소들을 모두 함수의 인자로 설정함
ex) function sum(...rest) {
let sum = 0
rest.forEach(num => {
sum += num
});
return sum;
}
console.log(sum(1,2,3,55)); => 1+2+3+55=61 출력
async ~ await
- 함수명 앞에 async를 입력함으로써 적용
- async의 리턴값은 항상 프로미스 객체!
- await = 프로미스 객체의 수행상태가 완벽히 종료될 때까지 대기하다 그 결과를 반환하는 키워드
(await은 프로미스 객체 앞에 입력함)
- await는 async 내부에서만 사용 가능
- callback 함수처럼 비동기화를 동기화시키는 방법 중 하나
- callback = 비동기적으로 코드 실행후 함수 재실행, await = 완료될때까지 기다린후 다음 코드 실행
=> 비동기를 동기화시킬때 callback 방식보다는 async~await 방식을 쓰는 추세
웹 스토리지(Web Storage)
종류
- localStorage = 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있음
- sessionStorage = 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸함
- localStorage, sessionStorage 모두 생성 필요없이 바로 객체로 사용 가능
구조
- key : value의 JSON 구조
메소드 & 프로퍼티
- setItem(k, v) : 데이터를 스토리지에 저장
- getItem(k) : 저장된 데이터를 반환 (key를 이용하여 value 출력)
- removeItem(k) : 저장된 데이터를 삭제
- key(index) : 해당 인덱스에 저장된 키 반환
- length : 저장된 항목의 개수
'빅데이터 부트캠프 > JavaScript' 카테고리의 다른 글
| 빅데이터 부트캠프 81일차 (0) | 2022.11.02 |
|---|---|
| 빅데이터 부트캠프 80일차 (0) | 2022.11.01 |
| 빅데이터 부트캠프 79일차 (JavaScript) (0) | 2022.10.31 |
댓글