프로젝트 설정
Claude Code로 프로젝트 초기화하고 Socket.io 설치하기
⏱ 예상 ~8분
01 · 읽기
만들 시간이에요. 다른 Node.js 프로젝트와 똑같이 시작해요. 폴더를 만들고, npm 을 초기화하고, 의존성을 설치해요. Level 7 에서 해 봤죠.
새로운 건 Socket.io 예요. WebSocket 을 쉽게 쓰게 해 주는 라이브러리예요. 연결 업그레이드, 재연결, 메시지 직렬화를 처리해 줘서 저수준 네트워킹 대신 게임 로직에 집중할 수 있어요.
Express 도 써서 게임의 HTML 파일을 제공해요. Express 와 Socket.io 가 함께 일해요. Express 가 페이지를 제공하고, Socket.io 가 실시간 통신을 처리해요.
핵심 정리
- Socket.io 는 WebSocket 통신을 간단하게 해 주는 라이브러리예요
- Express 가 HTML/CSS/JS 파일을 브라우저에 제공해요
- Socket.io 가 클라이언트와 서버 사이의 실시간 이벤트를 처리해요
- 둘 다 같은 서버에서 돌아요. Express 는 파일을, Socket.io 는 이벤트를 담당해요
02 · 실기 실습
프로젝트 폴더를 만들고 의존성을 설치해요. 터미널에서 이 명령들을 실행해요.
03 · 프롬프트 템플릿
Claude Code 에게 서버를 만들어 달라고 해요. 원하는 걸 구체적으로 설명해요. '서버 만들어 줘' 가 아니라 정확히 무엇을 해야 하는지요.
tic-tac-toe 게임의 서버 역할을 할 server.js 파일을 만들어 주세요. Express 로 public/ 디렉터리의 정적 파일을 제공하고, Socket.io 를 통합해 실시간 통신을 처리해요. 클라이언트가 연결되면 socket ID 와 함께 'Player connected' 를 출력하고, disconnect 되면 socket ID 와 함께 'Player disconnected' 를 출력해요. PORT 환경 변수를 listen 하고, 없으면 port 3000 으로 fallback 해요.
04 · 코드 예제
Claude가 server.js 를 만든 뒤에 이 핵심 패턴을 찾아봐요. Socket.io 는 Express app 에 직접 붙일 수 없어요. raw HTTP server 객체가 필요해요.
Express + Socket.io 통합 패턴
const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');
const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer);
app.use(express.static('public'));
io.on('connection', (socket) => {
console.log('Player connected:', socket.id);
socket.on('disconnect', () => {
console.log('Player disconnected:', socket.id);
});
});
httpServer.listen(process.env.PORT || 3000);
세 레이어를 살펴봐요. Express (app) 는 HTTP 요청을 처리하고 파일을 제공해요. HTTP server (httpServer) 는 Express 를 감싸요. Socket.io (io) 는 HTTP server 를 감싸서 WebSocket 업그레이드 요청을 가로채요. 그래서 Socket.io 는 raw HTTP 서버가 필요해요. Express 가 보기 전에 'Upgrade: websocket' 헤더를 잡아야 하거든요.
05 · 실기 실습
연결이 작동하는지 확인하기 위해 최소한의 테스트 페이지를 만들어요.
06 · 빈칸 채우기
Socket.io 는 Express app 만이 아니라 raw HTTP _____ 객체가 필요해요. WebSocket 업그레이드 핸드셰이크를 처리해야 하기 때문이에요.
07 · 퀴즈
npm install express socket.io 가 프로젝트에 무엇을 추가할까요?
- 게임을 만드는 두 가지 프로그래밍 언어
- 데이터베이스와 캐시 레이어
- 프런트엔드 프레임워크와 CSS 라이브러리
- Web 프레임워크 (Express) 와 실시간 통신 라이브러리 (Socket.io)
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.