Router( ft. express.Router() )

이상민·2026년 1월 9일

TIL

목록 보기
50/50

Router란

Express에서 라우터(router)
웹 브라우저의 요청(GET, POST 등)에 따라 서버가 어떤 동작을 해야 하는지 결정하는 분기 처리 시스템을 의미한다.

간단한 라우팅 예시

app.get("/", (req, res) => {
  res.send("홈페이지입니다");
});

위 코드는 사용자가 "/" 주소로 GET 요청을 보냈을 때,
"홈페이지입니다"라는 텍스트를 응답해주는 구조이다.

router를 따로 분리하는 이유?

작은 규모의 프로젝트라면 app.js 하나에 모든 라우트를 작성해도 괜찮지만, 실제 운영 환경처럼 규모가 커질수록 기능별로 URL이 다양해지고 분리되어야 한다.

  • /users → 사용자 관리
  • /products → 상품 관리
  • /admin → 관리자 기능
  • 만약 이러한 모든 요청을 하나의 app.js 파일에 작성하면?
app.get("/users", ...)
app.post("/users", ...)
app.get("/products", ...)
app.put("/products/:id", ...)
app.get("/admin/dashboard", ...)
이처럼 코드가 복잡해지면 유지보수가 매우 어렵고 오류 가능성도 커짐
  • 따라서 Express는 이러한 문제를 해결하기 위해 express.Router() 라는 기능을 제공한다.

✅ express.Router() 기본 문법(Syntax)

// ① express 불러오기
const express = require("express");

// ② router 객체 생성
const router = express.Router();

// ③ 요청 처리 등록
router.get("/", (req, res) => {
  res.send("GET 요청 처리");
});

router.post("/", (req, res) => {
  res.send("POST 요청 처리");
});

// ④ 외부에서 사용할 수 있도록 router 내보내기
module.exports = router;

📦 router-app
┣ 📄 app.js ← 메인 서버 파일
┣ 📂routes
┃ ┗ 📄 users.js ← /users 관련 라우터 정의

1️⃣ routes/users.js – 사용자 기능 전담 라우터

 // express 모듈을 불러옵니다.
const express = require("express");

// router 객체를 생성합니다.
// 이 router는 "미니 Express 앱"처럼 동작하며, 이 안에 라우트를 정의할 수 있습니다.
const router = express.Router();

// [GET] /users
// 클라이언트가 "/users"로 GET 요청을 보냈을 때 실행됩니다.
// 예: 브라우저에서 http://localhost:3000/users 요청 시 응답 반환
router.get("/", (req, res) => {
  res.send("User list"); // 사용자 목록을 응답
});

// [POST] /users
// 클라이언트가 "/users"로 POST 요청을 보냈을 때 실행됩니다.
// 예: Postman이나 HTML form에서 사용자 추가 요청을 보낼 때 사용
router.post("/", (req, res) => {
  res.send("Create a user"); // 사용자 생성 응답
});

// [GET] /users/:userId
// :userId는 URL 파라미터입니다.
// 예: "/users/123"으로 요청이 들어오면 userId는 "123"이 됩니다.
router.get("/:userId", (req, res) => {
  // req.params.userId를 통해 해당 사용자 ID를 가져올 수 있습니다.
  res.send(`Get user with ID ${req.params.userId}`);
});

// router 객체를 외부에서 사용할 수 있도록 내보냅니다.
// app.js에서 이 router를 가져와서 사용할 수 있게 됩니다.
module.exports = router;

2️⃣ app.js – 라우터 등록

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

// 🔽 users 라우터 불러오기
const usersRouter = require("./routes/users");

app.use("/users", usersRouter);

✅ app.use("/users", usersRouter)의 의미

부분의미
app.use(...)미들웨어 또는 라우터를 등록하는 메서드입니다.
"/users"/users로 시작하는 모든 요청에 대해 아래 라우터를 적용하겠다는 의미입니다.
usersRouterroutes/users.js 파일에서 정의한 라우터 객체입니다. 이 객체는 실제 경로와 처리 방식을 포함합니다.

실제 요청 처리 흐름 예시

[브라우저 요청] GET /users
    ↓
[app] /users 경로인지 확인
    ↓
[usersRouter] 내부에서 처리
    ↓
→ router.get("/") 실행됨

🔧 app.js 전체 코드 정리

// express 모듈을 불러옵니다.
const express = require("express");

// express 애플리케이션 객체를 생성합니다.
const app = express();

// 외부에 정의된 users 라우터 모듈을 불러옵니다.
// './routes/users' 경로의 파일에서 router 객체를 가져옵니다.
const usersRouter = require("./routes/users");

// app.use(경로, 라우터객체)
// "/users"로 시작하는 모든 요청을 usersRouter에게 위임합니다.
// 예: "/users", "/users/123" 등은 모두 usersRouter에서 처리됩니다.
app.use("/users", usersRouter);

// 루트 경로("/")에 대한 GET 요청을 처리합니다.
// 브라우저에서 http://localhost:3000/ 로 접속하면 "Hello"라는 응답을 반환합니다.
app.get("/", (req, res) => {
  res.send("Hello");
});

// 서버를 3000번 포트에서 실행합니다.
// 브라우저에서 http://localhost:3000 으로 접속 가능하게 됩니다.
app.listen(3000, () => {
  console.log("Listening on port 3000");
});

테스트 동작 흐름

요청 URL실제 처리 위치
GET /app.js의 app.get("/")에서 처리
GET /usersusers.js의 router.get("/")에서 처리
GET /users/abc123users.js의 router.get("/:userId")에서 처리
POST /usersusers.js의 router.post("/")에서 처리

출처: https://www.inflearn.com/course/expressjs-%EA%B8%B0%EC%B4%88-%EC%8B%AC%ED%99%94/dashboard

0개의 댓글