[ D-DAY ] 쉽게 만나는 JavaScript 비동기 처리 | 김태곤

 

 

Session1 : JavaScript의 '비동기 처리'란 ?

비동기를 왜 쓸까요?
잘 알려진 비동기 동작 예시

• setTimeout, setInterval
• load, click 등 이벤트 처리
• 파일 입출력, 네트워크 요청

 

특징

• 개발자가 정확한 실행 시점을 알 수 없다
• 처리에 시간이 많이 걸린다
• 처리하는 도중 아무것도 못한다 😖

자바스크립트는, 스레드가 하나이기 때문에(싱글 스레드), 동기식으로 처리하게 되면 모든 것을 다 멈춰버리고 이걸 받아와야해!! 에만 집중한다.
따라서 성능 문제 때문에 동기식이 아닌 비동기를 사용한다

 

비동기? 왜 ? 어려울까요?

사실 비동기식 처리는 실생활에서 익숙하가

• 컵라면 읽는 동안 폰보기 ㅎㅎ
  등
  하지만 왜 어려울까?
  => 절차식 프로그래밍에 익숙하기 때문
• 코드의 순서가 실행 순서와 일치함
• 최대한 절차식처럼 보이게 작성하면 이해하기 쉬움 😉

 

비동기 처리 :JS 방식

1. Callback functions

• 특정 동작을 실행할 때 실행하는 함수
• 모든 콜백 함수가 비동기 처리를 하는 것은 아님
• 하지만 비동기 처리를 위해 사용하는 경우가 많음
  • setTimeout, setInterval
  • 이벤트 처리
  • Node.js의 파일 입출력 / 네트워크 API

Callback Hell

• 여러 비동기 처리에 콜백 함수를 사용할 때 발생
• 코드가 직관적으로 이해하기 어려울 정도로 복잡해 짐
• 이미 10년 쯤 된 논의
• 잘 알려된 완화 방법이 많음
• Promise가 대안으로서 등장
  
  

2. Promise object

비동기 동작의 처리를 담당하는 객체

• 이행(fulfilled), 거부(rejected), 대기(pending) 상태를 통해 비동기 동작을 처리
• 동기식 함수의 성공 == 이행, 실패 == 거부에 한 가지 상태가 더 있는 것
• 음식 배달 주문을 하면 대기 상태 => 음식이 제대로 도착하면 주문 성공 ! => 주문이 거보되거나 배달시 사고가 나면 주문 실패..!! ㅜㅜ
• 아무튼 성공하든 실패하든 상태가 결정되었기 때문에 이행/거부 == 결정(settled)된 상태

생성하기

• new Promise((resolve, reject) => ...)로 생성
• Promise.resolve(100) == new Promise((resolve) => 100)

 

.then

• .then( 성공시콜백, 실패시콜백)
• 콜백에서 반환된 Promise 객체는 다음 then에서 처리
• Promise 객체가 아닌 값을 반환할 때는 성공한 Promise처럼 생각한다 (정적인 값은 성공한 Promise처럼 취급된다)
• '성공시콜백'이 함수가 아니면 x => x처럼 취급 
• fetch('url') .then('abc') .then((data) => console.log(data)); // 이 data는 promise 객체가 아니다

 

.catch

• .catch(실패시콜백)
• .then(undefined, 실패시콜백)의 단축 문법
• .catch 후에도 .then을 계속 사용할 수 있다.😮 오오 (catch로 반환된 값을 반환한다)

 

.finally

• .finally(결정시콜백)
• 단, 결정시콜백에서 반환되는 값은 무시됨
• 실패든 성공이든 무조건 실행된다. 중요한 것은 값을 반환하지 않는다는 것

 

Thenable

• .then()만 있으면 나머지 두 개는 구현/대체 가능(.catch / .finally)
• Promise가 JS에 포함되기까지 시간이 많이 걸렸고, 그 사이 많은 서드 파티 라이브러리가 사용됨,
• 따라서 호환성을 위해 객체에 ,then이 있으면 Promise처럼 처리

 

Promise 다중 처리
배열(iterable : 쭉 훑을 수 있는 형태)로 전달받은 Promise객체가 있을 때

• Promise.any: 가장 먼저 이행된 값 이행, 모두 실패하면 실패
• Promise.all : 모두 이행되면 값 배열로 전달하며 이행. 하나라도 실패하면 실패
• Promise.race : 가장 먼저 결정된 값에 따라 결정
• Promise.allSettled : 모두 결정되면 결과 객체 배열이 전달되며 이행
  • .status (fullfilled / rejected)
  • .value : fulfilled된 경우에만

 

3. async / await

 

Async 함수
항상 Promise를 반환하는 함수

async function one(){
    return 1;
}
// ==
function one(){
    return Promise.resolve(1);
}

또는 await 연산자를 내부에 사용하는 함수

 

Await 연산자

• Promise 상태가 결정될 때까지 대기 (몇 개의 then이 붙어있든 모든 결과를 받고 반환)
• 사실 Thenable을 실행하는데, 그 외의 값도 가능
• 비동기 함수의 실행 순서를 마치 동기식처럼 제어
• 에러 처리는 try - catch를 사용한다
• await을 만나면 실행을 중단하고 microtask 큐에 넣는다 => 비동기로 동작한다는 뜻
• async 함수 내부 또는 모듈의 Top-level에서만 가능(require x import에서만)

 

비동기 처리 유의사항

• 비동기 함수 간에는 실행 순서가 보장 안되는게 기본
• async 함수 내에서는 await을 사용해 실행 순서 보장(적어도 같은 함수 내에서만)
• 동시 처리가 필요하다면 Promise 정적 함수 활용
• 비동기 처리가 필요하면 최대한 async/await 활용
• 콜백 함수라면 Promise화를 고려하자
• DOM 이벤트 핸들러로 async 함수를 활용할 수 있다

 

 

Session3

원티드 프리온보딩과 함께 듣느라 작성을 하지는 못했다
하지만 현업 개발자의 플랫한 코드 만들기를 구경할 수 있어서 많은 도움이 되었다.

그리고 내 질문 ✌

'신입으로 지원한 개발자의 커밋 로그에 지옥같은 콜백이 있다면 어떻게 생각하시나요?'
-> 면접에서 관련 내용을 질문할 것 같아요. 더 좋은 코드를 작성할 수 있는지, 이 코드의 문제점과 개선 방안을 물어볼 것 같습니다

 

코드를 작성할 때 나름대로 최선의 코드를 작성하기 위해 고민하는데, 만약 내 '나름대로'가 현업 개발자들에게는 나쁜 냄새가 나는 코드더라도 괜찮다는 것을 알게 되었다.
하지만 그런 냄새나는 '나름대로 최선을 다한' 코드를 작성한 이유와, 조금 더 좋은 개선방안을 생각할 수 있는 사고만 있으면 될 듯 !
이건 비동기에 대한 이야기는 아니지만 취준생들이 코드를 대할 때 가지면 좋은 마음가짐인 것 같아서 짧게 적어본다 ㅎㅎ
다들 화이팅~

 

+ Session 2는 질의응답 시간이었는데 그 때.. 설거지를 하느라.. 제대로 못들었다 ㅎㅎ