Router
웹에서의 라우터는 3가지로 정의된다고 한다.
- 네트워크 계층에서는 데이터 패킷 방향을 결정하는 네트워크 장치
- 목적지까지 안전하고 빠르게 데이터를 보내는 것
- 애플리케이션 계층의 Single-page Application의 경우 주어진 URL로 표시되는 웹 페이지를 결정하는 라이브러리.
- SPA는 URL을 통해 각기 다른 페이지를 보여주는데 Fragment Identifier(hash)를 통해 문서의 부차적 자원에 참조하므로 문서 내부에서 일어나는 일이기 때문에 화면의 갱신이 일어나지 않는다. Framework가 이러한 방식으로 Routing 한다고 표현하는 듯
- 서비스 계층의 API 구현에서 라우터는 요청을 구문 분석하고 요청을 프로그램 내의 다양한 핸들러로 보내거나 라우팅하는 소프트웨어 구성요소.
- 응용 프로그램이 URL(or Path) 및 특정 HTTP 요청 Method인 특정 EndPoint에 대한 클라이언트의 요청에 응답하는 방법을 결정하는 것을 의미하는듯 하다.
위의 3가지 정의 중 지금부터 사용 될 Router는 Express에서 사용되는 의미인 3번에 해당되는 것을 알 수 있으며, 이는 사용자가 요청하는 URL(or Path)에 최적으로 도달하기 위한 분배(그룹화)로 이해할 수 있다.
적용하기
언급한대로 결국 라우터는 URL에 대한 분배(그룹화)이며, 이를 용이하게 하기 위한 중개소같은 것으로 사용된다.
사용해야 할 Path가 많아질수록 가독성 등의 이유로 관리하기 쉽도록 파일을 나누어 적용했다.
globalRouter.js
//독립된 파일에 정리하여 나누었기 때문에 express를 import 해주어야한다.
import express from "express"
const globalRouter = express.Router();
const homeController = (req, res) =>{
return res.send("<h1>Welcome!!</h1>");
}
const homeEditController = (req, res) => {
return res.send("<h1>Edit page</h1>");
}
globalRouter.get("/",homeController);
globalRouter.get("/edit",homeEditController);
//listen하고 있는 app.js에서 사용하기 위해 globalRouter를 디폴트로 내보내고있다.
//디폴트의 경우 globalRouter를 명시했기 때문에 외부사용 시 별도로 지정해주지 않아도 되지만 파일에서 한개만 지정가능하다.
export default globalRouter;app.js
import express from "express"
import globalRouter from "./routers/globalRouter";
const app = express();
const PORT = 8000;
const middleware = (req, res, next) => {
console.log("Middleware!!!!");
next();
}
app.use(middleware);
app.use("/",globalRouter)
app.listen(PORT,() => {console.log(`Start Server http://localhost:${PORT}`)});Controller
Router와 같은 이유로 Controller 또한 정리.
app.js
import express from "express"
import globalRouter from "./routers/globalRouter";
import userRouter from "./routers/userRouter";
import videoRouter from "./routers/videoRouter";
import testRouter from "./routers/testRouter";
const app = express();
const PORT = 8000;
const middleware = (req, res, next) => {
console.log("Middleware!!!!");
next();
}
app.use(middleware);
app.use("/",globalRouter);
app.use("/user",userRouter);
app.use("/video",videoRouter);
app.use("/test",testRouter);
app.listen(PORT,() => {console.log(`Start Server http://localhost:${PORT}`)}); testRouter
import express from "express"
import {test,pi} from "../controllers/testController"
const testRouter = express.Router();
testRouter.get("/",test);
testRouter.get("/pi",pi);
export default testRouter;testController
export const test = (req, res) => res.send("<h1>Test Page</h1>");
export const pi = (req, res) => res.send("<h1>PI!</h1>");현 구조를 정리해보면 app.js → router → countroller 순으로 참조하고 있으며 서버 → 분배 → 페이지(함수) 순임을 알수있다.
Regular Expression & Parameters
testRouter.js
import express from "express"
import {test,pi} from "../controllers/testController"
const testRouter = express.Router();
//:id는 인자값 전달을 위한 변수명처럼 생각하면 되며 \\d+에서 d는 숫자를, +는 갯수의 관계없이 적용해준다.(ex. /12, /22223, /9999999)
testRouter.get("/:id(\\d+)",test);
//:fufu는 명명이 자유로움을 보여준다. pi문자 뒤에 w는 문자를 +는 갯수.(ex. /piajsdhaj, /piaaaaa, /pidks)
testRouter.get("/:fufu(pi\\w+)/pi",pi);
export default testRouter;
testController.js
export const test = (req, res) => res.send(`<h1>Test Page#${req.params.id}</h1>`);
export const pi = (req, res) => res.send(`<h1>PI! #${req.params.fufu}</h1>`);PUG(View Engine)
지금까지 HTML을 출력하는 방식은 String으로 모든 DOM 구조를 입력하고 페이지마다 수정해야 한다는 점에서 관리뿐만 아니라 개발함에도 너무 큰 리소스를 낭비하는 구조이다. 따라서 이러한 부분을 해결해줄 PUG라는 View Engine으로 대체함으로 반복적인 소스와 가독성에서의 개선을 기대해볼 수 있다.
//pug를 install하고 Express에게 View Engine이 무엇인지 명시해 주어야한다.(app.js에 추가)
app.set("view engine", "pug");
app.set("views", process.cwd() + "/src/views"); // default path값 변경Express는 기본적으로 process.cwd() +
/views를 기준으로 view파일을 찾는다. 따라서 ./views 폴더에 PUG 파일이 들어가야한다. 단 ./ 의 기준은 package.jon의 위치이므로(서버구동은 package.json의 script를 실행하는 것이므로) 실제 실행해야할 js 파일에 디폴트값을 맞출필요가있다.
VSCode의 Prettier Extension을 사용하고 있을 경우 PUG는 별도의 Plug-In을 추가해주어야한다.
