Nodejs의 express프레임워크

app.js

import "core-js";
import express from "express";
import morgan from "morgan";
import helmet from "helmet";
import cookieParser from "cookie-parser";
import bodyParser from "body-parser";
const app = express();

app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(helmet());
app.use(morgan("dev"));

export default app;

- nodejs의 경우, express라는 프레임워크를 사용한다.

- nodejs는 필요한 기능을 import하며 const로 변수를 만들어 기능을 사용할 수 있다.

속성	기능설명
import express from "express";	import "가져올 기능의 이름" from "실제 모듈 명" 보기와 같이 입력할 경우 모듈의 기능을 "가져올 기능의 이름" 으로 정의하여 사용할 수 있습니다.
const app = express();	app이라는 변수 안에 express를 정의하여, app 변수를통해 express의 기능을 사용할 수 있게 한다.
app.use	지정된 경로에 지정된 미들웨어 함수를 마운트합니다 path. 요청 된 경로의 기준이 일치 할 때 미들웨어 함수가 실행됩니다. 또한, 콜백함수를 지정할 수 있습니다.
export default app;	모듈은 export default라는 특별한 문법을 지원합니다. export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나태낼 수 있습니다.

init.js

import app from "./app.js";

const PORT = 4000;

const handleListening = () => console.log(`Listening on: http://localhost:${PORT}`);

app.listen(PORT, handleListening);

속성	기능설명
import app from "./app.js";	import "가져올 기능의 이름" from "실제 모듈 명" 보기와 같이 입력할 경우 app.js의 기능을 "app" 으로 정의하여 사용할 수 있습니다.
const handleListening = () => console.log(`Listening on: http://localhost:${PORT}`);	handleListening라는 함수를 만든다. 이 함수가 호출당하면, 콘솔창에 `Listening on: http://localhost:${PORT}`를 출력하며, 여기서 ${PORT}는 PORT = 4000;와 연결된다.
app.listen(PORT, handleListening);	지정된 호스트 및 포트에서 연결을 바인드하고 수신합니다. 이 메소드는 Node의 http.Server.listen () 과 동일합니다 . 포트가 생략되거나 0 인 경우 운영 체제는 자동화 된 작업 (테스트 등)과 같은 경우에 유용한 사용되지 않는 임의의 포트를 할당합니다.

app.js

import userRouter from "./routes/userRouter.js";
import videoRouter from "./routes/videoRouter.js";
import globalRouter from "./routes/globalRouter.js";
import routes from "./router.js";

app.set("view engine", "pug");
app.use(routes.home, globalRouter);
app.use(routes.users, userRouter);
app.use(routes.videos, videoRouter);

 

속성	기능설명
app.use(routes.home, globalRouter);	app.use(경로,콜백 기능); 보기와 같이 입력할 경우 router.js에서 export한 const routes변수 안에서 home이라는 값을 찾은 뒤, 그것을 반환한다. 콜백 기능으로 globalRouter이 정의되어 있으므로 home이라는 값을 반환한 뒤 globalRouter의 export값을 찾는다.

router.js

// Global
const HOME = "/";
const JOIN = "/join";
const LOGIN= "/login";
const LOGOUT = "/logout";
const SEARCH = "/search";


// Users
const USERS = "/users";
const USER_DETAIL = "/:id";
const EDIT_PROFILE = "/edit-profile";
const CHANGE_PASSWORD = "/change-password";

//video
const VIDEOS = "/videos";
const UPLOAD = "/upload";
const VIDEO_DETAIL = "/:id";
const EDIT_VIDEO = "/:id/edit";
const DELETE_VIDEO = "/:id/delete";

const routes = {
    home: HOME,
    join: JOIN,
    login: LOGIN,
    logout: LOGOUT,
    search: SEARCH,
    users: USERS,
    userDetail: USER_DETAIL,
    editProfile: EDIT_PROFILE,
    changePassword: CHANGE_PASSWORD,
    videos: VIDEOS,
    upload: UPLOAD,
    videoDetail: VIDEO_DETAIL,
    editVideo: EDIT_VIDEO,
    deleteVideo: DELETE_VIDEO
};

