유튜브 클론코딩[TEMPLATES]

김동현·2021년 12월 7일

nodeJS

목록 보기

3/14

컨트롤러에서 res.send("HELLO");를 리턴하면 페이지에서 HELLO가 출력된다. 하지만 이것은 텍스트를 출력하는게 아니라 HTML문서를 출력하는 것이다.
하지만 일반적인 HTML코드를 res.send()메서드의 매개변수로 넘겨주기엔 너무 길다. 또한, 부분적인 요소만 다르고 나머지는 동일한 여러 페이지를 만들때, 반복작업이 요구된다.
이를 위한 해결책으로 pug가 있다.

위의 문제를 해결하기 위해서는 2가지 방법이 존재한다.
1. views폴더를 /wetube폴더로 이동하는 것
2. express 설정을 조작하여 views폴더로 참조경로를 바꾸는것
1번 보다는 2번의 방법이 낫다.
모든 코드를 src폴더 내에 있는것이 보기 좋기 때문이다.
위의 공식문서 내용을 참조해서 경로를 바꿔보자.
app.set("views", process.cwd() + "/src/views");
또는
app.set("views", process.cwd() + "\\src\\views");

오류없이 실행된다.
pug파일 안에 자바스크립트 코드를 포함 시킬 수 있다.
#{js코드}
pug파일에 적용한 자바스크립트 코드는 유저에게 응답하기전에 처리되어 보내진다. 그러므로 유저입장에서는 자바스크립트 코드를 볼 수 없다.
이 과정을 랜더링이라 부른다.
각 페이지마다 퍼그파일을 만들면 겹치는 부분이 생긴다. 반복되는 부분이 생긴다는 뜻이다.pug는 그 해결책으로 partials를 이용한다.
예를들어 watch.pug와 home.pug의 footer부분이 겹친다고 하자.
겹치는 부분을 따로 파일로 만들고 필요할때마다 include해서 쓸 수 있다.
정리하자면 pug를 사용하는 이유로 크게 3가지 장점이 있다.
1. 깔끔한 HTML코드
2. 코드내에 자바스크립트 포함 가능
3. include로 반복문제 해결

3개의 pug 파일을 보면 h1태그 부분만 다르고 나머지는 똑같다.
이 경우 상속을 이용할 수 있다.
부모가 되는 파일 base.pug를 만들고 다음과 같이 코드를 짠다.

베이스가 되는 파일을 만들고 사용하려는 곳에서 extends를 한다. 변하는 부분은 block처리하고 따로 추가한다.

CSS는 보통 마지막에 작업한다. 그래서 기본 스타일이 적용된 상태로 코딩을 하게 되는데 그 때문에 코딩 과정이 지루해진다.
그럴땐 임시로 이쁜 스타일을 적용하면 된다.
https://andybrewer.github.io/mvp/

pug에서 변수를 쓰기 위한 방법이 2가지 있다.
1. 태그=변수
2. 태그 #{변수}
  
  첫 번째 방법은 변수와 텍스트가 섞여있을때 사용하고
  두 번째 방법은 변수만 있을때 사용한다.
pug에서 if/else를 쓸 수 있다.
공식문서 참조
https://pugjs.org/language/conditionals.html
가짜정보를 만들어서 변수로 넘겨준뒤 pug를 살펴보자.

if 뒤에 변수를 쓸 수 있다. fakeUser.loggedIn이 현재 false이기 때문에 else뒤의 코드가 실행된다.
사이트를 보면 login 이 표시되는걸 확인 할 수 있다.
true로 바꿔서 사이트를 보자.

pug에서 선택(conditional)구조 말고 반복(iteration)구조도 사용할 수 있다.
공식문서 참조
https://pugjs.org/language/iteration.html
iteratable한 자료형에 아이템이 하나도 없을때 특정한 액션을 취하고 싶다면 else를 쓰면 된다.