[24/10/03-10/09] 안내 및 질문 모음집

[minjeongss]

📚 분량

40장-46장

🎤 발표자

김주영

질문

42장

• 동기, 비동기 처리의 장단점을 바탕으로 어떤 상황에서 각각을 선택해야 하는지, 실제 프로젝트에서의 사례 (김주영)

45장

• fetch 함수가 http에러(404, 500)가 발생하도 reject 하지 않는 이유(조천산)

46장

• p.884, 비동기 콜백에서 발생한 에러를 처리할 수 없는 이유는 무엇인가? (김민정)
  • 비동기 함수의 콜백 함수를 호출한 것이 비동기 함수가 아니다!라는 부분이 이해가 되지 않습니다.
• async/await가 Promise를 완전히 대체할 수 있는지? 각각의 사용이 더 적합한 상황은? (김민석)
• async 함수 내부에서 await 없이 Promise를 반환할 때와 await을 사용하여 Promise의 결과값을 반환할 때, 어떤 차이가 있을까? (김민석)

[shlee9999]

42장

• 동기, 비동기 처리의 장단점을 바탕으로 어떤 상황에서 각각을 선택해야 하는지, 실제 프로젝트에서의 사례 (김주영)

  동기(Synchronous)와 비동기(Asynchronous) 처리 방식은 각각 장단점이 있으며, 상황에 따라 적절한 방식을 선택해야 합니다. 실제 프로젝트에서 어떤 처리 방식을 사용할지 결정할 때는 다음과 같은 점들을 고려해야 합니다.

  동기 처리의 장단점과 적합한 상황

  동기 처리는 한 작업이 끝나야 다음 작업을 시작하는 방식입니다. 장단점은 다음과 같습니다:

  장점:

  • 구현이 간단하고 직관적임
  • 작업의 순서가 명확하여 디버깅이 용이함

  단점:

  • 블로킹(blocking)이 발생하여 자원 활용이 비효율적일 수 있음
  • 긴 작업으로 인해 응답 속도가 느려질 수 있음

  동기 처리는 다음과 같은 상황에 적합합니다:

  • 간단한 커맨드라인 유틸리티 구현
  • CPU 바운드 작업이 많은 데이터 분석
  • 단일 사용자용 데스크톱 애플리케이션
  • 대기 시간이 짧은 간단한 DB 쿼리

  비동기 처리의 장단점과 적합한 상황

  비동기 처리는 하나의 작업이 완료되기를 기다리지 않고 다른 작업을 동시에 수행하는 방식입니다. 장단점은 다음과 같습니다:

  장점:

  • 자원을 효율적으로 사용하여 성능 향상
  • 동시에 많은 요청을 처리할 수 있어 확장성이 좋음
  • UI의 응답성을 높일 수 있음

  단점:

  • 구현이 복잡하고 디버깅이 어려울 수 있음
  • 데이터 정합성 문제가 발생할 수 있음

  비동기 처리는 다음과 같은 상황에 적합합니다:

  • 웹 스크래핑 등 I/O 바운드 작업
  • 채팅 앱 등 실시간 처리가 필요한 경우
  • 데이터 처리 파이프라인
  • 마이크로서비스 간 통신

  실제 프로젝트 사례

  • 웹 서버: 비동기 처리로 동시에 많은 클라이언트 요청을 처리하여 처리량과 응답성을 높임
  • 채팅 앱: 메시지 전송을 비동기로 처리하여 실시간성 보장
  • 신용카드 결제: 사기 탐지 등의 배치 작업을 위해 동기 처리 대신 비동기 배치 처리 사용
  • 데이터 처리: 데이터 변환, 집계, 분석 등을 방해받지 않고 수행하기 위해 비동기 처리

  따라서 프로젝트의 요구사항과 제약 조건을 잘 분석하여 동기와 비동기 처리를 적절히 활용해야 합니다. 전반적인 아키텍처와 각 컴포넌트의 특성을 고려하여 성능, 확장성, 개발 편의성 등을 종합적으로 판단하는 것이 중요합니다.

45장

