12강. 정적 파일(Static Files)
이번 강의에서는 Express에서 HTML, CSS, JavaScript, 이미지 파일을 브라우저에 제공하는 방법을 배웁니다.
목표: Express를 이용해 실제 웹사이트처럼 HTML, CSS, JS, 이미지가 연결된 페이지를 만들 수 있습니다.
1. 정적 파일(Static File)이란?
정적 파일은 사용자가 요청하면 그대로 전달되는 파일입니다.
대표적인 정적 파일
HTML
CSS
JavaScript
이미지
동영상
폰트
예를 들어
index.html
style.css
script.js
logo.png
브라우저가 요청하면 서버가 그대로 보내줍니다.
2. 프로젝트 구조 만들기
실무에서 많이 사용하는 구조입니다.
project
│
├── index.js
├── package.json
│
├── public
│ ├── css
│ │ └── style.css
│ │
│ ├── js
│ │ └── script.js
│ │
│ └── images
│ └── logo.png
│
└── views
└── index.html
3. express.static()
정적 파일을 제공하려면 express.static()을 사용합니다.
const express = require("express");
const app = express();
app.use(express.static("public"));
app.listen(3000);
이제 public 폴더 안의 파일을 브라우저에서 사용할 수 있습니다.
4. CSS 연결
public/css/style.css
body{
background:#f5f5f5;
font-family:Arial;
}
h1{
color:blue;
}
5. HTML 만들기
views/index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Node.js</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Node.js 수업</h1>
</body>
</html>
6. HTML 출력
const path = require("path");
app.get("/",(req,res)=>{
res.sendFile(
path.join(__dirname,"views","index.html")
);
});
브라우저
http://localhost:3000
HTML과 CSS가 함께 출력됩니다.
7. JavaScript 연결
public/js/script.js
console.log("JavaScript 연결 완료");
alert("환영합니다.");
HTML
<script src="/js/script.js"></script>
8. 이미지 출력
폴더
public
└── images
logo.png
HTML
<img src="/images/logo.png">
브라우저
http://localhost:3000/images/logo.png
직접 접속도 가능합니다.
9. 여러 HTML 만들기
views
├── index.html
├── about.html
└── contact.html
라우팅
app.get("/about",(req,res)=>{
res.sendFile(
path.join(__dirname,"views","about.html")
);
});
app.get("/contact",(req,res)=>{
res.sendFile(
path.join(__dirname,"views","contact.html")
);
});
10. path.join()
실무에서는 경로를 이렇게 작성합니다.
const path = require("path");
path.join(__dirname,"views","index.html");
Windows
\views\index.html
Mac
/views/index.html
운영체제에 맞게 자동으로 처리됩니다.
11. 전체 예제
const express = require("express");
const path = require("path");
const app = express();
app.use(express.static("public"));
app.get("/",(req,res)=>{
res.sendFile(
path.join(__dirname,"views","index.html")
);
});
app.listen(3000,()=>{
console.log("Server Running");
});
12. 폴더 구조
project
│
├── index.js
│
├── package.json
│
├── public
│ ├── css
│ ├── js
│ └── images
│
└── views
이 구조는 Express 프로젝트에서 가장 많이 사용됩니다.
13. 실습 1
CSS 연결하기
body{
background:#ddd;
}
HTML
<link rel="stylesheet"
href="/css/style.css">
14. 실습 2
이미지 출력
<img src="/images/photo.jpg">
15. 실습 3
JavaScript 연결
alert("Node.js");
HTML
<script src="/js/script.js"></script>
16. 실습 4
회사소개 페이지
app.get("/about",(req,res)=>{
res.sendFile(
path.join(
__dirname,
"views",
"about.html"
)
);
});
17. 실무 프로젝트 구조
project
│
├── app.js
│
├── package.json
│
├── public
│ ├── css
│ ├── js
│ ├── images
│ ├── fonts
│ └── video
│
├── routes
│
├── controllers
│
├── models
│
└── views
18. public 폴더의 역할
public
│
├── css
├── js
├── images
├── video
└── fonts
사용자가 직접 접근 가능한 파일을 저장하는 폴더입니다.
19. views 폴더의 역할
views
│
├── index.html
├── login.html
├── join.html
├── board.html
└── admin.html
웹페이지(HTML)를 보관하는 폴더입니다.
참고: 이후에는 HTML 대신 EJS 같은 템플릿 엔진을 사용하는 경우가 많습니다.
20. 이번 강의 핵심 정리
문법 설명
express.static() 정적 파일 제공
res.sendFile() HTML 파일 전송
path.join() 안전한 경로 생성
/css CSS 폴더
/js JavaScript 폴더
/images 이미지 폴더
public 정적 파일 저장
views HTML 저장
실무 팁
실제 Express 프로젝트에서는 public과 views를 명확히 구분합니다.
브라우저
↓
Express
↓
views
↓
HTML
↓
public
↓
CSS
JS
Image
Font
Video
이 구조를 이해하면 React, Vue 같은 프런트엔드 프레임워크와 연동할 때도 훨씬 수월합니다.
실습 미션
다음과 같은 미니 홈페이지를 만들어 보세요.
메인 페이지
↓
회사소개
↓
상품소개
↓
문의하기
구성
views
│
├── index.html
├── about.html
├── product.html
└── contact.html
public
│
├── css
├── js
└── images
모든 페이지에 공통 CSS를 적용하고, 로고 이미지와 JavaScript를 연결해 보세요.
이번 강의에서는 Express에서 HTML, CSS, JavaScript, 이미지 파일을 브라우저에 제공하는 방법을 배웁니다.
목표: Express를 이용해 실제 웹사이트처럼 HTML, CSS, JS, 이미지가 연결된 페이지를 만들 수 있습니다.
1. 정적 파일(Static File)이란?
정적 파일은 사용자가 요청하면 그대로 전달되는 파일입니다.
대표적인 정적 파일
HTML
CSS
JavaScript
이미지
동영상
폰트
예를 들어
index.html
style.css
script.js
logo.png
브라우저가 요청하면 서버가 그대로 보내줍니다.
2. 프로젝트 구조 만들기
실무에서 많이 사용하는 구조입니다.
project
│
├── index.js
├── package.json
│
├── public
│ ├── css
│ │ └── style.css
│ │
│ ├── js
│ │ └── script.js
│ │
│ └── images
│ └── logo.png
│
└── views
└── index.html
3. express.static()
정적 파일을 제공하려면 express.static()을 사용합니다.
const express = require("express");
const app = express();
app.use(express.static("public"));
app.listen(3000);
이제 public 폴더 안의 파일을 브라우저에서 사용할 수 있습니다.
4. CSS 연결
public/css/style.css
body{
background:#f5f5f5;
font-family:Arial;
}
h1{
color:blue;
}
5. HTML 만들기
views/index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Node.js</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Node.js 수업</h1>
</body>
</html>
6. HTML 출력
const path = require("path");
app.get("/",(req,res)=>{
res.sendFile(
path.join(__dirname,"views","index.html")
);
});
브라우저
http://localhost:3000
HTML과 CSS가 함께 출력됩니다.
7. JavaScript 연결
public/js/script.js
console.log("JavaScript 연결 완료");
alert("환영합니다.");
HTML
<script src="/js/script.js"></script>
8. 이미지 출력
폴더
public
└── images
logo.png
HTML
<img src="/images/logo.png">
브라우저
http://localhost:3000/images/logo.png
직접 접속도 가능합니다.
9. 여러 HTML 만들기
views
├── index.html
├── about.html
└── contact.html
라우팅
app.get("/about",(req,res)=>{
res.sendFile(
path.join(__dirname,"views","about.html")
);
});
app.get("/contact",(req,res)=>{
res.sendFile(
path.join(__dirname,"views","contact.html")
);
});
10. path.join()
실무에서는 경로를 이렇게 작성합니다.
const path = require("path");
path.join(__dirname,"views","index.html");
Windows
\views\index.html
Mac
/views/index.html
운영체제에 맞게 자동으로 처리됩니다.
11. 전체 예제
const express = require("express");
const path = require("path");
const app = express();
app.use(express.static("public"));
app.get("/",(req,res)=>{
res.sendFile(
path.join(__dirname,"views","index.html")
);
});
app.listen(3000,()=>{
console.log("Server Running");
});
12. 폴더 구조
project
│
├── index.js
│
├── package.json
│
├── public
│ ├── css
│ ├── js
│ └── images
│
└── views
이 구조는 Express 프로젝트에서 가장 많이 사용됩니다.
13. 실습 1
CSS 연결하기
body{
background:#ddd;
}
HTML
<link rel="stylesheet"
href="/css/style.css">
14. 실습 2
이미지 출력
<img src="/images/photo.jpg">
15. 실습 3
JavaScript 연결
alert("Node.js");
HTML
<script src="/js/script.js"></script>
16. 실습 4
회사소개 페이지
app.get("/about",(req,res)=>{
res.sendFile(
path.join(
__dirname,
"views",
"about.html"
)
);
});
17. 실무 프로젝트 구조
project
│
├── app.js
│
├── package.json
│
├── public
│ ├── css
│ ├── js
│ ├── images
│ ├── fonts
│ └── video
│
├── routes
│
├── controllers
│
├── models
│
└── views
18. public 폴더의 역할
public
│
├── css
├── js
├── images
├── video
└── fonts
사용자가 직접 접근 가능한 파일을 저장하는 폴더입니다.
19. views 폴더의 역할
views
│
├── index.html
├── login.html
├── join.html
├── board.html
└── admin.html
웹페이지(HTML)를 보관하는 폴더입니다.
참고: 이후에는 HTML 대신 EJS 같은 템플릿 엔진을 사용하는 경우가 많습니다.
20. 이번 강의 핵심 정리
문법 설명
express.static() 정적 파일 제공
res.sendFile() HTML 파일 전송
path.join() 안전한 경로 생성
/css CSS 폴더
/js JavaScript 폴더
/images 이미지 폴더
public 정적 파일 저장
views HTML 저장
실무 팁
실제 Express 프로젝트에서는 public과 views를 명확히 구분합니다.
브라우저
↓
Express
↓
views
↓
HTML
↓
public
↓
CSS
JS
Image
Font
Video
이 구조를 이해하면 React, Vue 같은 프런트엔드 프레임워크와 연동할 때도 훨씬 수월합니다.
실습 미션
다음과 같은 미니 홈페이지를 만들어 보세요.
메인 페이지
↓
회사소개
↓
상품소개
↓
문의하기
구성
views
│
├── index.html
├── about.html
├── product.html
└── contact.html
public
│
├── css
├── js
└── images
모든 페이지에 공통 CSS를 적용하고, 로고 이미지와 JavaScript를 연결해 보세요.
#12강. 정적 파일(Static Files)