Hello World 서버
10 줄의 코드로 진짜 web 서버 만들기
⏱ 예상 ~8분
01 · 읽기
진짜 뭔가를 만들 때예요. 10 줄의 코드로 만든 web 서버죠.
본인이 방문하는 모든 웹사이트는 서버가 요청을 듣고 응답을 보내기 때문에 동작해요. 브라우저에 URL 을 치면, 브라우저가 서버에 요청을 보내고, 서버가 웹 페이지를 돌려줘요.
다음으로 만들 게 바로 그런 서버예요. 본인 컴퓨터에서 돌아가고, 본인 브라우저로 방문할 수 있어요. 이건 Netflix, Twitter, 수백만 다른 web 앱을 떠받치는 기술과 정확히 같은 기술이에요.
핵심 정리
- 서버는 요청을 듣고 응답을 보내요
- Express 는 서버 만들기를 쉽게 해줘요
- 본인 서버는 로컬에서 http://localhost:3000 에서 돌아가요
02 · 실기 실습
텍스트 편집기로 app.js 라는 파일을 만들고, my-server 폴더 (Express 를 설치한 작업 디렉토리) 에 저장해요. 아래 블록 전체를 복사할 수 있어요. 이건 완전한 Express web 서버예요.
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello, World! This is my first server.');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});03 · 실기 실습
서버를 시작해요! Node 로 이 파일을 실행해요. 서버가 돌아가고 있다는 메시지가 보일 거예요.
node app.js
04 · 퀴즈
Express 서버에서 listen 함수는 뭘 하나요?
- 브라우저에 응답을 보내요
- 디스크에서 파일을 읽어요
- 데이터베이스에 연결해요
- 서버를 시작하고, 특정 포트에서 들어오는 요청을 기다리게 해요
05 · 빈칸 채우기
Express 에서, app.listen(3000) 은 서버한테 _____ 3000 에서 듣게 해요.
06 · 실기 실습
브라우저를 열고 http://localhost:3000 에 연결해요. 페이지에 본인 메시지가 보일 거예요! 작품을 감상한 다음, 터미널로 돌아가서 Ctrl+C 를 눌러서 서버를 멈춰요.
07 · 퀴즈
서버 코드에서 app.listen(3000, ...) 줄을 삭제하고 실행하면, 어떻게 되나요?
- 파일이 실행되고 바로 끝나요. 서버는 시작되지 않아요
- 서버가 임의의 포트에서 들어요
- Express 가 자동으로 port 80 을 골라요
- listen 이 필수라서 문법 에러가 나요
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.