# pug

59개의 포스트
post-thumbnail

WebSocket

HTTP와 WebSocket의 차이점을 알고 실시간 채팅을 구현해보는 글

2022년 8월 11일
·
0개의 댓글
·

이력서 사이트 #6 | 뷰 엔진 (View Engine, Pug)

    이유는 HTML 을 간결하게 작성할 수 있도록 도와주고 이전에 사용해봤는데 사용경험이 좋아 다시 복습 겸 사용 하려고 합니다.퍼그를 설치한다.퍼그를 뷰 엔진으로 설정한다.실제로 pug 파일을 생성한다.자바스크립트 코드를 작성할 수 있습니다.리액트 등에서 사용되는

2022년 7월 21일
·
0개의 댓글
·

Pug

About Pug 🐶

2022년 7월 20일
·
0개의 댓글
·

TIL #11 Node.js환경에서 사용하는 모듈[22.07.11]

❓ nodemon? > nodemon은 Node.js 프로젝트에서 변경 사항이 발생했을 때 자동으로 서버를 재시작해주는 프로그램이다. 계속 ctrl + c로 서버를 종료했다가 켜는 것은 굉장히 불편하기 때문에 그런 상황에서 굉장히 유용한 모니터링 유틸리티이다. 이제

2022년 7월 11일
·
0개의 댓글
·
post-thumbnail

Message body를 통한 데이터 전송

form data 전송

2022년 7월 3일
·
0개의 댓글
·
post-thumbnail

A Template Engine: Pug

pug

2022년 6월 29일
·
0개의 댓글
·
post-thumbnail

유뷰브 클로닝 #4-2 Pug: Digging into Pugs

Inheritance 기능 https://pugjs.org/language/inheritance.html개념extends 는 또다른 pub 파일을 불러온다. import 같은 개념.block 은 템플릿이 될 파일에 빈 공간(block)을 만들어주는 것이다. 이

2022년 4월 8일
·
0개의 댓글
·
post-thumbnail

유튜브 클로닝 #4 Template: Pug

Pug는 Haml의 영향을 많이 받은, Node.js 및 브라우저용 JavaScript로 구현된 고성능 템플릿 엔진입니다. Pug는 이전에 "Jade"로 알려졌습니다. 그러나 "Jade"가 등록상표임이 밝혀져 이름을 변경했습니다.설치 및 사이트: https:/

2022년 4월 6일
·
0개의 댓글
·
post-thumbnail

Pug, Template (Recap)

왜냐하면 두가지를 프론트 엔드에서 꽤 자주 사용 하게 된다.거의 Iteration을 자주 쓰고 mixin은 가끔 쓰게 될것이다.Iteration은 array의 모든 element에 대해 특정 행동을 취할때 사용한다. videoController.js에서 video라는

2022년 3월 22일
·
0개의 댓글
·
post-thumbnail

Pug, Template #02(Iteration, Mixin)

videoController.js이런식으로 나온다. 수정 가능 하다.videos안에 video가 있으니 video는 title이 있다.home.pug으로 가서 video.title이라 적는다.숫자일 필요도 없고 객체여도 된다. mixin이라는 걸 이용해 볼거다.mi

2022년 3월 22일
·
0개의 댓글
·
post-thumbnail

Pug, Template #01(Iteration)

if, else if conditional을 없앤다.Iteration은 기본적으로 elements의 list를 보여준다.videoController.jstreding 안에 video들이 들어가게 된다.데이터 베이스에서 가져올거다.그래서 가짜 비디오의 array을 만든거

2022년 3월 19일
·
0개의 댓글
·
post-thumbnail

Pug, Template (Conditionals)

conditionalsiterationmixing일단 이 세가지가 있다.conditionals를 가장 많이 쓰게 된다.if, if else ...base.pug이렇게 작성 해주면 Title이 중앙으로 오게 된다.여기서 알아야 할것이 있다.이렇게 쓰게 된다면 text가

2022년 3월 19일
·
0개의 댓글
·
post-thumbnail

Pug Recap

간략하게 pug의 장점에 대해서 알아 보겠다.pug는 깔끔하다.지저분하게 HTML을 쓰지 않는다. (반복적인 사용을 안하게 해준다.)파이썬 처럼 깔끔한 코드를 쓸수 있게 해준다.태그를 닫는걸 신경 쓰지 않아도 된다.모든 탭과 띄어쓰기로 구분이 된다.express에게 렌

2022년 3월 19일
·
0개의 댓글
·
post-thumbnail

Pug, Template # 01

이제 inheritance(상속) 개념에 대해 알아 보자.상속이란 일종의 베이스를 만드는 거다.(레이아웃의 베이스 혹은 html의 베이스)그러면 모든 파일들이 그 베이스에서 부터 확장해 나간다.views폴더에다 bass.pug 파일을 만든다.doctype htmlhtm

2022년 3월 19일
·
0개의 댓글
·
post-thumbnail

Pug, Templates # 02

이번엔 Title 부분 반복적으로 쓰는 부분을 수정해 본다.일단 hoem.pug, edit.pug, watch.pug에 있던 부분은 싹다 지워 준다.base.pug에 추가 해준다.여길 보면 trending이 home을 렌더링하는걸 알수 있다.videoController

2022년 3월 19일
·
0개의 댓글
·
post-thumbnail

Pug, Partials

에러가 났던 걸 고치는 방법은 디폴트 값을 바꾸는 거다.한가지 해결 방법은 views폴더를 src밖으로 꺼내는 거다. (너무나도 단순, 무식한 방법이다.)이 방법은 별로 추천하지 않는다.모든 코드를 정리하기에도 보기에도 src폴더 안에 있는게 좋다.그래서 express

2022년 3월 19일
·
0개의 댓글
·
post-thumbnail

Returning HTML, Pug

현재 문자열만 return하고 있다. 그래서 HTML로 return을 해보겠다.두가지 옵션이 있다.res.send("")안에 다가 HTML의 문자열을 써서 보내는 방법이 있다.browser가 그 HTML을 실행해서 보게 된다.이런식으로 작성을 하게 되면 browser가

2022년 3월 19일
·
0개의 댓글
·
post-thumbnail

[Node.js/Pug] 템플릿 엔진, 퍼그

템플릿 엔진이란 템플릿의 양식과 데이터의 모델에 따른 입력 데이터를 결합해서 사용자가 원하는 결과 문서를 출력해주는 소프트웨어 또는 컴포넌트를 말합니다. 우리가 알아볼 템플릿 엔진은 웹 문서의 결과로 출력될 예정이니 웹 템플릿 엔진이라고 합니다.템플릿 엔진을 이용하면

2022년 3월 8일
·
0개의 댓글
·
post-thumbnail

Nodejs - pug의 문법

pug의 문법express의 템플릿엔진으로 사용되는 pug(구: jade)의 사용법을 학습하면서 pug를 어떻게 써야하는지에 대한 것. 즉, 문법을 공부할 필요성을 느꼈다. pug를 사용하게 되면 html 문서를 상당히 축약해서 작성할 수 있어서 코드가 간결해지고 생산

2022년 2월 23일
·
0개의 댓글
·