본문 바로가기

분류 전체보기

 (662)
7. 익스프레스 (4) - 템플릿 엔진 : Pug 9 [HTML] 헤더입니다. 내용입니다. 푸터입니다.   [Pug]// layout.pugdoctype htmlhtml head title= title link(re='stylesheet', href='/style.css') block style body header 헤더입니다. block content footer 푸터입니다. block script// body.pugextends layoutblock content main p 내용입니다. block script scr..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 8 ○ include include를 이용하면 다른 Pug나 HTML 파일을 삽입할 수 있습니다. 헤더, 푸터, 내비게이션처럼 웹 페이지에서 공통되는 부분을 따로 관리할 수 있게 되죠. include 파일 경로 형태로 사용하는데, 아래 예제를 통해서 살펴보겠습니다.  [HTML] Home About 메인 파일 다른 파일 include 푸터  [Pug]// header.pugheader a(href='/') Home a(href='/about') About// footer.pugfooter div 푸터입니다//main.puginclude headermain h1 메인 파일 p 다른 파일을 include할 수 있습니다.include footer
7. 익스프레스 (4) - 템플릿 엔진 : Pug 7 ○ 조건문 Pug에서의 조건문입니다. 역시 if, else if, else를 사용할 수 있습니다. 더불어 case 역시 사용이 가능합니다. 예시에서 isLoggedIn의 T/F 여부에 따라서 HTML을 다르게 렌더링 하는 경우를 살펴보겠습니다.   [HTML]로그인 되었습니다로그인이 필요합니다  [Pug]if isLoggedIn div 로그인 되었습니다.else div 로그인이 필요합니다.   case문도 아래와 같이 적용이 가능합니다.  [HTML]사과입니다.바나나입니다.오렌지입니다.사과도 바나나도 오렌지도 아닙니다.  [Pug]case fruit when 'apple' p 사과입니다. when 'banana' p 바나나입니다. when 'orange..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 6 앞서서 이스케이핑에 대해서도 살펴보았는데, 참고삼아 HTML 엔티티에 대해서도 살펴보겠습니다. 자바스크립트 등에서 특수 문자를 사용했는데 이것을 HTML 태그로 오인해 에러가 발생하는 것을 방지하기 위해서, 특수 문자를 HTML 엔티티 코드로 변환하게 됩니다.  > : >& : &띄어쓰기 :  " : "' : '     ○ 반복문  HTML과 다르게 반복문도 사용 가능합니다(반복 가능한 변수일 경우 해당). each를 사용해 다음과 같이 반복문을 사용이 가능합니다. 물론 for를 대신 사용해도 됩니다.  [HTML] 사과 배 오렌지 바나나 복숭아  [Pug]ul each fruit in ['사과', '배', '오렌지', '바나나', ..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 5 Pug에서의 변수 사용에 대해서 이어서 좀 더 살펴보겠습니다. 앞서서 라우터에서 변수 객체를 선언하고( { title: 'Express' } ) 변수를 사용할 때 =를 사용하거나(h1= title) #{ }를 사용하는 방식을 설명했습니다.  이와 다르게 직접 Pug 내부에서 변수를 선언할 수도 있습니다. 빼기( - )를 먼저 입력하면 이어서 자바스크립트 구문을 입력할 수 있고, 여기에 변수를 선언한 다음 다음 줄부터 해당 변수를 사용할 수도 있습니다.  [HTML]Node.js와 Javascript  [Pug]- const node = 'Node.js'- const js = 'Javascript'p #{node}와 #{js}     Pug는 기본적으로 변수에 있는 특수 문자를 HTML 엔티티로 이스케이핑..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 4 ○ 변수  Pug에서는 기본 HTML과 다르게 JS 변수를 템플릿에 렌더링할 수 있습니다. res.render 호출 과정에서 보내는 변수를 Pug가 처리하게 되죠. 아래와 같이 routes/index.js의 코드 예제가 있다고 가정해 봅시다.router.get('/', (req, res, next) => { res.render('index', { title: 'Express'});}); 위와 같이 res.render(템플릿, 변수 객체) 형태는 익스프레스가 res 객체에 추가한 템플릿 렌더링을 위한 메서드를 의미합니다. 즉, index.pug를 HTML로 렌더링 하면서 { title: 'Express' } 라는 객체를 변수로 할당하게 됩니다. 이런 방식으로 HTML에서 변수를 사용할 수 있게 만들어..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 3 앞선 아티클에서 이어서 살펴보도록 하겠습니다.    중요한 것은 모든 파일에 동일한 방식을 사용해야 한다는 점입니다. - ''를 사용하" data-og-host="nozeroslope.tistory.com" data-og-source-url="https://nozeroslope.tistory.com/624" data-og-url="https://nozeroslope.tistory.com/624" data-og-image="https://scrap.kakaocdn.net/dn/qT7Sn/hyW6EdqLhF/GBvOrkZWf7JutUgNNdi7Tk/img.png?width=590&height=361&face=0_0_590_361,https://scrap.kakaocdn.net/dn/h2w96/hyW6Gvya..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 2 ○ Pug에서 HTML 표현하기 - 기본적으로 Pug는 ''가 없습니다. - 하이어라키는 탭, 스페이스로만 구분합니다.   > 중요한 것은 모든 파일에 동일한 방식을 사용해야 한다는 점입니다. - ''를 사용하지 않기에 태그 별 속성 표시도 다르게 합니다.   > 태그 명 뒤에 소괄호로 묶어서 표현합니다.  [HTML]   [PUG]doctype htmlhtml head title= title link(rel='stylesheet', href='/stylesheets/style.css')     - 속성 중 아이디는 #, 클래스는 .(점)으로 표현합니다.- 단, div 태그의 경우 div는 생략이 가능합니다.  [HTML]  [PUG]#login-button.post-images..

티스토리툴바