[JavaScript, Node.js] 유튜브 클론 정리 5장 (3) - MVP.css, Conditionals, Iteration, Mixins

머리글

이번 시간에는 간편하게 CSS 작업을 해주는 MVP.css와 조건문, 반복문, 그리고 Pug의 기능인 Mixin에 대해서 알아보자.

MVP.css

아무래도 개발 중인 화면은 늘 못생겼다.
그래서 이를 보완하기 위해 css 작업을 간단하게 도와주는 스크립트를 하나 써보려고 한다.
바로 MVP.css다.

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

MVP.css - Minimalist stylesheet for HTML elements

간단하게 한 줄로 CSS 작업을 도와준다.

기존에 작성했던 base.pug 파일에 head 부분에 다음 코드를 추가해 주자.

link(rel="stylesheet" href="https://unpkg.com/mvp.css")

이제 페이지에 다시 접속해 보면, CSS가 적용된 화면을 볼 수 있다.

MVP.css가 적용된 모습

자 이제 본격적으로 Pug의 조건문에 대해 알아보자.

Conditionals

우리는 특정 상황에서만 유저에게 무언가를 보여주고 싶을 수 있다.
예를 들어, 로그인을 하지 않았다면 로그인 버튼을 보여준다던지,
반대의 경우 로그아웃 버튼을 보여준다던지 하는 경우가 있다.

이를 위해 우리는 조건문을 써야 한다.

위의 예시를 간단하게 나타내면 아래와 같은 느낌일 것이다.

if login:
	로그아웃 버튼
else:
	로그인 버튼

그렇다면 이 조건문을 템플릿에 어떻게 적용할 수 있을까?

우선 간단하게 로그인에 대해 이해하기 위해 가상 유저를 하나 만들어보자.

const fakeUser = {
	name: "Looan",
    loggedIn: false,
};

