Node.js express의 학교에 Pug의 등장이라..

하늘·2022년 9월 2일

목록 보기

3/3

출처: 노마드코드 유튜브 클론 코딩

Pug란?

홈 화면에 HTML을 입력하려면 res.send(<h1>타이틀입니다..</h1>) 이렇게 적어 줄 수도 있지만,
저 괄호 안에 HTML을 적으면 DOCTYPE부터.. </html>으로 끝마치는 것까지.. 그러니까 엄청 비효율적이고 한마디로 에바..입니다

그럴 때 쓰는 게 pug인데, pug를 쓰면 좋은 점이 header, footer 등 홈페이지마다 자주 노출되어야 하는 것들은 따로 파일을 만들어서 작성하고, 그것을 내보내고 불러와 주기만 하면 되어서 유지보수 측면에서도 아주 효율적이라고 볼 수 있어요

설치는 npm을 통해서 할 수 있습니다

npm i pug

Pug는 HTML 문법과는 조금 달라요

Pug의 장점으로는 부분별로 나눠서 유지보수가 핵꿀이라는 것도 있지만, 간편하게 자바스크립트 코드를 작성할 수 있다는 것도 큰 장점이에요

그래서 HTML과 달리 여는 태그, 닫는 태그가 없고 부모-자식과의 관계 구분은 탭으로 정리해 줍니다
안에 들어갈 텍스트는 공백(스페이스바)로 구분해 줍니다

📝 HTML

<h1 class="logo"><span class="sc-only">로고</span></h1>

📝 pug

h1.logo
	span.sc-only 로고

express는 pug를 html로 자동 변환해 줘요

src에 views라는 폴더를 만들어 주고 그곳에 pug 파일들을 만들어 갈 거예요

그런데 만든다고 바로 express가 pug를 인식하고 우리가 아는 html로 변환해 주지 않고,
server.js에서 pug를 사용할 거라고 알려 주어야 합니다

이럴 때 사용할 수 있는 메소드가 app.set()이고,
첫 번째로 view 엔진으로 pug 사용할 거라고 설정해 주기, 두 번째로 pug가 있는 파일 경로 설정해 줘야 합니다

app.set('view engine', 'pug') // app.set('view engine', 뷰 엔진 이름)
app.set('views', process.cwd() + '/src/views')'; // app.set(폴더명, 폴더경로)

process.cwd()는 package.json이 있는 현재 경로를 뜻합니다
process.cwd()를 쓰지 않으면 src 안에 있는 views 폴더를 인식하지 못해요

만약 pug 파일들을 src 폴더 밖에 두면 인식이 가능하지만, src 폴더 안에 넣어서 정리할 거라면 위와 같이 폴더명을 따로 알려 줘야 합니다!

Pug 작성하기

1. 기본이 되는 base.pug 만들어 주기

/src/views 안에 base.pug를 만들어 주어서 그 안에 header, footer, main을 불러와야 합니다

doctype html 
html(lang="kr")
  head
    title Youtube Clone
  body 
    header
      h1 Youtube
    main 
      span 안에 내용
	footer 
   	  h2 푸터 로고

2. header 작성하고 불러오기

header, footer 등 모든 페이지에 항상 존재하는 레이아웃은 partials 폴더를 만들어서 따로 관리해 줍니다

header
	h1.logo 유튜브

헤더 태그와 헤더 안에 들어갈 내용을 작성해 주고 이것을 불러오는 방법은,

base.pug에 다시 가서 include를 통해 불러와 주면 됩니다! (scss가 생각남..)

doctype html 
html(lang="kr")
  head
    title Youtube Clone
  body 
    include partials/header // 폴더명/파일이름
    main 
      span 안에 내용
	footer 
   	  h2 푸터 로고

3. 페이지마다 달라지는 내용은 block으로 처리해 줘요

(냅다 덕밍아웃................ 데이식스 해쭈 좋아요 ^^)

header, footer를 레이아웃으로 처리해 줬다면 block으로 페이지마다 바뀌는 내용들을 관리해 주면 되는데요,

block 고유의 이름

으로 처리해 주고 해당 페이지를 구성할 pug 파일에 가서 작성해 주시면 됩니다

예를 들어, home에서는 안에 내용을 '여기는 홈'으로 처리해 줄 거고, edit 페이지에서는 '여기는 수정 페이지'라고 적어 줄 거면

📝 base.pug

main 
	block content

📝 home.pug

block content
	span 여기는 홈

📝 edit.pug

block content
	span 여기는 수정 페이지

라고 적어 주면 content 안에 있는 내용에 맞게 페이지마다 내용이 달라집니다

4. 자바스크립트 코드를 바로바로 작성할 수 있어요

기존 html과 자바스크립트라면 해당 요소를 const 변수명 = document.querySelector(element)로 불러와서 작업해야 했지만, pug에서는 코드를 바로바로 작성해 줄 수 있습니다

#{자바스크립트 코드}로 작성할 수 있어요
제이쿼리의 ${}와 헷갈릴 수 있으니 조심!

span.copy-area &copy; #{new Date().getFullYear()} 유튜브 클론

이외에도 다른 문법들은 구글에 조금만 검색해 봐도 저보다 정리를 잘해 주신 의인님들의 게시글이 많아서 그것을 보고 참고하시면 될 것 같습니다

참고로 스타일링 작업은 맨 마지막에 할 예정이라서 일단 눈호강(?)을 위해 MVP.css를 사용했습니다

https://andybrewer.github.io/mvp/

base.pug head 부분에 link(rel="stylesheet" href="https://unpkg.com/mvp.css")를 적어 주면 알아서 스타일링이 되니 CSS 작업하기 전에 적용하면 꿀일 듯!

하늘

이전 포스트