• fetch 함수가 http에러(404, 500)가 발생하도 reject 하지 않는 이유(조천산)

  fetch의 동작 방식

  fetch는 네트워크 요청이 성공적으로 완료되면 promise를 resolve합니다.

  여기서 "성공적으로 완료"란 서버로부터 응답을 받았다는 의미이며, 응답의 상태 코드와는 무관합니다

  reject되는 경우

  fetch는 다음과 같은 경우에만 promise를 reject합니다.

  1. 네트워크 오류로 인해 요청을 완료할 수 없는 경우
  2. CORS 오류가 발생한 경우

  HTTP 에러 처리 방법

  HTTP 에러를 처리하려면 response 객체의 ok 속성이나 status 코드를 확인해야 합니다

   예를 들어:

  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.log('There was a problem with the fetch operation:', error));

  이러한 설계의 장점

  1. 유연성: 개발자가 HTTP 에러를 어떻게 처리할지 결정할 수 있습니다
  2. 세밀한 제어: 상태 코드에 따라 다른 처리를 할 수 있습니다
  3. 일관성: 네트워크 요청의 성공과 실패를 명확히 구분할 수 있습니다.

  결론

  fetch의 이러한 동작은 의도적인 설계 선택입니다. 이를 통해 개발자는 HTTP 에러를 더 유연하고 세밀하게 처리할 수 있으며, 네트워크 오류와 HTTP 에러를 명확히 구분할 수 있습니다.

46장

• p.884, 비동기 콜백에서 발생한 에러를 처리할 수 없는 이유는 무엇인가? (김민정)

  • 비동기 함수의 콜백 함수를 호출한 것이 비동기 함수가 아니다!라는 부분이 이해가 되지 않습니다.

  실행 컨텍스트의 분리

  비동기 콜백 함수는 원래의 실행 컨텍스트와 분리된 별도의 실행 컨텍스트에서 실행됩니다.

  이는 콜백 함수가 자바스크립트 엔진의 이벤트 루프에 의해 나중에 실행되기 때문입니다.

  javascripttry {
    setTimeout(() => {
      throw new Error('콜백 내부 오류');
    }, 1000);
  } catch (e) {
    console.log('오류를 캐치함'); *// 이 부분은 실행되지 않습니다*
  }

  위 코드에서 setTimeout의 콜백 함수는 메인 실행 컨텍스트가 종료된 후 별도의 컨텍스트에서 실행됩니다. 따라서 try/catch 블록은 이미 실행을 마친 상태이고, 콜백에서 발생한 오류를 잡을 수 없습니다

  비동기 실행의 특성

  비동기 함수는 즉시 반환되고, 콜백은 나중에 실행됩니다. 이 때문에 try/catch 블록은 비동기 함수의 호출만을 감싸게 되고, 실제 콜백의 실행 시점에는 이미 try/catch의 범위를 벗어나 있습니다

  

  

  

  

• async/await가 Promise를 완전히 대체할 수 있는지? 각각의 사용이 더 적합한 상황은? (김민석)

  async/await와 Promise는 자바스크립트에서 비동기 처리를 다루는 두 가지 주요 방식입니다. async/await는 Promise를 기반으로 하지만 문법적으로 더 간결하고 읽기 쉬운 코드를 작성할 수 있게 해줍니다. 하지만 async/await가 Promise를 완전히 대체할 수는 없습니다. 각각 장단점이 있고 상황에 따라 적절히 사용해야 합니다.

  문법적 차이

  • Promise는 .then(), .catch() 등의 메서드 체이닝을 통해 사용
  • async/await는 async 함수 내에서 await 키워드를 사용하여 Promise를 기다림

  에러 처리

  • Promise는 .catch() 메서드로 에러 처리
  • async/await는 try/catch 문으로 에러 처리

  가독성

  • 복잡한 비동기 로직의 경우 Promise는 콜백 지옥과 유사해질 수 있음
  • async/await는 비동기 코드를 동기 코드처럼 읽기 쉽고 이해하기 쉬움

  병렬 처리

  • Promise는 Promise.all(), Promise.race() 등으로 병렬 처리 가능
  • async/await는 병렬 처리를 위해 추가 작업 필요 (예: **Promise.all()**과 함께 사용)

  적합한 사용 상황

  • 간단한 비동기 작업, 병렬 처리가 필요한 경우 → Promise
  • 복잡한 비동기 로직, 가독성이 중요한 경우 → async/await
  • 오래된 브라우저 지원이 필요한 경우 → Promise

  따라서 async/await는 Promise를 대체하기보다는 상호 보완적인 관계라고 볼 수 있습니다. 상황에 맞게 둘을 적절히 활용하는 것이 좋습니다. async/await를 사용하더라도 그 이면에는 여전히 Promise가 동작하고 있기 때문에 Promise에 대한 이해가 바탕이 되어야 합니다.