export default routes;

 

globalRouter.js

import express from "express";
import { join, login, logout } from "../controllers/userController.js";
import { home, search } from "../controllers/videoController.js";
import routes from "../router.js";

const globalRouter = express.Router();

globalRouter.get(routes.home, home);
globalRouter.get(routes.search, search);
globalRouter.get(routes.join, join);
globalRouter.get(routes.login, login);
globalRouter.get(routes.logout, logout);

export default globalRouter;

 

속성	기능설명
import express from "express";	express의 기능을 사용하기 위해 import로 express를 정의
const globalRouter = express.Router();	새 라우터 개체를 만든다. globalRouter가 라우터의 역할을 할 수 있게 된다.
globalRouter.get(routes.home, home);	express의 router가 된 globalRouter의 기능 "get"을 사용하면, "routes.home"에서는 경로를 취득할 수 있으며, "home"을 통해 Controller에서 export하는 값을 가져올 수 있다.

videoController.js

export const home = (req, res) => res.render("home");
export const search = (req, res) => res.render("search");
export const upload = (res, req) => res.render("upload");
export const videoDetail = (res, req) => res.render("videoDetail");
export const editVideo = (res, req) => res.render("editVideo");
export const deleteVideo = (res, req) => res.render("deleteVideo");

속성	기능설명
export const home = (req, res) => res.render("home");	home을 export한다.  req를 받으면 view안에 있는 "home"이라는 html형식의 파일을 res로서 내보낸다.

home.pug

extends layouts/main

block content
    p Home

속성	기능설명
extends layouts/main	layouts/main이라는 파일을 extends함으로서 가져와 쓸 수 있게 된다. 이후 아래 부분에서 main안에 있는 코드를 사용할 수 있으며 "block content"를 사용해 넣고싶은 행에 코드를 끼워넣을 수 있다.

 

지금까지의 연결을 이으면 아래와 같이 된다.

init.js

app.js

router.js

globalRouter.js

videoController.js

home.pug

main.pug

0. 사용자가 주소창에 주소를 입력한다.

1. package.json의 정보를 바탕으로 init.js이 실행되며 app.js를 호출한다.

2. app.js에서 차례대로 기능을 실행시킨다.

   app.set을 이용해 view를 하기위한 engine으로 pug를 사용한다고 정의한다.

   app.use를 이용해 각 기능들을 실행시킨다.

3. app.use(routes.home, globalRouter);를 호출하면 router.js가 불려지며 해당 파일 안에서 export하고 있는 값들이 반환된다. 때문에, "/"가 반환된다.

4. 이후 "globalRouter"에 의해 "./routes/globalRouter.js"파일이 호출되며 안에서 export된 globalRouter의 .get()기능을 실행시킨다.

5. [4]를 실행시키면 router.js가 실행되 해당 파일의 export값을 불러온다. 이후 get의 안에 있는 "home"을 호출하는데, 이 값은 videoController.js와 연결되어 있기 때문에 해당 js가 불려진다.

6. videoController.js의 export된 값 중 home을 찾아 그것을 get에 반환시켜준다.

7. [6]에서 찾은 home의 response값을 보면 res의 render기능을 사용하고 있다. 이 기능은 view를 렌더링하고 렌더링 된 HTML 문자열을 클라이언트에 보낸다. view인수는 렌더링 할 뷰 파일의 파일 경로 문자열이다.

8. [2]에서 view의 엔진으로 pug를 사용한다고 정의하였으니 "views"폴더 안의 .pug파일들 중에 home이라는 값을 찾는다.

9. home.pug를 찾으면, 안에서 main.pug를 extends기능을 이용해 가져다 쓸 수 있게 하고 있다. 

 

0~9의 순서를 통해 결과적으로 화면에는 아래와 같이 나타나게 된다.

 

참고 : expressjs.com/ko/4x/api.html#res.render

Express 4.x - API 참조