Unit3 회고

비동기함수 왜 필요할까?🤔

동기와 비동기

• 동기: 요청에 대한 결과가 동시에 일어남
• 비동기: 요청에 대한 결과가 동시에 일어나지 않음 => 효율적
  • 요청(call)에 blocking이 없음
  • 응답이 비동기적으로 이루어짐(요청과는 별개로 이루어짐)
    • 응답 -> 이벤트 발생 => callback

비동기의 필요성

• 요청에 대한 blocking이 없어 기다리는 시간을 줄이며 효율적으로 구현이 가능해짐
  ▷ JavaScript 런타임인 Node.js를 non-blocking하고 비동기적으로 작동하도록 개발한 이유!

비동기 함수의 순서 제어🧐

결국 비동기 함수는 언제 실행될 지 예측하기 어려운 상황

❗️주의하자❗️
callback, promise, async/await는 비동기적 작업을 해결하기 위해 사용하는 것이 아니라 비동기적 작업의 순서를 제어하여 동기적으로 보이게 하기 위해 사용

🔅 Callback

• 작업의 순서를 제어
  일반적으로 콜백 함수를 설계 시 인자에 앞에는 err, 뒤에는 data를 넣음(필수는 아님!)
• callback hell
  • 가독성 떨어짐
  • 디버깅 시 어려움을 겪을 가능성 높음
  • 유지 보수 어려움

🔅 Promise

Promise
promise를 사용하면 최종 결과를 반환하는 것이 아닌 미래 어떤 시점에 결과를 제공하겠다는 약속(promise)을 반환

• promise의 세 가지 상태
  • pending(대기): 이행하지도, 거부하지도 않은 초기 상태(promise가 끝나지 않은 상태)
  • fulfilled(이행): promise가 성공적으로 완료된 상태
    • resolve 호출 시 이행 상태
  • rejected(거부): promise가 실패한 상태
    • reject 호출 시 실패 상태
• promise의 매개변수
  • resolve: promise가 이행될 때
  • reject: promiset가 거부될 때(실패 이유)
• promise의 메서드
  • then: promise 리턴
    • 두 개의 콜백 함수를 인자로 받음(이행, 거부)
    • promise를 반환하기 때문에 then을 계속 사용 가능
    • Then에 아무것도 넣지 않는다면 원래 상태를 반환
    • 있다면 마지막 then의 리턴값이 promiseResult
    • 리턴값은 다음 then안의 콜백함수의 매개변수로 넣어주면 사용 가능
    • 매개변수에는 함수 형태가 들어갈 수 있음(함수 실행이 아닌 함수 자체!)
  • catch: promise 리턴
    • 에러를 잡아주기 위한 메서드
    • promise의 거부된 사례만 반환 및 처리
  • promise의 error 처리는 then의 두 번째 인자로 처리하거나 catch로 처리 가능 -> catch는 마지막에 에러를 잡아줄 수 있기 때문에 catch로 처리하는 것이 더 효율적

🔅 async/await

• await: 비동기 코드(promise)가 끝날때까지 기다렸다가 실행
  • async 함수 안에서만 동작
  • await로 선언한 변수에는 promise의 결과값이 들어감
  • promise가 거부되면 await문은 거부된 값을 throw
    • throw문은 사용자 정의 예외를 발생할 수 있음
    • 예외 발생 시 함수 실행 중지 후 제어 흐름이 catch블록으로 전달, catch 블록이 없을 경우 프로그램 종료
• promise hell 방지
  • 깔끔한 promise 사용 방식

참조 사이트 mdn

Event Loop와 Callback Queue

❓자바스크립트 언어 자체가 비동기 동작을 지원할까❓
❗️자바스크립트가 비동기 동작의 핵심요소는 자바스크립트 언어 자체가 아닌 브라우저가 가진다❗️

브라우저의 구성요소

• Web APIs: DOM, AJAX, setTimeout 등 브라우저가 제공하는 API
• Heap: 메모리 할당이 발생하는 공간
• Call Stack: 실행된 코드의 환경을 저장하는 자료구조로 함수 호출 시 이 공간에 들어감
• Event Table: 특정 이벤트 발생 시 어떤 callback 함수가 호출되어야 하는지 알고 있는 자료 구조
• Callback Queue: 이벤트 발생 시 실행해야 할 callback함수가 들어있는 공간
• Event Loop의 역할
  • Call Stack과 Callback Queue를 감시
  • Call Stack이 비어있을 경우, Callback Queue에서 함수를 꺼내 Call Stack에 추가

Event Loop 관련 링크

<오늘의 일기>
어렴풋하게 알던 콜백함수의 사용에 대한 틀을 잡을 수 있었던 unit3.
많이 헷갈렸지만 따로 찾아보기도 하고 과제를 해보면서 어느 정도 감을 잡을 수 있었던 것 같다. 하지만 완벽하게 활용할 수 있는 것은 절대 아니기에 앞으로 자주 사용해보면서 비동기 함수의 순서를 제어할 수 있도록 연습해야겠다.
이번 페어분을 통해서는 과제를 수행하는 과정에 있어서도 도움을 정말 많이 받았지만 그것 뿐만 아니라 편리하게 개발할 수 있는 환경을 만드는 팁을 많이 얻었던 것 같다.
요즘 들어 개발자는 커녕 컴퓨터도 제대로 다루기 어려워하던(사실 지금도 그렇다....ㅎ) 내가 코딩 부트캠프에서 공부하고 있다는 사실이 새삼 놀랍기도 하고 같이 작업하는 사람들에게 폐를 끼치면 어쩌나 매일 걱정하면서 살기는 하지만 어제의 나보다 조금씩 더 성장하다보면 언젠가는 나도 누군가에게 도움을 줄 수 있는 사람이 될 수 있을 거라고 마음을 다잡아보게 된다.