강의 설명 중에 헷갈리는 것이 있네요

2026-10-30T07:51:03.569Z

0

영상에 나와있는 비유를 보면 열쇠가 올 때까지 기다렸다가 받아야 한다는 행동을 비동기라고 하셨는데, 제가 알고 있는 비동기는 기존에 하던 작업에 다른 작업이 끼어들어도 방해받지 않고 병렬적으로 수행할 수 있다인데 잘못 생각하고 있는건지 궁금합니다.

0

안녕하세요, haseung님!

먼저 강의를 꼼꼼하게 수강해 주시고, 이해가 되지 않는 부분을 직접 질문해 주셔서 진심으로 감사드립니다. 😊

말씀해 주신 2분 31초 부근의 설명을 다시 확인해 보니, 충분히 혼동하실 수 있는 부분이 있었습니다.

결론부터 말씀드리면, haseung님께서 기존에 이해하고 계셨던 동기(Synchronous)와 비동기(Asynchronous)의 개념이 잘못된 것은 아닙니다. 오히려 제가 강의에서 사용한 비유가 두 개념의 차이를 명확하게 전달하지 못한 부분이 있습니다.

강의에서는 동기 방식을 우편함에서 편지를 즉시 꺼내는 것으로, 비동기 방식을 우체부가 올 때까지 기다렸다가 편지를 받는 것으로 설명했습니다. 그런데 엄밀히 말하면 이러한 비유는 동기와 비동기의 차이를 설명하기에 적절하지 않습니다.

동기와 비동기의 핵심은 단순히 기다리느냐, 기다리지 않느냐의 차이가 아니라, 어떤 작업의 완료를 기다리는 동안 다른 작업을 진행할 수 있는지, 그리고 작업의 완료와 이후 실행이 어떤 관계를 갖는지에 있습니다.

조금 더 쉽게 설명드리겠습니다.

먼저 일반적인 동기적 코드 실행에서는 앞선 작업을 완료한 후 다음 작업으로 넘어갑니다.

console.log("첫 번째 작업");
console.log("두 번째 작업");
console.log("세 번째 작업");

위 코드는 첫 번째, 두 번째, 세 번째 작업이 순서대로 실행됩니다. 각 문장이 실행을 마쳐야 다음 문장을 실행하는 구조입니다.

반면 비동기 처리는 시간이 걸리는 작업을 시작한 뒤, 그 결과가 준비되기를 기다리는 동안 다른 작업을 진행할 수 있도록 구성하는 방식입니다.

console.log("첫 번째 작업");

setTimeout(() => {
  console.log("두 번째 작업");
}, 2000);

console.log("세 번째 작업");

위 코드를 실행하면 다음과 같은 결과가 나타납니다.

첫 번째 작업
세 번째 작업
두 번째 작업

두 번째 작업은 타이머를 통해 나중에 실행되도록 예약되어 있기 때문에, JavaScript는 타이머가 완료될 때까지 멈춰 있지 않고 세 번째 작업을 먼저 실행할 수 있습니다.

여기서 중요한 점은 비동기 처리라고 해서 기다리는 과정 자체가 사라지는 것은 아니라는 사실입니다.

비동기 작업에서도 결과가 필요한 순간에는 기다려야 할 수 있습니다. 다만 그 기다림이 프로그램의 다른 모든 작업까지 반드시 중단시키는 것은 아닙니다.

이 부분을 이해하시면 강의에서 등장한 async와 await도 조금 더 명확하게 이해하실 수 있을 것 같습니다.

예를 들어 다음 코드를 살펴보겠습니다.

async function example() {
  console.log("첫 번째 작업");

  await new Promise((resolve) => {
    setTimeout(resolve, 2000);
  });

  console.log("두 번째 작업");
}

example();

console.log("세 번째 작업");

실행 결과는 다음과 같습니다.

첫 번째 작업
세 번째 작업
두 번째 작업

여기서 await는 Promise가 완료될 때까지 해당 함수의 이어지는 실행을 일시적으로 중단합니다.

