영상에서 소개되는 코드와 강의 노트 코드가 달라요

작성한 질문수 4

1

안녕하세요, 경원 님!

먼저 강의를 꼼꼼하게 수강해 주시고, 영상과 강의 노트의 차이점까지 세심하게 확인하여 질문 남겨주셔서 진심으로 감사드립니다.

말씀해 주신 부분은 경원 님께서 정확하게 확인하신 것이 맞습니다!

11강 영상에서는 readline/promises와 async/await, while (true)를 활용하여 사용자 입력을 처리하고 있지만, 강의 노트에서는 일반 readline 모듈과 rl.on("line"), rl.prompt()를 사용하는 방식으로 작성되어 있습니다.

강의 노트를 정리하면서 영상에서 다룬 구현 방식 외에도 동일한 기능을 다른 구조로 구현하는 방법을 함께 살펴보실 수 있도록 일부 코드를 추가하고 보완했습니다. 특히 Node.js의 이벤트 기반 프로그래밍이라는 특성을 조금 더 다양한 관점에서 이해하시는 데 도움이 될 것 같아, 강의 노트에는 line 이벤트를 활용하는 방식도 포함했습니다.

다만 이러한 추가적인 구현 방식이 영상에서 사용한 코드와는 별도로 보충된 내용이라는 점을 명확하게 안내하지 못했습니다. 영상을 따라 코드를 작성하시면서 강의 노트까지 함께 참고하셨다면, 어떤 방식을 기준으로 학습해야 할지 혼란스러우셨을 것 같습니다. 이 부분은 제가 조금 더 세심하게 설명을 덧붙였어야 했는데, 충분히 배려하지 못한 점 죄송합니다.

두 방식의 차이를 실제 코드와 함께 조금 더 구체적으로 설명드리겠습니다.

먼저 영상에서 사용하는 방식은 다음과 같습니다.

import readline from 'node:readline/promises';

const consoleInterface = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

while (true) {
  const message = await consoleInterface.question(
    "메시지를 입력하세요 > "
  );

  console.log("입력한 메시지:", message);
}

위 코드는 이해를 돕기 위해 영상의 입력 처리 부분만 간단하게 분리한 예시입니다. 실제 강의에서는 비동기 연결 콜백 내부에서 이 반복문을 실행합니다.

여기서 가장 중요한 부분은 await consoleInterface.question()입니다.

사용자에게 입력 안내 문구를 출력한 뒤, 엔터를 누를 때까지 해당 비동기 함수의 다음 코드 실행을 일시적으로 중단합니다. 사용자가 입력을 완료하면 반환된 문자열이 message 변수에 저장되고, 이후 코드가 실행됩니다.

그리고 while (true) 반복문에 의해 다시 입력을 기다리는 과정이 반복됩니다.

중요한 점은 await로 사용자 입력을 기다린다고 해서 Node.js 프로그램 전체가 멈추는 것은 아니라는 사실입니다. 해당 비동기 함수의 실행만 잠시 중단되므로, 그동안 서버에서 새로운 메시지가 도착하면 별도로 등록된 data 이벤트 리스너가 실행되어 채팅 메시지를 수신할 수 있습니다.

반면 강의 노트에서 소개한 방식은 다음과 같습니다.

import readline from 'node:readline';

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
  prompt: "메시지를 입력하세요 > "
});

rl.prompt();

rl.on("line", (input) => {
  console.log("입력한 메시지:", input);

  rl.prompt();
});

이 방식은 while (true) 반복문을 직접 작성하지 않습니다.

대신 rl.on("line", ...)을 통해 사용자가 입력을 완료했을 때 실행할 콜백 함수를 미리 등록합니다.

사용자가 엔터를 누르면 line 이벤트가 발생하고, 등록된 콜백 함수가 실행되면서 입력한 문자열을 input 변수로 전달받습니다.

그리고 여기서 질문해 주신 rl.prompt()는 입력 안내 문구를 터미널에 출력하는 역할을 합니다.

즉, 처음 rl.prompt()를 호출하여 입력 안내 문구를 표시하고, 사용자가 엔터를 누르면 line 이벤트가 발생하여 입력 내용을 처리합니다. 이후 다시 rl.prompt()를 호출하여 다음 입력을 받을 수 있도록 안내하는 구조입니다.

두 방식을 비교하면 다음과 같이 이해하시면 좋겠습니다.

영상의 readline/promises 방식은 사용자의 입력을 비동기적으로 기다린 뒤 다음 코드를 순서대로 실행하는 구조이고, 강의 노트의 readline 이벤트 방식은 입력 완료 이벤트가 발생할 때마다 등록된 함수를 실행하는 구조입니다.

두 방식 모두 Node.js에서 사용자 입력을 비동기적으로 처리할 수 있으며, 어느 한쪽이 무조건 더 우수하거나 올바른 방식인 것은 아닙니다. 프로그램의 구조와 구현 목적에 따라 선택할 수 있는 서로 다른 접근 방식입니다.

