Enjoy Programming

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

이제 각 페이지들의 기본 틀을 만들어 주자 pug를 이용한 템플릿들 만드는거라 사진 올리고 그에 대한 간단한 설명을 하겠다. 먼저 로그인과 회원가입 페이지 폼태그를 만들어주고 routes로 url 지정을 해준다. 중요 정보가 넘어가기 때문에 post 방식을 이용한다. 뭐 나머지 태그는 쉽게 이해 되는 부분이고 include partials/socialLogin부분은 로그인과 회원가입 페이지에 흔히 보이는 소셜계정으로 가입하기 로그인하기를 구현하기 위해 중복사용 되는 부분이므로 partials에 socialLogin.pug를 만들어서 인클루드 해줫다. 내용을 보고 pug에 한 포인트만 짚어보자. 다른 부분은 다 아는 부분인데 continue blalba~~ 앞에 vertical bar가 있다. 이는 pug..

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

컨트롤러에 있는 정보를 각 템플릿에 추가하는 방법을 살펴보자. 한개 또는 전체 템플릿에 추가 할 수 있다. 템플릿 전체에 추가하기. header.pug가 routes객체에 접근하도록 해보자. middleware사용 localMiddleware라는 미들웨어를 하나더 만들어보자. app.js에 localsMiddleware라는 미들웨어를 하나 적용시키자. local 변수를 global 변수로 사용하돌고 만들어주는 것이다. local로 변수에 접근할 수 있다. middleware.js 파일을 만들고 라우트를 임포트 해주자. 그리고 그안에 함수를 하나 만들어 export해주겠다 r클라이언트에서 넘어온 파라미터가 아닌 애플리케이션 미들웨어에서 설정한 값을 사용하려면 res.locals.변수명 = 값을 설정하면된다..

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

pug는 node express template engine이다. 요새 핫하다고 한다. express로 HTML을 보여준다. 사용성이 편리하고 설치도 편리하다 HTML을 아주 쉽고 보기 편하게 만들어준 템플릿이라고 한다. (경험한 템플릿 엔진은 jinja template이 있다 = 진자도 꽤 편리했다) pug의 특징은 코드를 간소화시켰고, 컴파일한 후에 html문서를 랜더링 하는 형식이라 생산성이 높아지기 때문에 문법을 익히는데 시간은 조금 걸리지만 장기적으로 좋다. pug사용법은 npm으로 pug를 install 해주고 app.js에서 app.set("view engine", "pug"); 라고 선언해주면 준비는 끝이다 그리고 기존 확장자를 html > pug로 써주면 pug템플릿을 사용할 수 있다. ..