따라서 example() 함수 내부에서는 첫 번째 작업 이후 두 번째 작업으로 바로 넘어가지 않습니다. Promise가 완료된 뒤에야 두 번째 작업을 실행합니다.

그렇지만 JavaScript 프로그램 전체가 멈추는 것은 아닙니다. example() 함수가 기다리는 동안 함수 바깥에 있는 세 번째 작업은 정상적으로 실행될 수 있습니다.

즉, await를 사용해서 특정 비동기 작업의 결과를 기다리는 것과 프로그램 전체의 실행을 멈추는 것은 서로 다른 개념입니다.

그렇다면 여기서 한 가지 의문이 생길 수 있습니다.

비동기의 장점이 다른 작업을 진행할 수 있다는 것이라면, Next.js 15에서는 왜 기존에 바로 접근할 수 있었던 searchParams를 굳이 Promise 형태로 변경하고 await를 사용하도록 했을까요?

이 부분이 이번 강의에서 전달하고자 했던 핵심 내용입니다.

Next.js 14까지는 일반적으로 searchParams가 일반 객체로 제공되었기 때문에 다음과 같이 속성에 직접 접근할 수 있었습니다.

export default function Page({ searchParams }) {
  const sort = searchParams.sort;

  return <div>{sort}</div>;
}

하지만 Next.js 15에서는 searchParams가 Promise 형태로 제공되도록 변경되었습니다.

interface PageProps {
  searchParams: Promise<{ sort?: string }>;
}

export default async function Page({
  searchParams,
}: PageProps) {
  const { sort } = await searchParams;

  return <div>{sort}</div>;
}

여기서 await searchParams는 Promise가 완료된 후 실제 쿼리 파라미터 값을 가져오겠다는 의미입니다.

그런데 이 변경은 단순히 기존에 빠르게 접근하던 데이터를 일부러 느리게 가져오도록 만들었다는 의미가 아닙니다.

Next.js는 페이지를 렌더링할 때 사용자 요청에 따라 달라지는 정보와, 사용자 요청에 관계없이 미리 준비할 수 있는 정보를 구분할 필요가 있습니다.

예를 들어 쇼핑몰 페이지를 생각해 보겠습니다.

쇼핑몰의 로고, 기본 메뉴, 공통 안내 문구는 사용자가 어떤 정렬 옵션을 선택하더라도 동일하게 표시할 수 있습니다.

반면 상품 목록은 사용자가 ?sort=asc를 선택했는지, ?sort=desc를 선택했는지에 따라 달라질 수 있습니다.

따라서 모든 부분이 사용자 요청 정보를 필요로 하는 것은 아닙니다.

이러한 상황에서 요청별 정보가 필요한 부분과 그렇지 않은 부분을 명확하게 구분할 수 있다면, 요청 정보와 관계없는 부분은 미리 준비하고 실제로 해당 정보가 필요한 부분에서만 그 결과를 기다리는 구조를 만들 수 있습니다.

Next.js 15에서 searchParams를 비롯한 요청 관련 API를 비동기 방식으로 변경한 것은 이러한 렌더링 구조를 더욱 유연하게 지원하기 위한 설계적인 변화입니다.

또한 이러한 구조는 Suspense 및 스트리밍(Streaming) 같은 기능과 연결될 수 있습니다.

예를 들어 상품 목록을 준비하는 데 시간이 걸리더라도, 적절하게 컴포넌트를 분리하고 Suspense를 적용하면 페이지의 공통 레이아웃이나 로딩 화면을 먼저 보여줄 수 있습니다.

다만 여기서도 정확하게 구분해야 할 부분이 있습니다.

await를 사용한다고 해서 모든 페이지가 자동으로 빨라지거나 스트리밍이 적용되는 것은 아닙니다. 실제로 어느 부분을 먼저 렌더링할 수 있는지는 컴포넌트의 구성과 데이터 의존성, Suspense 등의 적용 방식에 따라 달라집니다.

