서론

익스프레스는 Node.js를 위한 웹 프레임워크 중 하나로 오픈 소스로 공유되고 있다. Node.js 의 사실상의 표준 서버 프레임워크로 불리고 있다. 출처 : 위키백과

설치

1. npm : 직접 셋팅
   npm install express

2. npx
   npx create-nodejs-express-app project-name

관련모듈

1. express-session
2. express-flash
3. morgan
4. node-fetch
5. regenerator-runtime
6. webpack
   6-1. webpack
   6-2. webpack-cli
7. styles
   7-1. css-loader
   7-2. mini-css-extract-plugin
   7-3. nodemon
   7-4. sass
   7-5. sass-loader
   7-6. style-loader
8. bables
   7-1. @babel/cli
   7-2. @babel/core
   7-3. @babel/node
   7-4. @babel/plugin-transform-runtime
   7-5. @babel/preset-env
9. front
   8-1. pug
10. dbs
    9-1. mongoDB
    9-2. connect-mongo
11. login
    10-1. bcrypt

핵심이론

Rest Api

익스프레스는 RestAPI 와 매우 유사한 설계 구조를 가지고 있다.
express 로 선언된 하나의 어플리케이션이 수많은 라우터들로 연결되고 그 라우터들이 각각의 기능을 하는 컨트롤러로 연결되는 구조이다.

자세한 내용은 관련 문서를 참고하자
REST API 참고

View Engine

익스프레스는 View Engine 셋팅이 가능하다.
PUG 와 같은 생산성 좋은 HTML 템플릿을 작성하고 랜더링 할 수 있게 해준다.

const app=express(); // 앞으로 app 이 있다고 전제하고 작성함
app.set("view engine", "pug");
app.set("views", process.cwd() +"src/views");

LocalStorage && Session

세션 쿠키의 차이에 대해서는 관련문서를 참고하도록 하자.

익스프레스는 세션을 사용할 수 있다.

app.use(
  session({
    secret: // 세션 생성시 필요함
    resave: // ?
    saveUnitialized: // ?
    cookie: {
      maxAge: // 소멸시기 지정
    }
  });
);

Statics Pathway

익스프레스에서는 정적 경로를 설정할 수 있다.
예를 들면 업로드한 파일들이.. 이미지는 /static/image 비디오는 /static/video 의 경로를 가지게 된다는 등...

일반적으로 path-name 과 folder-name 은 동일하게 하는 것이 좋다.

app.use("/path-name/", express.static("folder-name"));

Middleware

익스프레스의 의존성은 req,res,next 뿐이고 req,res 는 사실상 웹 브라우저라면 가질 수 밖에 없다. 따라서 매우 의존성이 낮고 안정적이라는 특성을 가지게 된다.

Middleware 또한 마찬가지이다.
req,res 를 받고 특정 기능을 하고 다음 부분(next)로 넘겨주게 되는 구조이다.

아래는 미 로그인 유저가 인증이 필요한 URL 에 접근할 때 차단하고 login 페이지로 안내하는 미들웨어이다.

export const preventURLMiddleware=(req,res,next)=>{
  if(req.session.loggedIn){
  }else{
   return res.status(404).redirect("/login");
  }
}

마찬가지로 업로드 라이브러리 multer 를 이용한 Upload Controll Middleware 또한 위와 같이 작성한다.

export const uploadVideoMiddleware=multer({
  dest: "uploads/videos/",
  limits: { /* settings */ },
});

Router

익스프레스는 수많은 연결점들을 관리할 수단으로 라우터를 지원한다.

import express from "express";

const videoRouter=express.Router();

videoRouter
  .route(path)
  .all(middleware)
  .get(getContoller)
  .post(postController);

위와 같은 양식으로 작성하거나..

videoRouter
  .get("path",getContoller)

위와 같이 모아서 작성하는 방법도 있다.
나는 전부 찢어서 작성하는 최초의 방법을 좋아한다.

Controller

export const getController=(req,res)=>{
  const {
    params:{}, // url 안의 변수
    body:{}, // form 안의 내용
    session:{}, // session 안의 내용
    query:{}, // url 안의 변수 (serach?=검색내용... 등)
  }=req;
  
  res.redirect("/"); // 경로로 안내 (재연결됨)
  res.render("/template",{ args });
};

파일구조

/src/initial.js

/src/index.js
/src/database.js
/src/middleware.js

/src/router/videoRouter.js
/src/router/userRouter.js

/src/controller/videoController.js
/src/controller/userController.js

/src/model/videoModel.js
/src/model/userModel.js

/src/views/base.pug
/src/views/home.pug

/src/views/video/see-video.pug
/src/views/video/search-video.pug
/src/views/video/edit-video.pug

/src/views/user/ses-profile.pug
/src/views/user/search-user.pug
/src/views/user/edit-profile.pug

/src/views/mixins/mixin-video.pug
/src/views/mixins/mixin-user.pug

/src/views/partials/navigation.pug
/src/views/partials/footer.pug

공식문서