Node.js / Express.js에서 Router 조작하기

Framework/Express

Node.js / Express.js에서 Router 조작하기

서리★ 2024. 7. 28. 16:25

🚀 개발 환경

💾 Visual Studio Code

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

💾 Node.js

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

💾 Express.js

Express.js 설치 명령어
npm install express

💾 Nodemon

Nodemon 설치 명령어
npm install nodemon

1. Express.js에서 Router 사용하기

Node.js에서 메인 서버가 모든 요청을 처리하기에는 작업이 많기 때문에 각각 경로에 요청이 들어오는 경우에는 라우터가 작업을 처리할 수 있도록 한다. app.js에서는 사용할 라우터만 등록한다.

1) Express.js 기본 폴더 생성

📂public과 📂routes 폴더를 생성한다.

2) Router

아래 코드는 main 페이지에 접속하는 예제이다.

📂 project > 📑 app.js

// 1. 모듈 불러오기
const express = require("express");

// 2. 라우터 모듈 불러오기
const router = require("./routes/router");

// 3. 애플리케이션 설정
const app = express();
const PORT = process.env.PORT || 3000;

// 4. 라우터 설정
app.use("/", router);

// 5. 서버 시작
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

📂 public > 📑 main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Main</h1>
</body>
</html>

📂 routes > 📑 router.js

const express = require("express");
const router = express.Router();

// 메인 페이지
router.get("/", (req, res) => {
  res.render("main");
});

module.exports = router;

2. Express.js에서 여러 개의 Router 사용하기

1) Express.js 기본 폴더 생성

📂public과 📂routes 폴더를 생성한다.

2) Router

아래 코드는 mainRouter와 subRouter를 통해 여러 페이지에 접속하는 예제이다.

mainRouter는main, football, baseball 페이지에 접속할 수 있게 해준다.

subRouter는 minor, fishing 페이지에 접속할 수 있게 해준다.

📂 Project > 📑 app.js

const express = require("express");
const app = express();

// 라우터 모듈 불러오기
const mainRouter = require("./routes/mainRouter");
const subRouter = require("./routes/subRouter");

// 경로에 맞는 라우터를 설정
app.use("/", mainRouter);
app.use("/minor", subRouter);

app.listen(3000);

📂 Public > 📑 main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Sports</h1>
    <a href="football">Football</a>
    <a href="baseball">Baseball</a>
    <a href="minor">Minor</a>
</body>
</html>

📂 Public > 📑 football.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Football</h1>
</body>
</html>

📂 Public > 📑 baseball.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Baseball</h1>
  </body>
</html>

📂 Public > 📑 minor.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Minor</h1>
    <a href="/minor/fishing">Fishing</a>
  </body>
</html>

📂 Public > 📑 fishing.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Fishing</h1>
  </body>
</html>

📂 routes > 📑 mainRouter.js

const express = require("express");
const router = express.Router();

// 파일의 경로를 수정하는 모듈 불러오기
// path.join(경로, 경로, 경로 ...) : 경로를 연결
const path = require("path");
const file_path = path.join(__dirname, "../public");

// 메인 페이지
router.get("/", (req, res)=>{
    res.sendFile(file_path + "/main.html");
});

// 축구 페이지
router.get("/football", (req, res)=>{
    res.sendFile(file_path + "/football.html");
})

// 야구 페이지
router.get("/baseball", (req, res)=>{
    res.sendFile(file_path + "/baseball.html");
})

module.exports = router;

📂 routes > 📑 subRouter.js

const express = require("express");
const router = express.Router();

const path = require("path");
const file_path = path.join(__dirname, "../public");

// minor 페이지의 메인
router.get("/", (req, res)=>{
    res.sendFile(file_path + "/minor.html");
});

// 낚시 페이지
router.get("/fishing", (req, res)=>{
    res.sendFile(file_path + "/fishing.html")
})

module.exports = router;