• async 함수 내부에서 await 없이 Promise를 반환할 때와 await을 사용하여 Promise의 결과값을 반환할 때, 어떤 차이가 있을까? (김민석)

  async 함수 내부에서 await 없이 Promise를 반환할 때와 await을 사용하여 Promise의 결과값을 반환할 때는 중요한 차이가 있습니다. 이 차이점들을 살펴보겠습니다.

  Promise 직접 반환 vs await 사용

  Promise 직접 반환

  async function withoutAwait() {
    return new Promise(resolve => setTimeout(() => resolve("결과"), 1000));
  }

  이 경우:

  1. 함수는 즉시 Promise를 반환합니다1.
  2. Promise의 해결(resolve)은 비동기적으로 이루어집니다.
  3. 함수 실행이 일시 중지되지 않고 즉시 반환됩니다.

  await 사용하여 결과값 반환

  async function withAwait() {
    const result = await new Promise(resolve => setTimeout(() => resolve("결과"), 1000));
    return result;
  }

  이 경우:

  1. 함수 실행이 await 표현식에서 일시 중지됩니다
  2. Promise가 해결될 때까지 기다린 후 결과값을 반환합니다.
  3. 반환된 값은 자동으로 Promise로 감싸집니다.

  주요 차이점

  1. 실행 흐름: await을 사용하면 Promise가 해결될 때까지 함수 실행이 일시 중지되지만, 직접 Promise를 반환하면 함수가 즉시 반환됩니다.
  2. 반환 값: 두 경우 모두 Promise를 반환하지만, await을 사용한 경우 Promise의 해결된 값이 반환됩니다
  3. 에러 처리: await을 사용하면 try/catch 블록으로 에러를 쉽게 처리할 수 있지만, 직접 Promise를 반환하면 .catch()를 사용해야 합니다
  4. 코드 가독성: await을 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 향상됩니다
  5. 성능: 복잡한 비동기 로직에서 await을 과도하게 사용하면 성능 저하가 발생할 수 있습니다. 반면, Promise를 직접 반환하면 더 효율적일 수 있습니다

  결론

  async 함수에서 await 사용 여부는 상황에 따라 선택해야 합니다. 단순히 Promise를 반환하는 경우라면 await 없이 직접 반환하는 것이 효율적일 수 있습니다. 하지만 Promise의 결과값을 사용하거나 에러 처리가 필요한 경우, 또는 코드의 가독성을 높이고 싶다면 await을 사용하는 것이 좋습니다

[kimjuyoung99]

42장

동기, 비동기 처리의 장단점을 바탕으로 어떤 상황에서 각각을 선택해야 하는지, 실제 프로젝트에서의 사례 (김주영)

• 동기 처리 : 순서가 중요하거나 이전 작업의 결과가 다음 작업에 필요할 때 선택
  (ex : 데이터베이스 트랜잭션, 파일 읽기/쓰기 작업)
• 비동기 처리 : 시간이 오래 걸리는 작업이나 여러 작업을 동시에 처리해야 할 때 선택
  (ex : API 호출, 대용량 데이터 처리, 사용자 인터페이스 반응성 유지 등)

45장

fetch 함수가 http에러(404, 500)가 발생하도 reject 하지 않는 이유(조천산)

• 기술적으로 '성공적인' 응답으로 간주되어 resolve되는데, 개발자가 다양한 HTTP 상태 코드를 유연하게 처리할 수 있도록 설계된 것.. 이라고 하네요!

46장

p.884, 비동기 콜백에서 발생한 에러를 처리할 수 없는 이유는 무엇인가? (김민정) 비동기 함수의 콜백 함수를 호출한 것이 비동기 함수가 아니다!라는 부분이 이해가 되지 않습니다.

• 비동기 함수의 콜백은 원래의 실행 컨텍스트와 분리되어 나중에 실행됨 try...catch 블록의 실행 컨텍스트와 콜백 함수의 실행 컨텍스트가 다르기 때문에 에러를 잡을 수 없다.
• 비동기 동작의 최초 실행자에 전달할 방법이 없다 (하지만.then()의 두번째 인자에 에러 발생 시 호출할 콜백 함수를 주거나, .catch()를 사용해 에러를 처리할 수 있다)

async/await가 Promise를 완전히 대체할 수 있는지? 각각의 사용이 더 적합한 상황은? (김민석)

• 완전히 대체할 수 없다고 한다. 각자 장점이 다르다(async/await 은 가독성이 좋고, Promise 는 병렬처리 필요할 때)

async 함수 내부에서 await 없이 Promise를 반환할 때와 await을 사용하여 Promise의 결과값을 반환할 때, 어떤 차이가 있을까? (김민석)

• await을 사용하면 Promise결과값을 직접 받아 처리할 수 있어 코드가 더 직관적 await가 없으면 then()을 사용해야 함

