라우터 연결 및 라우터, 컨트롤러 분리

내가 만들어야 하는 웹페이지 기능은 상품검색, 상세정보, 체크리스트, 로그인, 회원가입 이다.

이에 관한 코드들을 모두 index.js 파일에 넣으면 코드가 너무 길어져 가독성이 떨어지게 된다. 

따라서 모듈화가 필요하다. 이때 라우터를 만들면 페이지 마다 동작할 코드를 모듈화하여 관리할 수 있다. 

또한 웹화면 ejs파일의 경우에는 index.js에서 경로를 지정하여 각 화면코드를 불러올 수 있게 하였다.

 

1. index.js

/* 설치한 express 모듈 불러오기 */
const express = require("express");
// parsing가능
const bodyParser = require("body-parser");

// 환경변수 관리, .env에 DB정보 저장
const dotenv = require("dotenv");
dotenv.config();

/* express 객체 생성 */
const app = express();
const port = 3000;

// router: 각각의 주소가 들어왔을 때 어떤 것을 응답해줄지를 설정
// router설정
const goodsRouter = require("./src/routes/home/goods"); //goods.js 파일에 있는 라우터들을 가져옴
const userRouter = require("./src/routes/home/user"); //user.js 파일에 있는 라우터들을 가져옴
const eventRouter = require("./src/routes/home/events"); // ./src/routes/home/events.js = ./src/routes/home/events와 같다 -> .js생략 가능
const categoryRouter = require("./src/routes/home/category");

//템플릿 엔진 ejs 사용하기
// ejs: embeded java scripts 자바스크립트가 내장된 html
// ejs파일들의 경로를 /src/views로 지정
app.set("views", __dirname + "/src/views");
// 엔진을 ejs로 지정
app.set("view engine", "ejs");

//middleware: 요청이 라우터에 들어오기 전에 req를 체크
// js 파일로 연결할 수 있게 해주는 미들웨어
app.use("/img", express.static(`${__dirname}/src/public/img`));
app.use(express.static(`${__dirname}/src/public`));

//bodyParser 미들웨어 등록
app.use(bodyParser.json());

//URL을 통해 전달되는 데이터에 한글, 공백 등과 같은 문자가 포함될 경우 제대로 인식되지 않는 문제 해결
app.use(bodyParser.urlencoded({ extended: true }));

app.use("/goods", goodsRouter);
app.use("/user", userRouter);
app.use("/events", eventRouter); // events경로로 들어오면 이벤트라우터로 연결
app.use("/category", categoryRouter);

// main.ejs 렌더링
app.get("/", (req, res) => {
  res.render("main");
});

app.listen(port, () => {
  console.log(`listening at http://localhost:${port}`);
});

라우터와 ejs파일경로

2. routes/home의 user.js

var express = require('express');
var router = express.Router();

//ctrl 받아오기
const ctrl = require("./home.ctrl");

router.get('/login', ctrl.output.login);
router.get('/register', ctrl.output.register);

router.post('/login', ctrl.process.login);
router.post('/register', ctrl.process.register);


module.exports = router;

위의 라우터를 index.js에서 연결해놓으면 http://localhost:3000/user/login 의 주소로 갔을 때 ctrl.output.login 함수를 실행하게 된다. 여기서 /home.ctrl 은 실제 서버에서 동작하거나 처리하는 코드를 모아놓은 파일이다. 주로 api 동작 코드를 여기에 넣는다.

 

3. routes/home의 home.ctrl.js

"use strict";

const User = require("../../models/User");
const Detail = require("../../models/Detail");

const output = {
  login: (req, res) => {
    res.render("login"); //login.ejs를 그림
  },

  register: (req, res) => {
    res.render("register"); //register.ejs를 그림
  },

  detail: (req, res) => {
    res.render("detail"); //detail.ejs를 그림
  },

  1: (req, res) => {
    res.render("event1"); //login.ejs를 그림
  },

  fruit: (req, res) => {
    res.render("category"); //category.ejs를 그림
  },
};

const process = {
  login: async (req, res) => {
    const user = new User(req.body); //client가 전달한 request 데이터를 넣음
    const response = await user.login(); //User에서 res 받음
    return res.json(response); //받은 res를 client한테 json형태로 전달
  },

  register: async (req, res) => {
    const user = new User(req.body);
    const response = await user.register();
    //console.log(response);
    return res.json(response);
  },

  detail: async (req, res) => {
    const detail = new Detail(req.body);
    const response = await detail.search();
    return res.json(response);
  }
};

//ctrl 내보내기
module.exports = {
  output,
  process,
};

이 파일에서 보면 ctrl.output.login 안에 들어있는 코드는 res.render("login") 으로 Login.ejs를 웹 화면에 띄우는 역할을 한다. 따라서 http://localhost:3000/user/login 의 경로로 갔을 때 미리 만들어놓은 Login.ejs 파일을 화면에 띄우는 것이다. 

http://localhost:3000/user/login

 

 

이와 동일한 방법으로 로그인, 회원가입, 상세정보 페이지를 구현하였다.