-
Express.js] HTML 페이지 서비스하기Node.js 2023. 12. 11. 17:25
1. html 파일 만들기
views 폴더를 만들어 두 개의 html 파일을 만들었다.
<!-- shop.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shop</title> </head> <body> <header> <ul> <li><a href="/">Shop</a></li> <li><a href="/admin/add-product">Add product</a></li> </ul> </header> <main> <h1>My products</h1> <p>List of all the products...</p> </main> </body> </html> </html><!-- add-product.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Add Product</title> </head> <body> <header> <ul> <li><a href="/">Shop</a></li> <li><a href="/admin/add-product">Add product</a></li> </ul> </header> <main> <form action="/admin/add-product" method="post"> <input type="text" name="title"> <button type="submit">Add Product</button> </form> </main> </body> </html>2. sendFile() : 파일을 전송하며 content-type header를 자동으로 생성
기존에는 res.send()로 직접 html 코드를 발송했었다.
이제 res.sendFile()로 html 파일을 발송해보자.
// app.js const express = require("express"); const router = express.Router(); router.get("/", (req, res, next) => { res.sendFile("/views/shop.html"); //운영체제의 시점에서 절대경로 }); module.exports = router;이때 파일이 위치한 경로를 어떻게 설정할 것인가?
절대경로를 쓰면 서버가 시작되는 app.js 파일에서부터 경로를 탐색할 것 같지만
위와 같이 운영체제의 절대경로를 탐색한다.
그렇다고 아래와 같이 상대경로를 쓰게 하면
res.sendFile("../views/shop.html");
절대경로를 쓰라고 한다.
그렇다면 어찌하나!!
3. PATH 모듈
node 코어 모듈 중 하나인 PATH를 통해 파일의 경로를 설정할 수 있다.
// shop.js const path = require("path"); // node 코어모듈 const express = require("express"); const router = express.Router(); router.get("/", (req, res, next) => { //res.sendFile("/views/shop.html"); //운영체제의 시점에서 절대경로 res.sendFile(path.join(__dirname, "../", "views", "shop.html")); //__dirname : 자신이 사용된 파일의 경로 }); module.exports = router;- __dirname : 변수가 쓰인 파일(위에서는 shop.js)가 위치한 경로
- path.join() : 매개변수로 쓰인 경로들을 연결함. 서버가 운용되는 OS를 인식하고 그에 따른 경로를 반환
현재 라우팅 js들이 위치한 경로는 routes 아래로
여기서 views로 진입하기 위해서 위와 같은 코드를 작성했다.
같은 방식으로 admin.js 파일도 수정한다.
// admin.js const path = require('path'); const express = require("express"); const router = express.Router(); // /admin/add-product <- GET router.get("/add-product", (req, res, next) => { res.sendFile(path.join(__dirname, '../', 'views', 'add-product.html')); }); // /admin/add-product <- POST router.post("/add-product", (req, res, next) => { console.log(req.body); res.redirect("/"); }); module.exports = router;이제 접속해보자
정상 작동한다.
같은 방식으로 404 페이지도 만들어 연결해주었다.
'Node.js' 카테고리의 다른 글
Express.js] static 폴더 사용 | 정적으로 파일 서비스 하기 | CSS, JS, 이미지 파일 등 가져오기 (0) 2023.12.12 Express.js]Navigation을 위한 헬퍼(유틸)함수 사용 (0) 2023.12.12 Express.js] 경로 필터링 (0) 2023.12.11 Express.js] 404 오류 페이지 추가하기 (0) 2023.12.11 Express.js] 라우팅을 다른 파일에 위탁하기 (0) 2023.12.07