[minjeongss]

42장

• 동기, 비동기 처리의 장단점을 바탕으로 어떤 상황에서 각각을 선택해야 하는지, 실제 프로젝트에서의 사례 (김주영)
  • 동기
    • 장점: 코드가 직관적
    • 단점: 작업이 길면 블로킹 발생
  • 비동기
    • 장점: 작업이 길어도 다른 작업 수행 가능
    • 단점: 코드가 복잡
  • 실제 프로젝트 사례
    • 동기: 반드시 기다려야 하는 작업
    • 비동기: 외부 네트워크 요청 등 시간이 오래 걸리는 작업

45장

• fetch 함수가 http에러(404, 500)가 발생하도 reject 하지 않는 이유(조천산)
  • HTTP 에러는 네트워크 요청이 이루어졌음을 의미하기 때문임
  • fetch는 네트워크 에러에만 오류로 처리함

46장

• p.884, 비동기 콜백에서 발생한 에러를 처리할 수 없는 이유는 무엇인가? (김민정)
  • 비동기 함수의 콜백 함수를 호출한 것이 비동기 함수가 아니다!라는 부분이 이해가 되지 않습니다.
  • 콜백 함수가 비동기적으로 실행되어, 에러가 발생해도 해당 에러를 즉시 처리할 수 있는 컨텍스트가 없기 때문임
  • 비동기 함수가 호출 되었지만, 그 결과를 기다리지 않기에 발생함
• async/await가 Promise를 완전히 대체할 수 있는지? 각각의 사용이 더 적합한 상황은? (김민석)
  • 완전히 대체할 수는 없음
  • async/await: 간결한 방식에서 적합
  • Promise: 여러 개 비동기 작업 병렬로 실행하고 싶을 때, Promise.all() 사용 가능
• async 함수 내부에서 await 없이 Promise를 반환할 때와 await을 사용하여 Promise의 결과값을 반환할 때, 어떤 차이가 있을까? (김민석)
  • await 없이 Promise 반환
    • async 함수: Promise 반환
    • 호출하는 함수: 해당 Promise 결과 기다리지 않음
    • 즉, 비동기 작업이 완료되길 기다리지 않고 다음 코드 실행
  • await 사용하여 Promise 반환
    • async 함수: Promise 반환
    • 호출하는 함수: 해당 Promise 결과 기다림
    • 즉, 비동기 작업이 완료되길 기다림

[se0kcess]

42장

동기, 비동기 처리의 장단점을 바탕으로 어떤 상황에서 각각을 선택해야 하는지, 실제 프로젝트에서의 사례 (김주영)

• 동기 처리: 작업의 순서가 중요하거나, 이전 작업의 결과가 다음 작업에 즉시 필요한 경우
• 비동기 처리: I/O 작업, 네트워크 요청, 긴 계산 작업 등 시간이 오래 걸리는 작업을 처리할 때

실제 프로젝트 사례:

• 동기: 사용자 로그인 프로세스, 중요한 데이터 업데이트
• 비동기: 이미지 로딩, API 호출, 대용량 파일 업로드/다운로드

45장

fetch 함수가 http에러(404, 500)가 발생하도 reject 하지 않는 이유(조천산)

fetch 함수는 네트워크 오류가 발생했을 때만 reject합니다. HTTP 상태 코드가 4xx나 5xx여도 서버로부터 응답을 받았다는 것은 네트워크 통신이 성공적으로 이루어졌음을 의미합니다. 이는 개발자가 다양한 HTTP 상태 코드에 대해 더 유연하게 대응할 수 있게 해줍니다. 실제 에러 처리는 response.ok나 response.status를 확인하여 수행할 수 있습니다.

46장

p.884, 비동기 콜백에서 발생한 에러를 처리할 수 없는 이유는 무엇인가? (김민정)

비동기 함수의 콜백 함수는 비동기 함수의 실행 컨텍스트와는 별도의 컨텍스트에서 실행됩니다. 즉, 비동기 함수가 이미 실행을 마치고 콜 스택에서 제거된 후에 콜백 함수가 실행되기 때문에, 비동기 함수의 try-catch 블록으로 콜백 함수에서 발생한 에러를 잡을 수 없습니다.

"비동기 함수의 콜백 함수를 호출한 것이 비동기 함수가 아니다"라는 말은, 콜백 함수가 실제로 호출되는 시점에는 이미 비동기 함수의 실행이 종료되었다는 의미입니다. 콜백 함수는 이벤트 루프에 의해 나중에 실행되므로, 원래의 비동기 함수와는 직접적인 연관이 없는 상태에서 실행됩니다.

