Asynchronous
[CS] 동기 / 비동기, 블로킹 / 논블로킹
[CS] 동기 / 비동기, 블로킹 / 논블로킹
2024.05.18A 함수(호출자)가 B 함수(피호출자)를 호출하는 상황이라고 가정❶ 동기/비동기: 호출자(A)가 피호출자(B)의 처리 결과를 기다리는지 여부동기: 피호출자의 처리 결과를 받아서 다음 작업 수행 → 호출자/피호출자 순차적 수행A는 B 작업이 끝날 때까지 다른 작업을 수행하지 않고 B의 반환값을 기다림 비동기: 피호출자의 처리 결과를 기다리지 않고 다음 작업 수행 → 호출자/피호출자 동시 수행B가 작업을 완료하면 콜백 함수 호출 (혹은 프로미스 활용) ❷ 블로킹/논블로킹: 호출자(A)가 피호출자(B)에게 제어권 전달 여부블로킹: 피호출자에게 제어권 전달 → 피호출자가 작업을 완료할 때까지 대기A가 B를 호출하여 제어권 전달 후, B의 작업 완료를 기다림 논블로킹: 피호출자에게 제어권 전달 안함 → 호출자는 ..
[React/JS] Promise 프로미스를 활용한 UX 개선 — 턴 미루기
[React/JS] Promise 프로미스를 활용한 UX 개선 — 턴 미루기
2024.05.16동기 작업을 기다리는 프로미스프로미스는 모든 동기 작업을 완료한 후에 실행할 수 있다. 아래 예시에서 then 후속 처리 메서드에 넘긴 console.log는 절대 실행되지 않는다.// 코드 참고 via 오늘의 프로그래밍new Promise((resolve) => { console.log('1'); // 동기 영역 resolve('2');}).then(console.log); // 비동기 영역let i = 0;while (true) { i += 1;} 프로미스 생성자에 넘긴 콜백 함수는 동기적으로 처리하므로 콘솔에 1을 출력한다. resolve 함수가 실행되면 프로미스는 이행(fulfilled) 상태가 되고 결과 값과 함께 새로운 프로미스를 리턴한다. 그럼 then 후속 처리 메서드로 실행 턴이 넘..
[JS] API 요청 / 비동기 작업 취소하기 - Abort Controller
[JS] API 요청 / 비동기 작업 취소하기 - Abort Controller
2024.05.14AbortController는 1개 이상의 API 요청을 취소할 때 사용하는 인터페이스다. 주로 중복 요청이 있을 때 이전 요청을 취소할 때 사용하며, 비동기 작업을 다룰 때도 활용할 수 있다. Axios 0.22 버전부터 AbortController를 이용해서 API 요청을 취소할 수 있다. Cancel 토큰을 이용하는 방식은 deprecated 됐다. 기본 사용 방법AbortController는 아래 3가지 단계로 사용한다. abortController.abort() 메서드를 호출하면 abort 이벤트가 발생하며 fetch 프로미스는 rejected 상태가 되고 제어는 catch 블럭으로 진입한다.AbortController 인스턴스 생성인스턴스의 signal 프로퍼티를 fetch의 signal 옵션..