export const home = (req, res) => res.render("home", {pageTitle: "Home", fakeUser};

만들어진 가상 유저를 홈 화면에 전달을 했다.

그리고 base.pug를 살짝 수정해 보자.

...
body
	header
    	nav
        	ul
            	if fakeUser.loggedIn
                    li
                        a(href="/login") Login
                else
                	li
                        a(href="/logout") Logout

이렇게 수정을 하면,
가상 유저가 로그인 상태라면, 로그아웃 버튼이
가상 유저가 로그인 상태가 아니라면, 로그인 버튼이 보이게 된다.

Pug의 조건문에는 콜론을 붙일 필요가 없이 탭(Tab)으로 구분한다.

이 상태에서 홈 화면에 접속하면 다음과 같이 뜬다.

로그인 상태가 아니므로 로그인 버튼이 보인다.
이제 가상 유저의 상태를 로그인으로 변경해 주자.

const fakeUser = {
	name: "Looan",
    loggedIn: true,
};

export const home = (req, res) => res.render("home", {pageTitle: "Home", fakeUser};

이제 버튼이 바뀌게 된다.

이런 식으로 조건문을 이용할 수가 있다.

그다음으로는 반복문의 활용법에 대해 알아보자.

Iteration

우선 비디오의 리스트를 출력한다고 가정하기 위해 가상 비디오 리스트를 만들어주자.

export const home = (req, res) => {
	const videos = [1,2,3,4,5];
    return res.render("home", {pageTitle: "Home", videos}
};

그리고 home.pug 파일로 가서 다음과 같이 입력하자.

extends base

block content
	ul
    	each video in videos
        	li=video

each 문을 사용해서 반복문을 생성했다.
video의 경우 다른 이름으로도 얼마든지 바꿀 수 있다.(each potato in videos 등)
하지만, videos의 경우 전달받은 변수명을 사용해야 한다.

이렇게 수정하고 홈 화면에 접속해 보자 그러면 다음과 같이 보인다.

videos라는 array 안에 있는 각 video에 대해 list를 만들어서 사용자에게 출력해주고 있다.

그런데 만약 비디오 array가 비어있다면 어떻게 해야 할까?

extends base

block content
	ul
    	each video in videos
        	li=video
        else
        	li Nothing found.

조건문과 마찬가지로 else를 사용할 수 있다.

이 경우에는 비디오를 찾으면 비디오의 리스트를 출력하고,
그렇지 않으면 "Nothing found."를 출력하게 된다.

즉, Pug는 자동으로 array를 체크한다.

Mixins

만약 우리가 비디오 array에서 객체를 전달하면 어떻게 될까?

const videos = [
	{
    	title: "1",
    },
    {
    	title: "2",
    },
    {
    	title: "3",
    },
];

그러면 화면에 이렇게 출력된다.

아무래도 우리가 원하는 방식은 아닌 듯하다.
조금 수정해 주면 정상적으로 출력이 가능하다.

extends base

block content
	ul
    	each video in videos
        	li=video.title
        else
        	li Nothing found.

li에 출력할 내용을 video 자체가 아닌 video의 title로 변경해서 출력이 가능하다.

조금 더 복잡한 video 객체를 만들어보자.

mixin을 사용할 건데, 기존에 배웠던 partials와 같은 기능을 한다.
하지만 mixin은 데이터를 받을 수 있다.

즉, 우리는 같은 형태를 가져야 하지만 변화해야 하는 데이터에 대해 mixin을 사용할 수 있다.

video 객체를 조금 수정해 보자

const videos = [
	{
    	title: "First Video",
        rating: 5,
        comments: 2,
        createdAt: "2 mins ago",
        views: 59,
        id: 1,
    },
    {
    	title: "Second Video",
        rating: 5,
        comments: 2,
        createdAt: "2 mins ago",
        views: 59,
        id: 1,
    },
    {
    	title: "Third Video",
        rating: 5,
        comments: 2,
        createdAt: "2 mins ago",
        views: 59,
        id: 1,
    },
];

정보가 훨씬 많아졌다.

이제 home 템플릿도 수정해 주자.

extends base

block content

    each video in videos
        div
        	h4=video.title
            ul
            	li #{video.rating}/5
                li #{video.comments} comments
                li Posted #{createdAt}
                li #{video.views} views
                
    else
        li Nothing found.

그럼 다음과 같이 나오게 된다.

그런데 만약 우리가 이러한 형태의 비디오 출력 방식을 다른 페이지에서도 써야 한다면?
계속 복사를 할 수는 없으니까 조금 더 편리한 방법으로 바꿔보자.

우선 mixin.pug 파일을 생성해 주자

mixin video(video)
	div
        h4=video.title
        ul
            li #{video.rating}/5
            li #{video.comments} comments
            li Posted #{createdAt}
            li #{video.views} views

우선 mixin이라고 작성한 뒤, mixin의 이름을 만들어준다.
그리고 받게 될 데이터를 괄호 안에 작성해 주자.
기본적인 함수 생성 방식과 똑같다.

그리고, 형식을 작성해 주자.
이러면 mixin이 완성되었다.

그럼 어떻게 사용해야 할까?
우선 home 템플릿을 수정해 주자.

extends base
include mixins/video

block content

    each video in videos
        +video(video)             
    else
        li Nothing found.

우선 include "파일의 경로" 해서 mixin을 include 해주자.

이제 mixin을 사용해 보자.
mixin을 사용하기 위해선 '+'를 넣어서 표시해줘야 한다.
그리고 만들었던 mixin의 이름과 데이터를 함수를 사용하듯 사용하면 된다.

이렇게 한다면 같은 형식을 또 사용해야 하는 경우 mixin의 형태로 사용이 가능하다.

마무리

이번 시간에는 CSS를 도와주는 MVP.css와 조건문, 반복문, 그리고 반복되는 코드를 줄이기 위한 partials와 유사한 방법인 mixin에 대해서 배웠다.

다음 시간엔 가상 DB를 만들어서 사용해 보자.