React 공부 5일차

JSON이란?

Java Script Object Notation = 자바 스크립트 객체 표기법

즉, 데이터를 쉽게 ' 교 환 '& ' 저 장 ' 하기 위한 텍스트 기반의 데이터 교환 표준

텍스트 기반, 다양한 프로그래밍 언어에서 data를 교환, 저장할 수 있다.

기본적으로 객체 형태 { key : value } 이며 number, string, boolean, object, arary, null등 다양한 타입의 자료형을 사용한다.

 

1) JSON.stringify(arg): 객체 ------>문자열 변환

2) JSON.parse(arg): 문자열 ------>객체 변환 (단, JSON.parse(arg) 사용 시 문자열이 반드시 JSON 형식이어야 함.)

https://codingazua.tistory.com/4

[JSON] JSON 이란 무엇인가? 간단 정리 및 예제를 통한 사용 방법

동기(synchronous)&블럭(block)

서버에 보낸 요청에 대한 응답을 받아야지만 다음 동작 수행 가능(병렬적 일처리 불가능)

비동기(asynchronous)&논블럭(non-block)

서버에 보낸 요청에 대한 응답을 받지 못했더라도 동시에 다른 작업 수행 가능(병렬적 일처리 가능)

 

CallBack function

함수의 인자로 전달되는 함수, 전달받은 함수 내에서 실행됨.callback 함수의 쓰임과 동작 과정은 아래 블로그를 참조.(여러번 읽어보기)https://pro-self-studier.tistory.com/89

1. 동기와 비동기, 콜백함수

 

Promise

비동기 작업의 최종 완료 혹은 실패를 나타내는 객체

기본적으로 promise는 함수에 callback을 전달하는 대신 callback을 첨부하는 방식의 객체이다.

[promise의 사용]

function successCallback(result) {

  console.log("Audio file ready at URL: " + result);

}

function failureCallback(error) {

  console.log("Error generating audio file: " + error);

}

const promise = createAudioFileAsync(audioSettings);

promise.then(successCallback, failureCallback);

위와 같이 callback을 전달하지 않고 callback을 붙여 사용할 수 있게 Promise를 반환해준다.

.then()을 여러개 사용해서 여러개의 callback을 추가할 수 있다. 각 콜백은 주어진 순서대로 순차적으로 실행된다.

 

 

 

이전 단계 비동기 작업이 성공하고 나서, 그 결과값을 이용해 다음 비동기 작업을 수행해야 할 때

-> promise chain을 이용하여 해결

☆중요: 반환값이 존재해야 함.☆

콜백 함수가 이전의 promise의 결과를 받아야 하니까. (화살표 함수 () => x 와 () => {return x;}는 같음.)

doSomething()

  .then(function (result) {

    return doSomethingElse(result);

  })

  .then(function (newResult) {

    return doThirdThing(newResult);

  })

  .then(function (finalResult) {

    console.log("Got the final result: " + finalResult);

  })

  .catch(failureCallback);

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises

Using promises - JavaScript | MDN

 

async / await

Promise를 더 편하게 사용할 수 있도록 하는 문법.

async function a() {

  return 1;

}

async

: function 앞에 붙으면 해당 함수는 항상 Promise를 반환. 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 반환되도록 함. 

 

await

: async 함수 안에서만 동작함.

await를 만나면 promise가 처리될 때 까지 기다렸다가 결과는 그 이후 반환됨.

 

async function f() {

  let promise = new Promise((resolve, reject) => {

    setTimeout(() => resolve("완료!"), 1000)

  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"

}

f();

(*)로 표시된 줄에서 실행이 잠시 중단되었다가 promise가 처리되면 실행이 재개됨.

그러면 promise의 result값이 변수 result에 저장되고 이하 코드가 실행됨.

즉, 이 코드를 실행하면 1초 뒤에 "완료!"가 출력됨.

async, await는 비동기식 함수이므로, promise의 실행 완료를 기다리는 동안 엔진이 다른 일을 할 수 있기 때문에 CPU 리소스가 낭비되지 않는다는 장점이 있음.

 

 

[사용 예시 코드]     출처: javascript.info 문서,  '프라미스와 async, await'

async function showAvatar() {

  // JSON 읽기

  let response = await fetch('/article/promise-chaining/user.json');

  let user = await response.json();

  // github 사용자 정보 읽기

  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);

  let githubUser = await githubResponse.json();

  // 아바타 보여주기

  let img = document.createElement('img');

  img.src = githubUser.avatar_url;

  img.className = "promise-avatar-example";

  document.body.append(img);

  // 3초 대기

  await new Promise((resolve, reject) => setTimeout(resolve, 3000));

  img.remove();

  return githubUser;

}

showAvatar();

https://ko.javascript.info/async-await#ref-64

async와 await