Enjoy Programming

자주 사용되는 코드를 반복해서 작업하는 것을 피하기 위해 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을..

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

그리드 템플릿의 영역 지정에 대해서 알아보자. 4개의 박스를 그리드로 지정하고 grid-template-columns를 200px씩 지정해주고 grid-template-rows를 300px씩 지정해줬다. 이걸 간편하게 쓰는 방법이 있는데 바로 repeat()함수를 사용하면된다. repeat( lines, px ) 이런 식으로 지정해주면 된다. 상기 이미지의 경우 rows와 columns를 repeat(4, 200px), repeat(4, 300px)로 지정하면된다. 자 이상태에서 html의 골격에 맞게 header는 위쪽 가운데 content와 nav를 가장 아래 footer를 넣어주자 이때 사용할 속성이 grid-template-areas: 이다!! 사용방법은 먼저 내가 배치하고 싶은 박스들에 이름을 ..

그리드 레이아웃이란! 그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 이 디자인은 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다. 자~ 보자 필자는 이제껏 박스요소를 배치하고 정렬함에 있어 flexbox를 사용해 왔다. 플렉스 박스를 이용해 4개의 박스를 만들어주고 30%의 basis를 갖게 한다. 그리고 격자무늬로 화면에 표시 되기 위해 wrap해주고 4번박스 상단에 margin-top을 준다. 자 이렇게 공간을 가진 화면이 구성되었다. 그럼 여기서 5번 박스 하나를 더 추가한다면?! .... space-between으로 인해 5번이 저 멀리 떨어져 있다. 그리고 마진탑을 ..

이번엔 flex-basis에 대해서 알아보자. 이 속성도 자식요소에 적용시키는 속성이다. flex-basis flexbox의 initial size를 지정해준다. 얼핏 보면 width값을 지정하는 것과 비슷하다. 예를 들어 보자. width: 300px;을 지정한것과 flex-basis:300을 지정한 박스는 보기와 같이 같다. 자 여기서 기준은 flex-direction이 row일때를 기준인 것이다 다시말해 main-axis상에서 flex-basis가 300px이다. 만약 축을 뒤집는 flex-direction: column이 된다면? 바뀌었다. 바로 main-axis를 따라 basis값으로 height가 300px이 되었다. 이것이 그저 width로 설정한 것과 다른 점이다.