[Express] 동영상 페이지 제작

요론 아이를 만들었다.

init.js

import app from "./app";

const PORT = 4000;

const handleListening = () =>

console.log(`Listening on : http://localhost:${PORT}`)

app.listen(PORT, handleListening)

1. 서버와 연결을 하고

app.js

const app = express();

//MiddleWare

app.use(helmet());

app.set("view engine", "pug");

app.use(cookieParser());

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: true }));

app.use(morgan("dev"));

app.use(localsMiddleware);

//Router

app.use(routes.home, globalRouter);

app.use(routes.users, userRouter);

app.use(routes.videos, videoRouter);

export default app;

2.필요한 미들웨어와 라우터를 깔아둔다.

globalrouter.js

const globalRouter = express.Router();

globalRouter.get(route.join, getJoin);

globalRouter.post(route.join, postJoin);

globalRouter.get(route.login, getLogin);

globalRouter.post(route.login,postLogin)

globalRouter.get(route.home, home);

globalRouter.get(route.search, search);

globalRouter.get(route.logout, logout);

3. 라우터들은 URL을 받으면 각자 컨트롤러에서 렌더링할 대상을 찾는다.

userController.js

export const home = (req, res) => {

res.render("home", { pageTitle: "Home" , videos : videos });

}

export const search = (req, res) => {

//const searchingBy = req.query.term;

const { query : {term : searchingBy } } = req;

res.render("search",

{ pageTitle: "Search",

searchingBy : searchingBy,

videos : videos });

}

export const getUpload = (req, res) =>

res.render("upload", { pageTitle: "Upload" });

export const postUpload = (req, res) => {

const {

body : { file, title, description}

}= req

res.redirect(route.videoDetail("323"))

}

export const videoDetail = (req, res) =>

res.render("videoDetail", { pageTitle: "Video Detail" });

4. 컨트롤러는 HTML 렌더링 응답을 하거나 요청된 자료를 객체데이터로 HTML과 공유한다.

render의 첫번째 파라미터는 

렌더링할 .pug 파일명

두번째는

데이터이다.

요청된 데이터는

req.body.폼에서 name으로 전달받은 값으로 전해진다.

home.pug

extends layouts/main

include mixins/videoBlock

block content

div.videos

each item in videos

+videoBlock({

id:item.id,

title : item.title,

views : item.views,

videoFile : item.videoFile,

})

5. HTML은 다음과 같이 들여쓰기로 작성된다.

each in이나 if와 같은 자바스크립트 문법이 사용 가능하고

+videoBlock({})은 믹신이라고 하며 include로 사용하며

mixins/videoBLock.pug

mixin videoBlock(videoObject ={})

div.videoBlcok

a(href=route.videoDetail(videoObject.id))

video.videoBlock__thumbnail(src=videoObject.videoFile, controls=ture)

h4.videoBlcok__title=videoObject.title

h6.videoBlcok__views=videoObject.views

다음과 같이 파라미터 값으로 객체를 담은 변수를 지정하고 명시한다.

그 이외에

지역변수를 전역변수로 사용하기 위한 

import routes from "./routes"

export const localsMiddleware = (req, res, next) => {

res.locals.siteName = "Movie";

res.locals.route = routes;

res.locals.user = {

isAuthenticated : true,

id:1

}

next();

};

커스텀된 미들웨어나

routes.js

//Global

const HOME = "/";

const JOIN = "/join";

const LOGIN = "/login";

const LOGOUT = "/logout";

const SEARCH = "/search";

const routes = {

home : HOME,

join : JOIN,

login : LOGIN,

logout : LOGOUT,

search : SEARCH,

users : USERS,

videoDetail : (id) => {

if(id){

return `/videos/${id}`

}

else{

return VIDEO_DETAIL;

}

},

editVideo : EDIT_VIDEO,

deleteVideo : DELETE_VIDEO

};

export default routes;

라우터를 사용하기 쉽게 하기 위해 routes파일들이 있다.