Espania

API 웹상 에서 데이터의 흐름은 레스토랑에서 손님 - 웨이터 - 냉장고 의 상호작용 관계를 통해 이해 할 수 있다. 1. 손님이 웨이터에게 주문을 한다. -> Browser(브라우저)가 Server(서버) 에게 Request(데이터 요청) 를(을) 한다. 2. 주문을 받은 웨이터가 냉장고에서 주문 받은 음식의 재료를 찾는다. -> Server(서버)가 DataBase(데이터베이스)에서 Query(원하는 정보를 질의) 하여 원하는 데이터를 찾는다. 3. 냉장고에서 원하는 재료를 가지고 온 후 음식을 만든다. -> DataBase(데이터베이스)에서 (Query Result)정보를 가지고 온 후 Server(서버)에서 데이터를 가공 한다. 4. 완성된 음식을 손님에게 서빙한다. -> 가공된 데이터를 Brow..

await 병렬 처리 비동기 작업을 하는 함수를 await 키워드를 사용하여 동기적으로 제어 할 수 있지만, 자주 사용하게 되면 처리 속도가 느려지기 때문에 비효율적 일 수 있다. 예를 들어, function delay(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } async function getApple() { await delay(3000); return "apple"; } async function getBanana() { await delay(3000); return "banana"; } async function pickFruits2() { const apple = await getApple();//3초 기다리고 ..

async 10초 정도 걸리는 네트워크 통신을 하여 비동기로 서버에서 데이터를 받아온다고 가정했을 때, //do network request in 10 sec... function getUser() { setTimeout(() => { return "espania"; }, 1000); } const user = getUser(); console.log("user : ", user);//undefined 출력 데이터를 받아오기 전에, 'console.log(user)' 함수를 호출 하므로 undefined가 출력된다. 이 때 call back 함수 나 Promise 객체를 사용하게되면, 비동기로 서버에서 받은 데이터를 처리할 수 있다. //call back function function getUser2(..

Promise 란??? Promise는 비동기 처리를 위해 사용되는 하나의 객체이다. 콜백 함수를 사용하여 비동기 작업을 처리할 때 콜백 지옥(CallBack Hell)으로 인한 단점을 보완할 수 있다. Promise 생성 Promise는 ES6에서 새롭게 도입한 객체이므로, 생성자를 통해 인스턴스화 한다. // Promise 객체의 생성 const promise = new Promise((resolve, reject) => {//pending(대기) 상태 // 비동기 작업을 수행한다. if (/* 비동기 작업 수행 성공 */) { resolve('result');//fulfilled(이행) 상태 } else { /* 비동기 작업 수행 실패 */ reject('failure reason');//rejec..

콜백 지옥 이란?? function taskA(a, b, cb) { setTimeout(() => { const res = a + b; cb(res); }, 2000); } function taskB(a, cb) { setTimeout(() => { const res = a * 2; cb(res); }, 2000); } function taskC(a, cb) { setTimeout(() => { const res = a * -1; cb(res); }, 2000); } taskA(1, 2, (res_a) => { taskB(res_a, (res_b) => { taskC(res_b, (res_c) => { console.log("taskC Result : ", res_c); }); }); }); 다음과 같이..

비동기 작업의 문제 해결 특정 로직의 실행이 끝날 때까지 기다리지 않고, 나머지 코드를 먼저 실행하는 비동기 처리는 서버에게 데이터를 요청했을 때, 서버에서의 응답 데이터를 언제 받을지 모른다. 또한, 비동기 작업을 통해 여러 로직을 동시에 처리할 때, 작업들이 정상적으로 끝났는지, 어떤 작업이 우선적으로 끝나게 되는지 확인할 필요가 있다. 이러한 비동기 작업의 특성 때문에 비동기 작업을 좀 더 쉽게 제어하기 위해서 Call Back 함수를 사용한다. Call Back 함수 function taskA(a) { setTimeout(() => { const res = a * -1; return res; }, 2000); } const res = taskA(2); console.log(res); 위 코드에서,..