HTML 제공하기
본인 서버에서 진짜 웹 페이지 제공하기
⏱ 예상 ~10분
01 · 읽기
지금까지 본인 서버는 평문 텍스트와 JSON 을 돌려줬어요. 하지만 진짜 웹사이트를 방문할 때, 본인이 보는 건 스타일이 적용된 페이지예요. 헤딩, 이미지, 레이아웃이 있어요. 원시 텍스트가 아니에요.
그건 진짜 web 서버가 HTML 파일을 제공하기 때문이에요. HTML 은 브라우저가 이해하고 풍부하게 포맷된 내용을 표시하는 데 쓰는 언어예요.
HTML 을 JavaScript 코드 안에 작성하는 대신 (금방 지저분해져요), HTML 파일을 특별한 폴더에 넣고, Express 한테 자동으로 제공하라고 해요. 이걸 정적 파일 제공이라고 해요. 요청에 따라 바뀌지 않는 파일들을, 있는 그대로 보내는 거죠.
핵심 정리
- 정적 파일은 처리 없이 직접 제공돼요
- public/ 폴더는 브라우저가 공개적으로 접근할 수 있는 파일에 대한 관례예요
- Express 는 한 줄의 코드로 정적 파일 폴더 전체를 제공할 수 있어요
- 이게 진짜 웹사이트가 CSS, 이미지, HTML 페이지를 제공하는 방식이에요
02 · 실기 실습
먼저 본인 프로젝트 폴더 안에 public 디렉토리를 만들어요. 정적 파일 (HTML, CSS, 이미지) 이 여기에 살게 돼요.
mkdir public
03 · 실기 실습
public 폴더 안에 index.html 파일을 만들어요. 텍스트 편집기로 만들 수 있어요. 본인 프로젝트 디렉토리 안의 public/index.html 로 저장해요. 이게 본인 서버의 홈페이지가 돼요.
<!DOCTYPE html>
<html>
<head>
<title>My First Server</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 50px auto; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Welcome to My Server</h1>
<p>This page is being served by Node.js and Express.</p>
<p>I built this myself.</p>
</body>
</html>04 · 퀴즈
왜 HTML 파일을 JavaScript 코드 안이 아니라 public/ 폴더에 두나요?
- JavaScript 는 HTML 문자열을 포함할 수 없어요
- 정리를 위해서요. HTML 파일은 처리 없이 있는 그대로 제공돼요
- public/ 폴더가 다른 서버를 쓰기 때문에 더 빨라요
- 브라우저는 'public' 이라는 이름의 폴더만 읽을 수 있어요
05 · 실기 실습
이제 Express 한테 public 폴더의 파일을 제공하라고 해요. app.js 를 열고, const app = express(); 줄 뒤, 모든 app.get() routes 앞에 이 줄을 추가해요. 이 한 줄이 public/ 폴더의 모든 파일을 본인 서버를 통해 접근할 수 있게 만들어요.
app.use(express.static('public'));06 · 실기 실습
서버를 멈추고 (Ctrl+C) 다시 시작한 다음, 브라우저에서 http://localhost:3000 을 방문해요. 평문 'Hello, World!' 대신, 이제 헤딩과 단락이 있는 스타일이 적용된 HTML 페이지가 보일 거예요. 그게 본인의 index.html 이 제공되는 거예요!
node app.js
http://localhost:3000
07 · 빈칸 채우기
'public' 이라는 폴더에서 정적 파일을 제공하려면, 이 middleware 를 추가해요: app.use(express._____('public'))
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.