그리고 이번 11강에서 가장 중요하게 이해하셔야 할 부분은 입력 처리 방식 자체보다는, 서버가 발급한 사용자 ID를 클라이언트가 전달받아 저장하고, 이후 채팅 메시지를 전송할 때 해당 ID를 함께 포함한다는 점입니다.

예를 들어 영상에서는 다음과 같이 구현했습니다.

let myClientId = null;

chatClient.on("data", (data) => {
  const dataString = data.toString("utf-8");

  if (dataString.startsWith("id-")) {
    myClientId = dataString.substring(3);
  }
});

서버에서 id-1이라는 문자열을 전달받으면 substring(3)을 통해 ID 부분인 "1"만 추출하고, 이를 myClientId 변수에 저장합니다.

이후 사용자가 메시지를 입력하면 다음과 같이 해당 ID를 함께 전송합니다.

if (myClientId !== null) {
  chatClient.write(`${myClientId}-메시지-${message}`);
}

이렇게 하면 사용자가 안녕하세요라고 입력했을 때 실제 서버로 전달되는 문자열은 다음과 같습니다.

1-메시지-안녕하세요

강의 노트의 이벤트 기반 방식에서도 동일한 원리를 적용합니다. 차이가 있다면 사용자가 입력한 내용을 await consoleInterface.question()으로 전달받느냐, rl.on("line")의 콜백 매개변수로 전달받느냐에 있습니다.

따라서 두 방식의 입력 처리 구조는 다르지만, 사용자 ID를 관리하고 메시지를 전송하는 핵심적인 학습 목표는 동일합니다.

다만 실제로 코드를 작성하며 학습하실 때는 두 방식의 코드를 부분적으로 섞어서 사용하시기보다는, 우선 영상에서 설명드린 readline/promises와 while (true) 방식을 기준으로 따라오시는 것을 권장드립니다.

강의 노트의 rl.on("line") 방식은 같은 기능을 이벤트 기반으로도 구현할 수 있다는 점을 이해하는 추가 학습 자료로 참고하시면 좋겠습니다.

물론 입력 처리 방식 외에도 강의 노트의 코드에는 영상과 일부 다른 부분이 있으므로, 두 코드 전체가 완전히 동일하게 동작한다고 보기는 어렵습니다. 따라서 강의 노트의 코드를 영상 코드의 일부와 바로 혼합하기보다는 각각의 예제를 독립적으로 살펴보시는 것이 좋습니다.

이처럼 구현 방식이 달라지는 경우에는 단순히 코드만 추가하는 것이 아니라, 왜 다른 방식을 사용했는지와 실제 동작이 어떻게 달라지는지까지 설명하는 것이 중요하다고 생각합니다.

앞으로는 영상에서 직접 구현한 코드와 추가 학습을 위해 보완한 코드를 명확하게 구분하고, 서로 다른 구현 방식을 소개할 때는 각각의 차이와 활용 목적까지 함께 안내하도록 하겠습니다. 이번 11강 역시 이러한 내용을 보충하여, 영상과 강의 노트를 함께 보시더라도 이해하는 데 어려움이 없도록 더욱 세심하게 다듬겠습니다.

그리고 경원 님, 한 가지 더 말씀드리고 싶습니다.

이렇게 강의를 꼼꼼하게 살펴보시고 직접 질문까지 남겨주신 것이 저에게는 정말 감사한 일입니다. 강의를 제작하는 입장에서 제가 충분히 설명하지 못했던 부분을 다시 살펴보고 개선할 수 있다는 것 자체가 큰 도움이 됩니다.

그래서 감사한 마음을 조금이나마 전해드리고 싶습니다.

괜찮으시다면 jeony0535@naver.com으로 이메일 한 통만 보내주실 수 있을까요?

정말 감사한 마음을 담아, 제가 운영하는 우리동네코딩스튜디오의 강의에 적용하실 수 있는 최대 할인 쿠폰을 전달드리고 싶습니다. 부담 없이 편하게 연락 주시면 감사하겠습니다!

물론 쿠폰과는 별개로, 앞으로도 강의를 수강하시면서 궁금한 점이나 설명이 부족한 부분, 코드에서 의문이 생기는 부분이 있다면 언제든 편하게 질문 남겨주세요. 특히 영상과 강의 노트를 함께 살펴보시다가 이해가 되지 않는 부분이 있다면, 해당 코드의 실행 흐름과 내부 동작 원리까지 최대한 상세하게 설명드리겠습니다.

다시 한번 소중한 시간을 내어 피드백 남겨주셔서 진심으로 감사드립니다. 경원 님께서 보내주신 의견을 바탕으로 더욱 완성도 높고 이해하기 쉬운 강의를 만들어 가겠습니다.

감사합니다, 경원 님!