JavaScript와 비동기 처리

·2024년 6월 7일
0

FE Interview

목록 보기
7/16

🔗 참고

  1. 자바스크립트 Deep Dive
  2. Github: JavaScript는 어떤 언어일까?
  3. Github: 자바스크립트에서 비동기적으로 코딩하기
  4. Velog: 컴파일러 언어 vs 인터프리터 언어
  5. 제로베이스: 프론트엔드 개발자 면접 준비

📌 JavaScript란

  • 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에저 동작하는 유일한 프로그래밍 언어이다.
  • 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터(소스코드 즉시 실행) 언어이다.
  • 싱글 스레드이자 논 블록킹 언어 이다.

💡 스레드 : 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위
💡 싱글 스레드 : 스레드가 하나밖에 존재하지 않아 한번에 하나의 작업만 할 수 있다

자바스크립트는 싱글 스레드라 하나의 작업만 수행할 수 있지만 동시에 논 블로킹 언어라 비동기 처리를 통해 한 요청이 끝날 때까지 기다리지 않고 다른 작업을 할 수 있도록 한다.


📌 JavaScript의 비동기 처리

비동기 함수는 함수의 실행 결과가 즉시 반환되지 않고 특정 조건이 충족될 때까지 기다리는 함수이다. 비동기 함수는 일반적으로 콜백 함수나 Promise 객체를 반환한다. 콜백 함수는 비동기 작업이 완료되었을 때 호출되는 함수이며, Promise 객체는 비동기 작업이 성공적으로 완료되었는지 또는 실패했는지를 나타내는 객체이다.

Promise

Promise는 비동기 작업이 성공적으로 완료/실패인지를 나타나는 객체로 비동기 작업의 결과를 나타낸다.

Promise는 비동기 처리가 어떻게 진행되는지를 나타내는 상태 정보(pending, fulfilled, rejected)를 갖는다. pending은 프로미스가 생성된 직후의 기본 상태로 대기 상태라고 보면 된다. fulfilled는 비동기 처리가 성공한 상태로 resolve 함수를 통해 상태가 pending→fulfilled로 변경된다. rejected는 비동기 처리가 실패한 상태로 reject 함수를 통해 상태가 pending→rejected로 변경된다. 즉, 프로미스의 상태는 resolve 또는 reject 함수를 호출하는 것으로 결정된다.

Promise.prototype.then

then 메서드는 프로미스가 처리될 때까지 대기한다. 이 메서드는 두 개의 콜백 함수를 인수로 전달 받는데 첫 번째 콜백 함수는 비동기 처리 성공되었을 때 호출되는 성공 처리 콜백 함수이며, 두 번째 콜백 함수는 비동기 처리가 실패했을 때 호출되는 실패 처리 콜백 함수이다.
then 메서드는 항상 프로미스를 반환한다.

Promise.prototype.catch

catch 메서드는 하나의 콜백 함수를 인수로 전달받는데 이 메서드의 콜백 함수는 프로미스가 rejected 상태인 경우에만 호출된다.
catch 메서드는 항상 프로미스를 반환한다.

Promise.prototype.finally

finally 메서드는 한 개의 콜백 함수를 인수로 전달받는데 이 메서드의 콜백 함수는 프로미스의 성공 또는 실패와 상관 없이 무조건 한 번은 호출된다. 이 finally 메서드는 프로미스의 상태와 상관없이 공통적으로 수행해야 할 처리 내용이 있을 때 유용하다.
finally 메서드는 then, catch와 마찬가지로 프로미스를 반환한다.

async/await

async/await를 사용하면 프로미스의 then/catch/finally 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이 프로미스를 사용할 수 있다.

  • async : async 함수는 async 키워드를 사용해 정의하며 언제니 프로미스를 반환한다.
  • await : await 함수는 프로미스가 성공적으로 처리될 때까지 대기한다.

async/await에서 에러 처리는 try~catch문을 사용할 수 있다.

0개의 댓글