01 · 내 문장을 친구 컴퓨터에 띄우기

첫 성공 실습 ZIP 다운로드 · 설치와 터미널 도움말

만들 것: Hello!를 내가 고른 영문 문장으로 바꾸고 친구 브라우저에서 보기.

이번 예제의 소스는 server/server.mjs 하나다. 먼저 실행 결과를 보고, 각 줄이 하는 일을 짚고, 문장 한 곳을 바꾼다. 송수신 문장은 영문·숫자·기본 기호(ASCII)로 제한한다. 한글은 뒤의 문자와 바이트 실험에서 다룬다.

1. 예상하고 실행하기

01-첫성공 폴더를 편집기와 터미널에서 연다. Node.js 24를 설치했다면 패키지 설치 없이 실행할 수 있다.

npm start

터미널은 그대로 두고 내 페이지를 연다. 서버는 계속 실행 중이므로 터미널에 명령 입력 표시가 돌아오지 않는 것이 정상이다. 브라우저로 접속하면 터미널에도 요청 데이터가 출력된다.

2. 한 화면의 코드를 읽기

server/server.mjs를 연다. 이것이 첫 서버의 전체 코드다.

import net from 'node:net';

const server = net.createServer((socket) => {
  socket.once('data', (data) => {
    console.log(data.toString());

    socket.end(
      'HTTP/1.0 200 OK\r\n' +
      'Content-Type: text/html\r\n' +
      '\r\n' +
      '<h1>Hello!</h1>'
    );
  });
});

server.listen(8080);

다음 네 부분을 찾아 가리킨다.

1. createServer: 새 연결이 오면 할 일.
2. once('data'): 처음 데이터가 도착하면 할 일.
3. socket.end(...): 응답을 보내고 연결을 마무리하기.
4. listen(8080): 8080번 포트에서 기다리기.

응답은 상태 줄 → HTTP 헤더 → 빈 줄 → 본문 순서다. HTTP/1.0 200 OK는 상태 줄이고, Content-Type: text/html은 HTTP 헤더다. 빈 줄 뒤 <h1>Hello!</h1>이 본문이다. 지금은 헤더 문법을 외우기보다 어디까지가 설명이고 어디부터가 내용인지 찾는다.

3. 내 문장으로 바꾸기

Hello!를 Hello, Mina!, I like games., Guess my favorite color! 중 하나 또는 내가 정한 영문 문장으로 바꾼다. 따옴표와 HTML 태그는 남긴다.

변경 전 어떤 화면이 나올지 예상한 다음, 파일을 저장하고 서버 터미널에서 Ctrl+C를 누른 뒤 다시 실행한다.

npm start

브라우저를 새로고침해서 예상과 비교한다. 지금 실행 중인 프로그램은 파일을 저장한다고 자동으로 바뀌지 않는다.

4. 친구에게 보여 주기

별도 터미널에서 주소 확인 도구를 실행한다.

npm run doctor

강사와 함께 수업 네트워크에 연결된 Wi-Fi 주소를 고른다. 친구가 그 주소를 열면 내 컴퓨터의 서버로 요청한다. 127.0.0.1은 접속하는 컴퓨터 자신이므로 친구에게 전달할 주소로 쓰지 않는다.

한 명이 서버를 실행하고 한 명이 접속한 뒤 역할을 바꾼다. 서버·요청을 보낸 브라우저·화면에 표시된 문장이 각각 어디에 있는지 가리킨다.

5. 서버를 끄면?

친구 화면에 문장이 보이는 상태에서 다음을 예상한다.

• 서버를 끄면 이미 보이는 문장도 사라질까?
• 서버를 끈 뒤 주소 끝에 ?check=2를 붙여 새 요청을 보내면 어떻게 될까?

직접 관찰하고 비교한다. 이미 받은 문장은 화면에 남을 수 있지만 꺼진 서버는 새 요청에 응답하지 못한다. 오류를 자동 처리하는 코드는 아직 추가하지 않는다. 다시 실행해서 복구하면 된다.

이해 확인

• 내가 수정한 줄을 찾아 무엇이 달라졌는지 설명한다.
• 같은 코드에서 내 브라우저와 친구 브라우저가 요청할 수 있는 이유를 설명한다.
• 서버를 켜 둔 터미널을 왜 종료하면 안 되는지 설명한다.

선택: HTML을 파일로 꺼내 보기

첫 서버를 종료하고 아래 명령으로 다음 예제를 실행한다.

npm run page

next-step/server.mjs의 새 줄은 HTML을 파일에서 읽는다. next-step/index.html의 제목과 문장을 바꾸고 저장 → 서버 재시작 → 새로고침한다.

친구 페이지로 가는 링크를 추가해도 된다. 아래 숫자 주소는 형식 예시이므로 친구가 확인한 실제 Wi-Fi 주소로 바꾼다.

<a href="http://192.168.1.10:8080/">Visit my friend</a>

이 단계는 파일 읽기를 추가한 선택 활동이다. 처음부터 모든 학생이 진행할 필요는 없다.

이 실험의 범위

어떤 경로로 접속해도 같은 응답을 보낸다. 요청을 분석하거나 검증하지 않는다. 처음 받은 데이터가 요청 전체라는 뜻은 아니다. TCP 데이터 조각과 요청의 경계, 한글과 UTF-8은 다음 통신 단원에서 각각 실험한다.

다음: JavaScript와 Node.