비동기3 통신과 rest-API 그리고 graphql-API, TIL(복습 4일차) Async와 Await 동기와 비동기방식 통신에 있어서 프론트엔드가 요청을 하면 백엔드가 응답을 해준다. 그런데 통신 방식에 있어서 동기방식은 하나의 요청에 하나의 응답 그 다음 요청에 그 다음 요청 순차적으로 진행하게 된다. 자바스크립트는 기본적으로 동기방식인데 자바스크립트의 라이브러리들은 대체적으로 비동기 방식으로 진행된다. 비동기 방식은 게임 다운 받으면서 카톡하는 느낌이 비동기 방식이다. 모든 요청들을 한 번에 진행하게 된다. import axios from "axios"; import { useState } from "react"; export default function RestGet() { const [aaa, setAaa] = useState(""); // async function zz.. 2022. 3. 20. Promise와 Promise.all Promise와 Promise.all promise는 자바스크립트 비동기 처리에 사용되는 객체다. 비동기 처리란 '특정 코드가 실행 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특징'을 말한다. 3가지 상태를 가지고 있는데 다음과 같다. - Pending(대기) : 비동기 처리가 아직 완료되지 않은 상태 - Fulfiled(이행) : 비동기 처리가 완료되어 프로미스 결과 값을 반환해준 상태 - Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 promise의 처리 흐름은 위 이미지를 참고하자. promise.all 메서드는 위 이미지처럼 비동기적으로 병렬로 실행한다. 그래서 위의 async await로 그냥 실행했을 경우에는 6초라는 시간이 걸리는 반면, p.. 2022. 3. 1. 리액트 async와 await (feat. rest-API, graphql-API) 동기와 비동기 리액트에서 async와 await를 알아보기 전에 동기와 비동기에 대해 알아봐야 한다. 동기는 API를 요청 응답하는데 있어서 하나의 응답이 끝난 이후에 요청이 들어가는 방식이다. 비동기는 동기와 달리 여러 일을 할 때 사용한다. 예를 들어 네이버의 경우 뉴스의 게시글 목록을 가져오는 동시에 상품 목록을 가져오는 경우에 해당한다. 스마트폰에서 게임을 다운로드하면서 카톡 하는 나의 모습이 비동기의 모습과 같다. async와 await rest-API나 graphql-API 를 사용해서 요청에 대한 응답으로 받은 객체(JSON)를 변수에 담아서 사용하는데 응답 결과를 변수에 담아서 사용하려면 통신이 완료될 때까지 기다려야 한다. 그때 사용하는 것이 async와 await이다. // mutati.. 2022. 1. 13. 이전 1 다음
