관리자 글쓰기
 

[Node.js] express - Router로 파일 정리하기(1. url 이름 짓기)

express로 서버를 구축하려면 각 페이지마다 url을 생성해야 한다. 하지만 무턱대고 url을 지으면 관리하기 어려워진다. 만약 책을 파는 사이트를 운영한다고 가정해보자. 이 사이트에는 국내 도서,

squidcoding.tistory.com

 

 

 

[Node.js] express - Router로 url 정리하기(2. 파일 구조 설계)

[Node.js] express - Router로 url 정리하기(1) express로 서버를 구축하려면 각 페이지마다 url을 생성해야 한다. 하지만 무턱대고 url을 지으면 관리하기 어려워진다. 만약 책을 파는 사이트를 운영한다고

squidcoding.tistory.com

정리하면 url과 파일 구조는 아래와 같다.

 

국내도서 -> book/korean

외국도서 -> book/english

회원가입 -> member/join

마이페이지 -> member/mypage

이제 코드를 작성할 차례다.

먼저 실행할 함수가 들어있는 bookController.js, memberController.js 파일부터 작성해보겠다.

페이지에 한 메시지를 띄우는 간단한 함수이다.

// bookController.js

export const korean = (req, res) => {
  res.send("Welcome to korean book!");
};

export const english = (req, res) => {
  res.send("Welcome to english book!");
};

 

// memberController.js

export const join = (req, res) => {
  res.send("Join our page");
};

export const myPage = (req, res) => {
  res.send("This is mypage");
};

 

제일 말단에 있는 파일이기 때문에 import 없이 export만 하고 있다.

 

이제 main.js와 controller를 중간에서 연결해주는 Router의 코드를 작성해보겠다.

 

// bookRouter.js

import express from "express";
import { korean, english } from "../controllers/bookController";

const bookRouter = express.Router();

bookRouter.get("/korean", korean);
bookRouter.get("/english", english);

export default bookRouter;

 

// memberRouter.js

import express from "express";
import { join, myPage } from "../controllers/memberController";

const memberRouter = express.Router();

memberRouter.get("/join", join);
memberRouter.get("/mypage", myPage);

export default memberRouter;

 

Controller에서 export 한 함수를 import 하고

expess의 Router 메서드로 main.js와 Controller의 중간다리 역할을 수행한다.

그리고 main.js에서 Router을 넘겨받을 수 있게 마지막에 Router변수를 export 해준다.

 

export와 exportdefault의 차이점이 궁금하다면 아래의 페이지를 참고하면 된다.

 

[Javascript] 코드를 파일로 나눠서 관리하기 (import, export)

모듈을 사용하다 보면 코드가 많아져서 가독성이 떨어질 수가 있다. 그럴 때 코드를 폴더와 파일로 나누면 가독성과 유지보수가 편리해진다. 대신 import와 export로 파일과 파일을 연결시켜야 한

squidcoding.tistory.com

 

 

마지막으로 main.js의 코드이다.

 

// main.js

import express from "express";
import bookRouter from "./routers/bookRouter";
import memberRouter from "./routers/memberRouter";

const app = express();

app.use("/book", bookRouter);
app.use("/member", memberRouter);

app.listen(4000, () => console.log("server start"));

 

app.use 메서드에 import 한 Router를 넣어주면 완성이다.

 

localhost:4000/book/korean

localhost:4000/book/english

localhost:4000/member/join

localhost:4000/member/mypage

 

실행시켜보면 각각의 페이지에 메시지가 잘 띄워지는 걸 확인할 수 있다.

 

정리해보면

만약 book/korean 페이지를 만든다면

main.js는 /book을, bookRouter는 /korean을 분담하는 방식이다.