[3w/유용상] 비동기 면접 질문 추가

Javascript/비동기.md

@@ -1,8 +1,10 @@
 # 참고
 
-[모던 자바스크립트 Deep Dive - 동기식 처리모델 vs 비동기식 처리 모델](https://poiemaweb.com/js-async)
-[모던 자바스크립트 Deep Dive - 프로미스](https://poiemaweb.com/es6-promise)
-[Promise와 async/await 차이점](https://velog.io/@pilyeooong/Promise%EC%99%80-asyncawait-%EC%B0%A8%EC%9D%B4%EC%A0%90)
+- [모던 자바스크립트 Deep Dive - 동기식 처리모델 vs 비동기식 처리 모델](https://poiemaweb.com/js-async)
+- [모던 자바스크립트 Deep Dive - 프로미스](https://poiemaweb.com/es6-promise)
+- [Promise와 async/await 차이점](https://velog.io/@pilyeooong/Promise%EC%99%80-asyncawait-%EC%B0%A8%EC%9D%B4%EC%A0%90)
+- [Promise의 문제점](https://hanamon.kr/javascript-%EC%BD%9C%EB%B0%B1-%EC%A7%80%EC%98%A5-%ED%83%88%EC%B6%9C%ED%95%98%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95/)
+- [async/await](https://ko.javascript.info/async-await)
 
 ## 예상 질문
 
@@ -14,18 +16,42 @@
 
 자바스크립트는 비동기 처리를 위한 방법 중 하나로 콜백 함수를 사용합니다. 하지만 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 에러의 처리가 곤란하다는 단점이 있습니다. 그러한 단점을 보완하기 위해 프로미스를 도입되었고 비동기 처리에 사용됩니다.
 
+### 2-1. 콜백헬은 왜 발생할까요?
+
+처리 순서를 보장하기 위해 콜백 함수를 중첩해서 사용하게 되면 콜백헬이 발생하게 됩니다.
+
 ### 3. 프로미스는 어떻게 사용되나요?(2번에 연결해서 대답하면 좋을 것 같습니다.)
 
 프로미스 생성자 함수는 비동기 작업을 수행할 콜백 함수를 인자로 전달 받는데 이 콜백 함수는 resolve와 reject 함수를 인자로 전달받습니다. 비동기 처리가 성공하면 resolve함수를 호출하고 실패하면 reject 함수를 호출합니다.
 
 프로미스로 구현된 비동기 함수를 호출하는 쪽에서는 프로미스의 후속 처리 메서드(then,catch)를 통해 비동기 처리 결과나 에러 메시지를 전달 받아 처리합니다.
 
+### 3-1. 여러개의 프로미스를 처리할 수 있는 방법은 무엇일까요?
+
+Promise.all 메소드를 사용하여 여러개의 프로미스가 담겨있는 배열을 인자로 받고, 병렬적으로 처리하고, 처리 결과를 새로운 프로미스로 반환합니다.
+병렬적으로 처리하기 때문에 입력 받은 순서대로 결과를 반환합니다. 즉, 처리 순서를 보장합니다. 하지만 에러가 발생한 경우는 가장 먼저 에러가 발생한 프로미스의 에러를 즉시 반환합니다.
+
+Promise.race 메소드를 사용하면 프로미스 배열을 인자로 받고, Pomise.all 메소드와는 달리 가장 먼저 처리된 결과만 반환합니다. 에러가 발생한경우는 Pomise.all 메소드와 동일하게 처리됩니다.
+
 ### 4. 콜백 헬을 해결할 수 있는 방법은 무엇이 있을까요?
 
-프로미스를 사용하여 해결할 수 있습니다. 프로미스는 후속 처리 메소드(then이나 catch 메소드)를 체이닝하여 여러 개의 프로미스를 연결해서 사용할 수 있습니다.
+프로미스를 사용하여 어느정도 해결할 수 있습니다. 프로미스는 후속 처리 메소드(then이나 catch 메소드)를 체이닝하여 여러 개의 프로미스를 연결해서 사용할 수 있습니다.
+하지만 이는 중첩된 Promise, then메소드로 인해 또다른 지옥을 발생시킬 수 있습니다. 이를 위해 async/await를 사용할 수 있습니다.
+
+### 5. async/await란 무엇인가요?
+
+프로미스를 더욱 쉽게 사용할 수 있는 문법입니다.
+
+비동기 작업을 수행하기 위한 함수 앞에 async를 붙이게 되면, 해당 함수는 항상 프로미스를 반환하게 됩니다.
+
+프로미스 앞에 await를 붙이게 되면 해당 프로미스가 처리될 때까지 함수 실행을 중단합니다. 처리가 완료되면 함수 실행을 재개합니다. 중단하는 동안 다른 작업이 수행되므로, CPU 자원이 낭비되지 않습니다.
+
+프로미스의 then 체이닝 대신 await를 사용하여 가독성을 높이고, 동기 코드처럼 보이게 함으로써 코드 흐름을 이해하기 쉬워집니다.
+
+await는 async 함수 안에서만 동작하기 때문에 함수 앞에 async가 붙어있지 않다면 문법 에러가 발생합니다.
 
-### 5. 프로미스와 async/await의 차이점은 무엇일까요?
+에러 처리를 위해서 try...catch문을 사용합니다.
 
-우선 첫번째로 코드 가독성이 asnyc/await가 더 좋습니다. 프로미스의 경우 .then을 계속 사용해서 코드가 길어질 가능성이 높습니다. async/await는 비동기 코드를 동기 코드처럼 읽히게 해주기 때문에 코드 흐름을 이해하기 쉽습니다.
+### 5-1. async/await를 사용할 수 없는 경우는 언제일까요?
 
-두번째로는 에러 처리 방법입니다. 프로미스는 .catch를 통해 에러 핸들링이 가능하지만 async/await는 에러 핸들링을 할 수 있는 기능이 없어 try-catch 문을 사용해야만 합니다.
+최상위 레벨 코드에서는 await를 사용할 수 없습니다. 따라서 최상위 레벨 코드에서 비동기 처리가 필요할 때는 익명 async 함수로 코드를 감싸거나, then/catch를 사용하여 결과 또는 에러를 받습니다.