Enjoy Programming

이번에도 이어서 컨트롤러를 더 만져보자 우선 비디오를 클릭하면 비디오 상세페이지로 넘어가도록 해주자 mixins로 이동해서 videoBlock mixin에 링크를 걸어준다. 라우트를 걸어주고 video.id를 인자로 넣어준다. 이 id는 각 비디오에 부여된 id를 인자로 받게 된다. 이제 videoBlock을 사용하는 곳에서 입력할때 id:item.id를 추가로 보내주는 작업을하자. home 템플릿에서 videoBlock에 id 객체를 추가한다. 추가후 비디오를 클릭하면 url상에 비디오 id가 뜨게 된다. 이제 할일은 로그아웃을 클릭하면 로그아웃 페이지가 아닌 로그아웃후home화면을 접속하게 하겠다. 로그아웃 처리는 차후에 하고 일단 랜더링시 홈화면으로 redirect해줬다. 이제 logout 템플릿은..

이번엔 login과 user profile페이지를 다뤄보자. 역시 userController에 가서 get과 post방식의 두가지 컨트롤러를 만들어준다. 하나는 get 방식으로 로그인 페이지를 띄워줄 getLogin컨트롤러와 post방식으로 로그인이 이루어지면 홈화면으로 redirect해주는 컨트롤러 이렇게 만들어주고 로그인이 이루어지면 화면에 뿌려질 헤더 템플릿을 수정해주자. ul태그 하나 만들어주고 사진과 같이 작성했다. isAuthenticated는 요청이 인증 되었는지 확인하는 속성이다. user변수는 아직 데이터가 없기에 설정이 되진않았다. 이제 middleware에 가서 user정보를 객채로 만들어 주자 전역으로 설정할 user정보를 true로 설정하고 id: 1이라는 객체를 넣어줬다. 우선 ..

자주 사용되는 코드를 반복해서 작업하는 것을 피하기 위해 views폴더에 mixins 폴더를 생성하고 템플릿을 만들어준다. mixin() 함수 pug의 함수로서 반복되는 html 또는 어떤 코드덩어리를 함수 형태로 만들 수 있도로 기능을 제공한다 사용법은 mixin 함수명()이렇게 쓰고 아래 코드를 쓰고서 사용할때는 + 함수명을 써주면 된다. pugjs.org/language/mixins.html Mixins – Pug Mixins Mixins allow you to create reusable blocks of Pug. //- Declaration mixin list ul li foo li bar li baz //- Use +list +list foo bar baz foo bar baz Mixins a..

아직 데이터베이스를 이용하지 않았다. 이번엔 전체 application의 흐름을 가짜로 설정하는데 fake info를 이용해 템플릿을 완성시켜보자. 홈화면에 비디오를 보여줄텐데 가짜 데이터를 뿌리기위해 db.js를 만들어주고 안에 videos라는 배열을 만든다. (가짜 데이터를 통해 테스트하는 방식을 연습하자 데이터베이스에 무엇을 추가할지 설정하기 전에 빠르게 수정이 가능하다) 비디오 아이디, 타이틀, 설명, 조회수, 파일주소, 작성자(id, name,email)등을 배열로 적어주고 이제 홈화면에서 이것을 뿌려야 되니 videoControllers에 home컨트롤러에서 video목록을 받아 render함수에 전달한다. 이렇게~ 그리고 home.pug에서 임의로 작성한 데이터들을 뿌려주는데 each in을..

이번엔 header.pug 템플릿에 검색창을 넣어보자 header.pyg에 칼럼을 하나 더만들어주고 form!태그를 써주자 ~~~ url은 routes.search페이지 이고 method는 get방식이다. 그리고 생성된 검색창(input)에 food를 검색하면 url이 이렇게 바뀐다. 이제 search페이지에 표시할 정보들이 주어졌다. search페이지를 수정하자. 검색한 검색어를 표시해주도록 해보자 검색을 하게되면 아래 searching by 검색어 가 뜨게 해주겠다. #{searchingBy}라는 변수를 설정해주고 (위사진은 오타다) videoController로 가서 설정해주자 search페이지로 랜더링하는 곳에 새로운 리턴값을 넣어주자 이제 암시적 리턴을 사용할 수 없으니 {}블럭을 이용하자. 먼..

자 pug에 대해서 알아봤고 각 템플릿들은 미리 만들어줬다. 이제 페이지의 일부분인 partitial부분을 만들어주자 ~ 음 보니까 지금은 헤더와~ 푸터정도인듯 하다 organization한 purpose라고 한다. partitial 폴더를 생성해주고 footer.pug와 header pug를 만들어 주자. 푸터에는 유튭 아이콘을 넣어주고~ copyright도 작성해주자 그리고 메인pug에 인클루드 해주자~ 역시 진자템플릿처럼 include기능이 있다. 원래 footer자리에 footer태그를 지우고 include ../partials/footer로 설정하면 include 된다 import 느낌? pug에서 자바스크립트 코드를 추가하는 방법은 #{}를 이용하자 javacript에서 날짜를 받는 코드를 작..