희락코딩

1편과 2편에서 비동기 프로그래밍에 대해서 학습하였습니다!!! 이번에 학습한 비동기 프로그래밍은 프론트개발자라면 꼭 알아야할 필수 개념이기에 3편으로 나눠 정리를 하였습니다!!! 이번 블로깅은 비동기와 async/await에 대해 간단한 정리와 fetch에 대해 정리를 해보고자 합니다! Let's get it~! # 비동기 처리 비동기란 코드의 연산이 끝날 때까지 코드 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성을 말합니다! 가장 흔한 사례는 어떠한 서버에서 데이터를 요청할 때 받아오기 까지 시간이 걸리지만 나머지 코드는 실행한 코드를 기다려 주지 않고 나머지 코드를 먼저 실행시켜줍니다. 이를 비동기 처리라고 합니다. 1 2 3 4 5 6 7 8 9 console.log("1"); setTimeo..

1편에 이어서 Promise Chaining , Promise all, /async/await에 대해 학습해 봅시다!!! # Promise Chaining Promise의 특징중 하나인 Chaining은 여러 개의 프로미스를 연결하여 사용할 수 있습니다! 후속 메서드 then()을 호출하고 나면 새로운 프로미스 객체가 반환됩니다. 여기서 중요한 포인트는 Chaining을 할때 then() 메서드를 통해서 값을 바로 전달 하여 연결할수가 있고 혹은, return을 통해 Promise를 전달해서 사용 할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //Promise chaining const testPromise = new Promise(function(resol..

# 동기와 비동기 동기식 처리 모델 동기식 프로그래밍은 직렬적으로 일을 처리합니다. 즉 순차적으로 실행 되며 도중에 어떤 작업이 수행 중이면 다음에 일처리해야 될 일들은 대기상태가 됩니다. 비동기식 처리 모델 비동기식 프로그래밍은 병렬적으로 일을 처리합니다. 일처리가 종료되지 않은 상태라 하더라도 대기하지 않고 즉시 다음 일들을 실행합니다. 코드로 알아보는 동기와 비동기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 console.log(`1`); setTimeout(() => console.log(`2`), 1000); console.log(`3`); // Synchronous(동기식) callback function printImmediately(print) { print();..