[백엔드 JS 이론] Router , Middleware, Controllers

우리는 기본적으로 아래 문서의 Dependencies 를 전부 Install 한 것을 전제로 설명을 하고 있습니다. (주의요망)

• Link [ [백엔드 JS 이론] Index :: Unchaptered의 초보코딩 (tistory.com) ]

이 문서를 작성하기 위해서 다음의 문서를 참고하였습니다.

• 미들웨어 - 위키백과, 우리 모두의 백과사전 (wikipedia.org)

이 문서에서는 다음의 내용을 다루고 있습니다.

• 기본 index.js
• Web SIte 페이지 설계
• Router 를 이용한 페이지 설계 및 관리
• Middleware 를 이용한 Router 과 Controller 와의 연결
• Controller 를 이용한 데이터 Response
• 결론 : 사용법

기본 index.js 파일 생성

import express from "express";
import morgan from "morgan";

const PORT=4000;
const app=express();
const logger=morgan("dev");

Web SIte 페이지 설계

 

역량, 금전, 시장분석적 측면을 제외하고 어떠한 웹 서비스를 만들 때 어떤 서버스를 만들지 정하는 것은 최우선 과제입니다. 그렇다면 그 이후의 과제는 자연히 어떤 페이지 구성을 할 지가 되어야 함이 절차상 옳을 것입니다.

webtoon.naver.com/something/something_somthing/:id/..../..../

당신은 위와 같은 링크의 양식을 보았을 것입니다. 저 슬레쉬("/")의 사이에 위치한 something 들이 페이지의 structure 를 나타내는 키워드일 것입니다. something 아래에 something 열개가 있고 그 아래에 something 열 개가 있는 식으로 수많은 페이지들을 엮어 낼 수 있을 것입니다.

그렇다면 이 페이지들을 어떻게 효율적으로 엮고 관리할 수 있을 까요? 그 정답은 Router 입니다.

Router 를 이용한 페이지 설계 및 관리

const routerArr=[
	"/",
    "/users",
    "/posts",
]

app.use(routerArr[0],globalRouter);
app.use(routerArr[1],userRouter);
app.use(routerArr[2],postsRouter);

/users/.... 는 userRouter 을 통해서 관리하게 될 것입니다. 그리고 /posts/.... 는 postsRouter 를 통해서 관리하게 될 것입니다. 마지막으로 /.... 는 globalRouter을 통해서 관리 될 것입니다.

대부분 인터넷에는 Array 를 만들지 않고 바로 "/" , "/users" , "/posts" 등으로 쓰는 것들이 많지만 저는 과감하게 Array 를 만드는 것이 좋지 않을까 추측하고 있습니다. 비록 그것이 코드를 길게 만들더라고 하더라도 말입니다.

그렇게 생각하는 이유는 [좋은 코드란 읽기 쉬운 데에서 시작하는 것이다]라는 어떤 글귀 때문입니다.

웹 사이트가 한 개인 페이지, 열 개인 페이지, 백 개인 페이지, 페이지의 숫자가 커질 수록 페이지의 Router들은 중구난방이 될 것이며 그것들을 깔끔하게 관리하기란 불가능에 가까워질 것이라고 생각합니다. 더군다나 많은 String 은 사소한 에러들을 일으킬 것이라고 생각합니다. 그렇기 때문에 에러의 위험성도 낮은 Array 를 사용하는 것이 옳지 않을까라고 생각합니다. (개인적 견해)

하지만 이대로 실행을하면 undefined 에러가 나올 것이 분명하니 globalRouter,userRouter, postsRouter 을 작성하겠습니다.

const globalRouter=express.Router();
const userRouter=express.Router();
const postsRouter=express.Router();

 

Middleware 를 이용한 Router 과 Controller 와의 연결

Middleware 도 Router 도 결국 express 의 것을 사용하는데 무슨 의미가 있나 싶지만, 그래도 개념적인 차이를 두기 위해서 구분하였습니다. 혹시 Middleware 에 대한 개념이 궁금하신 분은 아래 링크의 관련 문서를 참조하시길 바랍니다.

[백엔드 JS 이론] Middleware :: Unchaptered의 초보코딩 (tistory.com)

userRouter와 postsRouter의 하위페지이를 routerUserArr 과 routerPostsArr 안에 미리 정의해두겠습니다.

const routerUserArr=[
	"/feed",
	"/login",
    "/logout",
    "/edit",
    "/delete"
]

cosnt routerPostsArr=[
	"/upload",
    "/:videoID",
    "/:videoID/edit",
    "/:videoID/delete",
}

그리고 정의해둔 이름을 exrpess의 get 메서드를 이용해서 호출하겠습니다.

something.get("/something",middleawre,controller);
// /something으로 끝날 시에 middleware 실행하고 다음 값으로 controller 실행

something2.get("/something2",mideelware2);
// /something2으로 끝날 시에 middleware2 실행

userRouter.get(`${routerUserArr[0]}`,userFedd);
userRouter.get(`${routerUserArr[1]}`,userLogin);
userRouter.get(`${routerUserArr[2]}`,userLogout);
userRouter.get(`${routerUserArr[3]}`,userEdit);
userRouter.get(`${routerUserArr[4]}`,userDelete);

postsRouter.get(`${postsUserArr[0]}`,postsUpload);
postsRouter.get(`${postsUserArr[1]}`,postsView);
postsRouter.get(`${postsUserArr[2]}`,postsEdit);
postsRouter.get(`${postsUserArr[3]}`,postsDelete);

우리는 express 를 이용해서 각 Router 의 하위 페이지들을 Controller와 연결하였습니다. 그러나 이 Controller 를 생성하지 않았기 때문에 분명히 undefined 에러가 발생할 것입니다. 그렇기 떄문에, 각 controller 를 생성해보겠습니다.

Controller 를 이용한 데이터 Response

userFeed=(req,res)=>res.send(`User Feed`);
userLogin=(req,res)=>res.send(`Users Login`);
userLogout=(req,res)=>res.send(`Users Logout`);
userEdit=(req,res)=>res.send(`User Eidt`);
userDelete=(req,res)=>res.send(`User Delete`);

postsUpload=(req,res)>res.send(`Posts Uplaod`);
postsView=(req,res)>res.send(`Posts View`);
postsEdit=(req,res)>res.send(`Posts Edit`);
postsDelete==(req,res)>res.send(`Posts Delete`);

각각 고정값인 메세지를 브라우저에 노출되는 페이지 상에 노출하도록 만들었습니다.

결론 : 사용법

어떤 프로젝트를 만들지 정하고 기본 셋팅이 끝나면 우리는 페이지 구성을 해야합니다.

클래스에서 알려주지 않는 부분에 대해서 고찰해보자면, 페이지의 구성은 필수적이냐 확장성이냐하는 개념으로 구분을 하겠습니다. 그렇게 기능들을 구분하고 나면 그에 따라서 우선적으로 만들 페이지들이 정해지게 됩니다.

그리고 일단, 필수성 및 확장성 페이지들의 페이지 코드(/something 등)를 Array 안에 전부 집어넣어 놓고 page.js 로 분리하여 각각의 something.js 파일로 임포트해줍니다. 그 후에 각각의 라우터/미들웨어/컨트롤러 단계로 점차 세분화합니다.

그리고 최종적으로 Controller 를 통해서 웹 페이지에 어떤 것을 반환할 것인지 구상을 마치는 것으로 페이지 구성을 끝내야 할 것 같습니다.