또한 기존 Next.js에서도 비동기 처리와 스트리밍은 가능했습니다. Next.js 15에서 이러한 기능이 처음 도입된 것이 아니라, 요청 관련 API를 비동기 형태로 변경함으로써 렌더링을 더욱 유연하게 구성할 수 있는 기반을 확장한 것으로 이해하시는 것이 정확합니다.

다시 처음 질문으로 돌아가 보겠습니다.

제가 강의에서 동기 방식을 '편지를 바로 꺼내는 것', 비동기 방식을 '우체부가 올 때까지 기다리는 것'이라고 설명한 부분은 엄밀히 말하면 동기와 비동기의 일반적인 차이를 올바르게 표현한 비유가 아닙니다.

편지를 바로 꺼낼 수 있다는 것은 단순히 필요한 값이 이미 준비되어 있다는 의미에 가깝습니다. 반대로 우체부를 기다려야 한다는 사실만으로 비동기 방식이라고 판단할 수도 없습니다.

좀 더 적절한 비유를 사용한다면 식당에서 요리하는 상황을 떠올려 볼 수 있습니다.

셰프가 오븐에 음식을 넣고 조리가 끝날 때까지 아무것도 하지 않은 채 기다린다면, 기다리는 동안 다른 일을 진행하지 못하는 상황입니다.

반면 오븐에서 음식이 익는 동안 다른 요리의 재료를 준비하거나 접시를 세팅할 수 있다면, 기다리는 시간을 다른 작업에 활용하는 상황입니다.

물론 마지막에 오븐에서 나온 음식이 필요하다면, 그 시점에는 조리가 끝날 때까지 기다려야 합니다.

비동기 처리도 이와 비슷합니다. 시간이 걸리는 작업이 진행되는 동안 다른 작업을 수행할 수 있지만, 그 결과를 반드시 사용해야 하는 순간에는 완료를 기다릴 수 있습니다.

이러한 관점에서 보면 await로 기다린다는 사실이 비동기 처리와 모순되는 것은 아니라는 점도 자연스럽게 이해하실 수 있을 것입니다.

정리하자면, 동기와 비동기는 작업의 완료와 실행 흐름 사이의 관계를 설명하는 개념이고, async와 await는 JavaScript에서 Promise를 이용한 비동기 작업을 다루기 위한 문법입니다.

그리고 Next.js 15에서 searchParams가 Promise로 변경되었다는 것은 기존의 일반 객체 접근 방식에서 비동기 API를 통해 값을 가져오는 방식으로 변경되었다는 의미이지, 동기와 비동기의 기본적인 개념 자체가 달라졌다는 뜻은 아닙니다.

따라서 강의에서 설명한 Next.js 15의 기술적 변경 사항 자체는 맞지만, 이를 설명하는 과정에서 동기와 비동기의 일반적인 개념을 지나치게 단순화했고, 서로 다른 개념을 충분히 구분하지 못한 부분이 있었습니다.

이 점은 제가 좀 더 정확하고 이해하기 쉽게 설명드렸어야 했는데, 혼동을 드린 점 다시 한번 죄송하다는 말씀을 드립니다.

아울러 질문해 주신 덕분에 강의의 해당 설명을 다시 검토하고, 보완이 필요한 부분도 확인할 수 있었습니다. 해당 구간은 다른 분들도 혼동하지 않으시도록 정정 안내를 보완하겠습니다.

무엇보다 단순히 강의 내용을 그대로 받아들이기보다는, 기존에 알고 계셨던 개념과 비교하고 의문이 생기는 부분을 직접 확인해 주신 점이 인상적이었습니다. 개발을 공부하실 때도 이러한 방식으로 개념을 하나씩 검증하며 이해하는 과정이 큰 도움이 될 것이라고 생각합니다.

다시 한번 좋은 질문 남겨주셔서 진심으로 감사드립니다.

앞으로도 강의를 수강하시면서 이해가 되지 않거나 설명이 어색하게 느껴지는 부분이 있다면 언제든 편하게 질문 남겨주세요. 최대한 자세하고 정확하게 설명드리겠습니다.

감사합니다! 😊

2026-10-01T06:06:16.288Z