반응형
app.get("/tech", (req, res) => {
res.sendFile(__dirname + "/public/html/02_tech.html");
});
app.get("/perform", (req, res) => {
res.sendFile(__dirname + "/public/html/03_perform.html");
});
app.get("/field", (req, res) => {
res.sendFile(__dirname + "/public/html/04_field.html");
});
app.get("/contact", (req, res) => {
res.sendFile(__dirname + "/public/html/05_contact.html");
});
이렇게 줄줄이 적힌 app.get 방식 코딩으로 route를 하는 것도 방법이지만
main.js 파일이 지저분해지고 가독성이 떨어질 것이다.
그래서 !
express 모듈의
var router = express. Router();
사용해 보았다.
우선 router 파일을 하나 만드는게 좋다.
나는 라우팅 걸게 복잡하지 않아서
일단 index.js 파일 하나를 만들었다.
routers/index.js -> 내부
var express = require("express");
var router = express.Router();
const path = require("path");
router.use(function (req, res, next) {
next();
});
router.get("/", function (req, res) {
res.sendFile(path.join(__dirname, "../index.html"));
});
router.get("/intro", function (req, res) {
res.sendFile(path.join(__dirname, "../html/01_intro.html"));
});
router.get("/tech", function (req, res) {
res.sendFile(path.join(__dirname, "../html/02_tech.html"));
});
router.get("/perform", function (req, res) {
res.sendFile(path.join(__dirname, "../html/03_perform.html"));
});
router.get("/field", function (req, res) {
res.sendFile(path.join(__dirname, "../html/04_field.html"));
});
router.get("/contact", function (req, res) {
res.sendFile(path.join(__dirname, "../html/05_contact.html"));
});
module.exports = router;
app.js -> 내부
const express = require("express");
const port = process.env.PORT || 5000;
const app = express();
const indexRouter = require("./public/routers");
app.use(express.json());
app.use(express.urlencoded());
app.use(express.static(__dirname + "/public"));
app.use("/", indexRouter);
app.use((req, res, next) => {
res.status(404).send("Not Found");
});
app.post("/post", (req, res) => {
console.log(req.body);
});
app.listen(port, () => {
console.log(`sever started at http://localhost:${port}`);
});
원리는 app.use( " / " , [변수명])
index 파일은 명시 안해도 알아서 찾는다
" / " -> 도메인명의 기본값 -> 해당 경로[./public/routers ]로 타고 들어가서 -> get 으로 해당 url 에 맞는 파일을 가져온다 !
<__dirname 경로 관련 팁 ! >
반응형
'Web Dev' 카테고리의 다른 글
React Native로 크로스 플랫폼 웹뷰앱 만들기 (0) | 2023.02.10 |
---|---|
Apollo Server를 사용하여 GraphQL 서버 구현 해보자 ! (0) | 2023.02.01 |
<img> 태그 확대 CSS (0) | 2023.01.26 |
[Docker] : dockerfile 작성-> image 생성 -> Container 생성 및 운영 그리고 DockerHub에 push 마무리 @@@ (0) | 2022.11.15 |
java spring gradle server error (0) | 2022.10.14 |
REACT.JS 웹앱만들기.no1 (0) | 2022.07.18 |