(출처: https://ko-de-dev-green.tistory.com/18)

async ( Promise를 더 간략하게 ) 만약 비동기적 처리를 해주지 않으면 자바스크립트는 싱글쓰레드기 때문에 딱 이 코드를 보자마자 자바스크립트는 fetchUser를 Call하고 100초동안 사용자는 아무것도 못하고 계속 기다려야 한다. -> Promise를 사용 Promise는 resolve, reject를 통해 완료해주지 않으면 계속 pending 상태 await ( async 내에서 ~할 때까지 기다려! return값을 반환해주는 함수 ) 그러나 저 pickFruits 부분에 return then return then으로 또 Callback 지옥이 생각 난다... 따라서 async로 더 간단하게 만들어보자. 병렬 처리 Promise는 만들자마자 저 안에 코드가 실행되기 때문에(바로 getAp..

Promise : Callback chain을 쓰지 않고도 비동기 코드를 깔끔하게 쓸 수 있게 해줌. 비동기 실행이 완료된 후에 .then .catch .finally 등의 핸들러를 붙여 데이터처리로직, 에러처리로직, 클린업로직을 실행한다. promise 객체는 fulfilled, pending, rejected 세 가지 상태가 있다. fulfilled : 비동기 실행이 성공한 상태 pending : 비동기 실행이 끝나기를 기다리는 상태 rejected : 비동기 실행이 실패한 상태 Multiple Promise handling : Promise.all() 모든 프로미스가 fulfilled되기를 기다린다. 하나라도 에러 발생하면 모든 프로미스 요청이 중단. Promise.allSettled() 모든 프로..

동기 비동기 실행과 콜백 기본적인 자바스크립트의 함수 실행 Synchronous callback Asynchronous callback -> 이렇게 하면 Callback으로만 함수를 짜게 된 것. (함수를 부르고 그 안에서 또 부르고..) Callback Hell 예제 UserStorage라는 클래스를 정의 다음과 같은 작업을 수행 id, password를 받아옴. 꾸진 백엔드라고 가정하고 login과 role를 받아올 때 각 2초,1초가 걸린다고 set login role Callback pattern : 비동기 처리 후 실행될 코드를 Callback function으로 보내는 것. Callback Hell)등이 단점으로 부각됨. 따라서 Promise라는 것을 활용해 비동기 처리의 순서 조작, 에러 핸..

자바스크립트 동기 비동기란 웹의 발전 과정 서버에서 모든 데이터를 로드, 페이지 만듦(비동기X) -> AJAX(Asynchronous JavaScript And XML) 기술로 Client-Side로 서버 요청을 보내 데이터 처리 가능하게됨 -> XMLHttpRequest라는 객체로 서버로 요청 값으로서의 함수 1. 함수도 값이다. function a(){} 와 같은 것은 var a=function(){} 로 가능하다는 뜻. function a() {} // var a=function a(){} 함수라고 부른다. //객체 안에 함수가 들어가있으면 메소드라고 부른다. a={ b:function(){ } }; 2. 함수거 객체 내에 있다면 메소드 라고 부른다. 위 같은 상황에서 b는 key(속성, prope..

1번 첫번째 커밋 정답 더보기 //index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.querySelector('#root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analy..