JSON

JavaScript Object Notation
데이터 교환을 위한 경량 형식의 텍스트 데이터 포맷
키와 밸류로 이루어진 자바스크립트의 객체 표기법과 유사한 형태를 가지고 있다.

JSON 객체

{
    "name": "John",
    "age": 30,
    "city": "New York"
}

JSON의 key값은 반드시 문자열이어야 하며, 반드시 큰 따옴표를 사용해야 한다

JSON.parse()

JSON 문자열을 자바스크립트 객체로 변환

JSON.stringify()

자바스크립트 객체를 JSON 문자열로 변환

동기처리와 비동기처리

동기처리(Synchronous)

순차적으로 코드를 실행하는 방식
한 작업이 끝나기 전에는 다음 작업을 수행하지 못한다
블로킹(Blocking)이 발생

비동기처리(Asynchronous)

여러 작업을 동시에 처리할 수 있도록 하는 방식
한 작업이 끝나기를 기다리지 않고 다음 작업을 수행할 수 있다

// 동기 처리 예시
console.log('1');
console.log('2');
console.log('3');
// 1 
// 2 
// 3

// 비동기 처리 예시
console.log('1');
setTimeout(() => {
  console.log('2');
}, 1000);
console.log('3');
// 1
// 3
// 2 // 1초뒤에 실행 됨

Ajax

Asynchronous JavaScript And XML
비동기 통신 방식을 통틀어 이르는 용어
Ajax를 이용하면 웹 페이지에서 비동기적으로 처리할 수 있다.

XMLHttpRequest

서버와의 비동기 통신을 가능하게 하는 여러 기능을 가진 자바스크립트 객체, 줄여 XML이라 부름

// XHR 객체 생성
new XMLHttpRequest();

XMLHttpRequest 속성

open()

요청을 초기화, 통신방법과 요청을 발신할 대상의 주소를 서버로 전달

new XMLHttpRequest().open("method", "url")

매개변수 method
"GET" : 웹 서버에 데이터를 요청할 떄 사용,
URL 주소에 데이터를 입력받는 방식, 전달하는 데이터의 양에 제한이 있다
"POST" : 웹 서버에 데이터를 요청할 때 사용,
URL 주소에 데이터 내용이 나타나지 않고, 전달하는 데이터의 양에 제한이 없음

readystate

요청을 보내는 클라이언트의 상태를 숫자로 나타냄

상태
0 : UNSENT, XHR 객체가 생성되었지만 아직 초기화되지 않은 상태
1 : OPENED, open() 함수가 호출되어 요청이 초기화 된 상태
2 : HEADERS_RECEIVED, send() 함수가 호출되어 서버로 요청을 보냄
3 : LOADING, 서버로부터 데이터를 다운받는 중인 상태
4 : DONE, 서버로부터 데이터를 전송받아 통신이 완료된 상태

status

서버의 전송 상태를 숫자로 나타냄, 완료시 200을 반환

onreadystatechange()

readystate의 속성이 바뀔때마다 발생

send()

클라이언트 측 요청을 서버로 전송, 비동기 요청(기본 동작)인 경우 즉시 반환한다

XML을 통한 Ajax 통신 예시

const requestObj = new XMLHttpRequest();
requestObj.open("GET", "url주소") 



requestObj.onreadystatechange = () => {
    if(requestObj.readyState === 4 && requestObj.status === 200){
        const result = requestObj.responseText;
    }
}

requestObj.send()

fetch

XMLHttpRequest를 대체할 수 있는 API
서버와의 비동기적인 통신을 수행할 수 있다
ES6에 도입
fetch 함수를 사용해 서버와 통신하게 되면, Response 객체를 감싸고 있는 Promise 객체를 반환하며 Promise 객체가 비동기 작업이 처리되었을 때에 Response 객체를 처리한다.

fetch("url 주소")

Promise

Promise는 비동기 작업을 처리하고, 그 결과를 반환하는 객체이다.
객체의 상태마다 처리할 로직을 then catch finally 메서드를 사용해 처리할 수 있다.

promise 객체의 상태

pending : 대기중
fulfilled : 이행/완수 됨
rejected : 거부됨

fetch 함수를 사용해 Promise를 반환받을 수도 있지만, new 연산자와 함께 생성자 함수로 Promise 객체를 생성할 수도 있다.

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
})

new Promise(executor)

Promise 객체의 executor는 resolve와 reject 함수를 받아 매개변수로 사용되며, resolve 함수는 비동기 작업이 완료되었을 때 호출된다.
resolve의 인자로 전달한 값은 then() 메서드에서 받을 수 있고 reject의 인자로 전달한 값은 catch() 메서드에서 받을 수 있다

then()

then() 메서드는 Promise 객체의 상태가 fulfilled(이행)일 때 호출 될 함수를 등록 할 수 있다. (Promise 객체의 resolve)
then() 메서드의 인자는 Response 객체이다
then() 메서드는 Promise 체인을 만들 수 있다.
프로미스 체이닝을 통해 여러개의 비동기 작업을 연결할 수 있음

then 메서드가 반환하는 값이 새로운 Promise 객체이기 때문에 프로미스 체이닝이 가능하다.

const myPromise = new Promise((resolve, reject) => {
  resolve('성공적으로 작업이 완료되었습니다')
})

myPromise.then((value) => {
  console.log(value) // '성공적으로 작업이 완료되었습니다')
});

catch()

then() 메서드에서 예외가 발생했을 때나 promise 객체의 상태가 rejected일 시 처리하기 위해 사용되는 메서드, 예외가 발생하면 catch() 메서드에서 예외처리를 한다. (Promise 객체의 reject)

fetch("url 주소")
	// throw 키워드를 통해 의도적으로 Error 생성
  .then(data => {throw new Error("예외발생")})
  .catch(error => console.log(error))

Response

Response 객체는 HTTP 요청에 대한 응답을 나타내는 객체이다.

fetch() api를 사용하여 서버와 통신했을때에 주로 만나게 된다고 한다

fetch() 함수로 서버와 통신했을 때, Promise 객체를 반환하게 되는데, HTTP 요청이 성공하면
Promise 객체가 fulfilled 상태가 되었을 시, then() 메서드로 Response 객체를 받을 수 있다.

fetch("url 주소").then(response => console.log(response.ok))

Response.ok

응답의 성공 여부를 나타내는 불리언 객체를 반환한다
성공코드 : 200-299

Response.json()

응답 본문을 JSON으로 파싱한 결과로 이행하는 프로미스를 반환한다

await/async

Promise를 더 편하게 사용할 수 있게 해줌
ES2017에 도입
awiat/async 문법에서의 예외처리는 try/catch문을 통해 할 수 있다.

async

function 앞에 위치하며 async를 붙히면 해당 함수는 항상 Promise를 반환

async function test() {
  console.log("hello")
}

test().then();

await

async 함수 내부에서만 사용가능, Promise 객체를 반환하기 전까지 다음 코드를 실행하지 않고 기다리게 만듬(동기처럼 동작하게)
Promise 객체의 response 객체를 반환해줌

async function test() {
  const promise1 = await new Promise((resolve, reject) => { // async 함수 내부에서만 사용 가능
    setTimeout(() => {
      resolve("fulfilled1!")
    }, 100)
  })
  
  const promise2 = await new Promise((resolve) => {
      setTimeout(() => {
          resolve("fulfilled2!")
      }, 100)
  })
  
  console.log(promise1, promise2)
}

test()