Enjoy Programming

이번엔 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.변수명 = 값을 설정하면된다..

오늘 만들어할 레이아웃이다.~~만들어보자~ 조건읜 외부 스타일 시트 사용과 pseudo selector를 사용하고 position속성을 사용해야 한다. 아 꽤나 빡셌다.. 이게 맞는지는 모르겠지만 ..뷰포트.. 아 머리야... 우선 html부터 보자 뭐 제목~ 두번째 토마토 틸색상 박스 세번째 발리우드 쓰리틀 색상 박스 이렇게 세개로 할 수 있겠지만 큰박스 하나에 다른 박스들은 포지션 absolute로 각 꼭지점에 박아 보기로 생가각했다. 먼저 h1태그로 제목 설정해주고 메인박스 하나 만들고 그안에 세컨드박스 4개를 만든다. 그리고 그 안에 다시 박스를 하나 더 만들고 그 박스안에 h3 와 h5의 부제목들을 달아주자. 이제 css 로 넘어와서 먼저 서체를 times로 잡아주고~ h1과 mainbox가 중..

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

오늘 챌린지 종목은 box다루기 이다.,~ 이런 box layout 만들기. requirement - use external css 외부 css 파일 임포트 하기가 전부다 자 만들어보자 그냥 보면 배경화면색주고 div로 박스 하나 만들어주고 박스안에 박스 세개를 만들어주자. 그리고 background-color에 #ff6447을 바디에 준다. ( colorzilla로 색은 따오면 된다. ) 똑같이 바디안의 첫번째 박스에 #f5deb3색상을 주자 그리고 그안 박스에 #008080색을 준다. 아직 박스 크기들을 설정은 안해줬으니 될리가 없다. 음 페이지롤러로 사이즈 재보니 대충 첫번째 박스가 240px씩이고 그 안에 세개는 60px씩이다 주자 이런 박스가 만들어졌다~~~ 이제 해야할 것은 화면 중앙에 배치해..

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템플릿을 사용할 수 있다. ..