async/await가 Promise를 완전히 대체할 수 있는지? 각각의 사용이 더 적합한 상황은? (김민석)

async/await가 더 적합한 상황:

• 순차적인 비동기 작업을 수행할 때
• 코드의 가독성을 높이고 싶을 때
• 에러 처리를 동기 코드와 유사하게 하고 싶을 때 (try-catch 사용)

Promise가 더 적합한 상황:

• 여러 비동기 작업을 병렬로 처리할 때 (Promise.all 등 사용)
• 복잡한 비동기 로직을 구현할 때 (Promise 체이닝)
• 라이브러리나 API를 설계할 때 (더 낮은 레벨의 추상화 제공)

async 함수 내부에서 await 없이 Promise를 반환할 때와 await을 사용하여 Promise의 결과값을 반환할 때, 어떤 차이가 있을까? (김민석)

• 에러 처리: await을 사용하는 경우, Promise가 reject되면 함수 내부에서 에러를 잡을 수 있습니다. await을 사용하지 않는 경우는 그렇지 않습니다.

• 성능: await을 사용하지 않는 경우가 미세하게 더 빠릅니다. await는 추가적인 microtask를 생성하기 때문입니다.

• 값 변환: await을 사용하는 경우, Promise가 아닌 값을 반환하더라도 항상 Promise로 감싸집니다.

대부분의 경우 이 차이는 크지 않지만, 특히 에러 처리가 중요한 상황에서는 await을 사용하는 방식이 더 안전합니다.

[joarthvr]

동기, 비동기 처리의 장단점을 바탕으로 어떤 상황에서 각각을 선택해야 하는지, 실제 프로젝트에서의 사례 (김주영)

동기 처리

• 장점
  • 직관적인 코드 흐름
  • 디버깅이 상대적으로 쉬움
• 단점
  • 블로킹으로 인한 지연 발생 가능
  • 긴 작업 시 전체 프로그램 속도 저하
• 사용되는 경우
  • 작업의 순서가 중요한 경우
  • 각 단계의 결과가 다음 단계에 즉시 필요할 때

비동기 처리

• 장점
  • 리소스 활용도 개선
  • 고성능 애플리케이션에 적합한 확장성
• 단점
  • 코드 복잡성 증가
  • 디버깅이 더 어려움
• 사용되는 경우
  • 네트워크 요청이나 파일 I/O와 같은 시간이 오래 걸리는 작업 처리 시
  • 여러 독립적인 작업을 동시에 처리해야 할 때

fetch 함수가 http에러(404, 500)가 발생해도 reject 하지 않는 이유(조천산)

• 네트워크 요청이 성공적으로 완료되었는지에 초점을 맞추기 때문
• 에러처리 로직이 더 명시적이고 세밀해야한다.

비동기 콜백에서 발생한 에러를 처리할 수 없는 이유는 무엇인가? (김민정)

비동기 함수의 콜백 함수를 호출한 것이 비동기 함수가 아니다!라는 부분이 이해가 되지 않습니다.

• 비동기 함수는 호출 즉시 반환되며, 콜백은 나중에 별도의 실행 컨텍스트에서 실행됨
• 콜백 함수는 비동기 작업이 완료된 후 독립적으로 실행
  • 이 시점에서 원래의 호출 스택은 이미 사라졌기 때문에, 외부의 에러 처리 로직이 적용되지 않음
  • 비동기 함수는 즉시 반환되지만, 콜백은 나중에 실행

async/await가 Promise를 완전히 대체할 수 있는지? 각각의 사용이 더 적합한 상황은? (김민석)

async/await가 적합한 상황:

• 순차적인 비동기 작업 처리
• 복잡한 비동기 로직을 가독성 있게 표현해야 할 때
• 에러 처리를 try/catch로 간단히 처리하고 싶을 때

Promise가 적합한 상황:

• 여러 비동기 작업을 병렬로 처리해야 할 때 (Promise.all 사용)
• 비동기 작업의 경쟁 조건을 다룰 때 (Promise.race 사용)
• 라이브러리나 API가 Promise를 반환할 때

async 함수 내부에서 await 없이 Promise를 반환할 때와 await을 사용하여 Promise의 결과값을 반환할 때, 어떤 차이가 있을까? (김민석)

• await 없이 Promise를 직접 반환하는 방식은 단순히 Promise를 전달하는 경우이다.
• await을 사용하여 결과값을 반환하는 방식은 Promise 결과에 기반한 추가 처리가 필요하거나, 에러 처리를 함수 내부에서 하는 경우이다.