[엘리스 AI트랙] 04-04-01 React 심화 1

1. 자바스크립트 비동기의 등장

• 초기 웹 환경에서는 서버에서 모든 데이터를 로드하여 페이지를 빌드했기 때문에 JS에서는 별도의 비동기 처리가 필요하지 않았음
• AJAX(Asynchronous Javascript And XML) 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨
  • 옛날옛날...에는 브라우저가 정보를 요청하면 서버는 해당 정보를 포함한 페이지 전체를 전달 ➡️ 브라우저는 서버로부터 받은 HTML을 새롭게 렌더링했다고 한다 😮‍💨
• XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨

 

2. 자바스크립트는 single-threaded language

자바스크립트는 하나의 스레드를 사용하는 언어다

 

• 자바스크립트는 메인 스레드가 하나인 single-threaded 언어이기 때문에, 서버 요청을 기다려야 하는 경우 브라우저는 멈춰있게 될것 (답답쓰) ➡️ 그렇기 때문에 비동기 처리를 이용해서 서버로 통신할 필요성이 있음
• 비동기 요청 후, 메인 스레드는 응답을 하염없이 기다리는 대신 ! 유저의 입력을 받거나 페이지를 그리는 등 다른 작업을 처리함
• 비동기 응답을 받게 되면, 응답을 처리하는 callback 함수를 task queue에 넣음
• event loop는 메인 스레드에 여유가 있을 때 task queue에서 함수를 꺼내 실행

 

3. 비동기 처리를 위한 내부 구조

 

• 브라우저의 메인 스레드는
  • JS 코드에서 동기적으로 처리되어야 할 코드 실행
  • 웹 페이지 실시간 렌더링
  • 유저 입력 감지
  • 네트워크 통신 처리 등...수 많은 일을 처리
• 비동기 처리 코드를 감싼 블록은 task queue에 넣어지며, 메인 스레드가 동기 코드를 실행한 후에 제어권이 돌아왔을 때 event loop가 task queue에 넣어진 비동기 코드를 실행 (➡️ 때문에 setTimeout은 reliable하지 않다고 한다)

비동기 다이어그램

• Task queue: 비동기 작업이 들어오는 곳
• Event Loop: 메인 스레드에 여유가 생기면 Task queue에서 작업을 꺼내와 Call stack에 넣는 모듈

 

동기 & 비동기 설명은 실습 수업시간에 봤던 그 영상으로 🙂

 

4. Callback pattern vs Promise

 

(1) Callback pattern

• 비동시 처리 후 실행될 코드를 Callback function으로 보내는 것
• 비동기 처리가 고도화되면서 Callback hell 등의 단점이 발생
• ex) setTimeout 함수

 

(2) Promise

• 비동기 처리의 순서 조작, 에러 핸들링, 여러 비동기 요청 처리 등을 쉽게 처리할 수 있음
• Promise를 사용함으로써 얕은 depth로 비동기 처리를 할 수 있음

 

5. Promise

• Promise 객체는 생성 당시에서는 알려지지 않은 데이터에 대한 Proxy
  • 일단 data가 들어왔다고 가정하고 그 후의 로직을 작성
• 비동기 실행이 완료된 후에 '.then' '.catch' '.finally' 등의 핸들러를 붙여 각각 데이터 처리 로직, 에러 처리 로직, 클린업 로직을 실행함
• then 체인을 붙여 비동기 실행을 마치 동기 실행인 것처럼 동작하도록 함
• 참고 사이트: https://promisesaplus.com/

Promises/A+

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기

(1) Promise 객체의 상태

 

Promise 객체는 pending, fulfilled, rejected 3개의 상태를 가짐

• fulfilled, rejected ➡️ settled라고 지칭
• pending: 비동기 실행이 끝나기를 기다리는 상태
• fulfilled: 비동기 실행이 성공한 상태
• rejected: 비동기 실행이 실패한 상태
• then, catch는 비동기(Promise), 동기 실행 모두 리턴 가능

(2) Multiple Promise handling

• Promise.all(): 모든 프로미스가 fulfilled 되길 기다림
  • 하나라도 에러가 발생하는 경우, 모든 프로미스 요청이 중단됨
  • 특정 비동기 작업이 상대적으로 빠르게 끝나도 나머지 느린 처리를 끝까지 기다려야함
• Promise.allSettled(): 모든 프로미스가 settled 되길 기다림
• Promise.race(): 넘겨진 프로미스들 중 하나라도 settled(➡️ fulfilled or rejected) 되길 기다림
• Promise.any(): 넘겨진 프로미스들 중 하나라도 fulfilled 되길 기다림

(3) Promise chaining, nested promise

• Promise 객체는 settled 되더라도 계속 핸들러를 붙일 수 있음
• 핸들러(.then(), .catch(), .finally())를 붙인 차례대로 호출
• .catch 뒤에 핸들러가 붙어있다면 에러를 처리한 후에 계속 진행됨
  • ➡️ catch에서 리턴한 값이 then으로 전달됨

4. async / await

• Promise chain을 구축하지 않고도 Promise를 직관적으로 사용할 수 있는 문법
• 많은 프로그래밍 언어에 있는 try ...catch 문으로 에러를 직관적으로 처리
• async function을 만들고, Promise를 기다려야 하는 표현 앞에 await을 붙임
• async function 안에서만 await 키워드 사용 가능
• Promise.all과 달리 끝난대로 먼저 처리 가능(parallelism)

 

async는 함수 이름 부분의 제일 앞에,
await는 결과를 기다릴 함수 호출 부분 앞에 작성합니다.
async는 해당 함수에서 비동기 처리를 위한 Promise 동작을 한다는 것을 명시하는 것이고, await는 호출되는 함수가 적절한 결과를 반환할 때까지 기다리도록 동작합니다. 실질적인 동작은 await이고, awiat을 사용하기 위해 async를 명시해야 한다고 이해하시면 됩니다!