Express(14)
-
[유튜브 클론코딩] 6.8 Github Login Part.3
6.8 Github Login Part.3 githubLoginCallback 함수 수정하기 export const githubLoginCallback = (accessToken, refreshToken, profile, cb) => { console.log(accessToken, refreshToken, profile, cb); }; 지난시간에 깃허브 로그인 누르고 콜백함수로 돌아올 때 console에 주어진 정보를 확인만 했었다. 이제 그것을 수정하려고 한다. 사실 accessToken, refreshToken이런건 필요 없고 profile에 있는 github ID, 이메일, 이름, 그리고 아바타(프로필 사진) 이게 중요하다! 그리고 여기서 cb 함수는 passport에서 제공된 callback 함수..
2021.03.11 -
[유튜브 클론코딩] 6.4 Sessions on Express
6.4 Sessions on Express 세션 설치하기 npm install express-session app.js에 import 해주고 session 작성하기 import express from "express"; import morgan from "morgan"; import helmet from "helmet"; import cookieParser from "cookie-parser"; import bodyParser from "body-parser"; import passport from "passport"; import session from "express-session"; import userRouter from "./routers/userRouter"; import videoRouter..
2021.03.11 -
[유튜브 클론코딩] 2.25 More Controllers
2.25 More Controllers 비디오를 클릭하면 비디오 상세 페이지로 이동하도록 하기 누군가가 비디오를 클릭하면 비디오 상세 페이지로 보이도록 하고 싶다. mixin을 수정한다. mixin videoBlock(video = {}) .videoBlock a(href=routes.videoDetail(video.id)) video.videoBlock__thumbnail(src=video.videoFile, controls=true, autoplay=true) h4.videoBlock__title=video.title h6.videoBlock__views=video.views ↑ videoBlock.pug 이제 videoBlock을 사용하는 곳에서 인자를 입력할 때 id: video.id를 추가로 보..
2021.02.24 -
[유튜브 클론코딩] 2.24 Log In and User Profile Controller
2.24 Log In and User Profile Controller Login 화면 만들기 Login도 비슷한 작업을 해야하므로 이전의 login은 getLogin으로 이름을 바꾸고 postLogin 함수를 만든다. login에는 할 일이 많지는 않다. 로그인을 하면 그냥 로그인 버튼만 클릭하는 것이다. 만약 로그인에 성공했다면 routes.home으로 redirect하면 돼. join의 흐름과 같지. export const getLogin = (req,res) => res.render("login", {pageTitle: "Login"}); export const postLogin = (req,res) => { res.redirect(routes.home); } ↑ userController.js ..
2021.02.24 -
[유튜브 클론코딩] 2.23 Join Controller
2.23 Join Controller search화면 작업하기(home화면과 유사함) 이제 다음으로 search 화면을 작업할 것이다. search도 home 화면과 거의 비슷하다. 일단은 비디오 검색 기능을 구현하지는 않겠다.(데이터베이스를 아직 안했기 때문에) videoController.js에서 search에 videos(데이터베이스)를 전달해준다. search.pug도 똑같이 작업해준다.(mixin을 include해서) export const search = (req, res) => { const {query: { term: searchingBy }} = req; res.render("search", {pageTitle: "Search", searchingBy, videos}); }; ↑ vide..
2021.02.24 -
[유튜브 클론코딩] 2.16 Local Variables in Pug (local 변수를 global 변수로 사용하도록 해주는 미들웨어 만들기
2.16 Local Variables in Pug 미들웨어는 레이어 같은 구조 템플릿에 정보를 추가할 시간이다. 컨트롤러에 있는 정보를 템플릿에 추가하는 법에 대한 것이다. 한 템플릿에만 추가하거나 전체 템플릿에 추가할 수 있다. 템플릿 전체에 추가하는 방법부터 설명하겠다. 헤더가 라우트 객체에 접근하도록 하고 싶다. 미들웨어를 사용해야 한다. 알겠지만, 미들웨어는 레이어 같은 것이다. 위에서 밑으로 한단계씩 내려간다. (top-bottom 구조) 처음에 view engine을 pug로 설정했다. cookie를 파싱하고, body에 담긴 정보를 파싱한다. 그리고 helmet, morgan이 있다. 그 후에 컨트롤러, 라우트들이 있다. helmet을 가장 위에 두도록 하자. localsMiddleware ..
2021.02.17