Javascript 21

[JavaScript] API 호출하기

async function getData() { let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonResponse = await rawResponse.json(); console.log(rawResponse); console.log(jsonResponse); } getData(); jsonplaceholder라는 사이트를 이용해 통신으로 데이터를 받아옴. 이처럼 누구나 데이터를 가져다 쓸 수 있게 열어놓은 것들을 open API라고 함. api 호출시도 전에 배운것과 같이 동기처리를 해야함

Javascript 2022.04.05

[JavaScript] async & await - 직관적인 비 동기 처리 코드 작성하기

function delay(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } async function helloAsync() { await delay(3000); return "hello async"; } async function main() { const res = await helloAsync(); // 여기 console.log(res); } main(); 여기라 표시한 부분에 await를 쓰지 않고 실행하면 Promise{} 이라고 콘솔에 찍히게 된다 그 이유는 비동기의 코드가 끝나지않고 콘솔에 출력했기 때문. 동기적으로 3초 후에 출력하기 위해 await를 걸어야 함

Javascript 2022.04.05

[JavaScript] Promise - 콜백 지옥에서 탈출하기

function taskA(a, b, callback) { setTimeout(() => { const result = a + b; callback(result); }, 2000); } function taskB(a, callback) { setTimeout(() => { const result = a * 2; callback(result); }, 3000); } taskA(3, 4, (a_res) => { console.log("taskA : " + a_res); taskB(a_res, (b_res) => { console.log("taskB : " + b_res); }); }); 이러한 콜백지옥의 코드를 해결하기위해 Promise 객체를 사용함. Promise객체는 resolve(성공)시와, reje..

Javascript 2022.04.05

[JavaScript] 동기 & 비동기

동기와 비동기를 이해하기 위해선 쓰레드를 알아야함. 자바스크립트라는 카페에는 직원이 하나라서 여러 한 테이블의 주문씩 밖에 처리를 못함..ㅠ A테이블에 아아 2 개 B테이블에 아아 3 개 일 경우 2 개 만들고 서빙하고 3 개 만들고 서빙하는 형태인데 그럼 B테이블에 늦게 서빙되므로 컴플레인이 많이 접수됨.. 그래서 직원에게 5개를 동시에 만들고 갯수가 채워지는데로 서빙하라고 시켜야함. 왜냐하면 자바스크립트 카페는 직원이 하나(싱글쓰레드)이기 때문임... function sleep(sec) { return new Promise((resolve) => setTimeout(resolve, sec * 1000)); } const makeCoffee = async (table, ea) => { await sle..

Javascript 2022.04.05