MVC 패턴 - View(3)
이번 글에서는 main.pug에서 footer.pug를 활용하는 법을 배우겠다.
HTML을 알고 있다면, footer의 개념에 대해서 이해하고 있을 것이다.
footer는 문서에 대한 꼬릿말로서, 보통 그 문서에 대한 정보를 담고 있다.
여기서는 footer.pug를 main.pug에서 활용하는 법을 배울 것이다.
1) 우선 다음과 같이 partials라는 폴더를 만들고,
footer.pug를 생성한다.
여기서 partials는 페이지의 일부분을 의미한다.
2) fontawesome이라는 사이트로 이동한다. (https://fontawesome.com/)
이 사이트로 이동하는 이유는 이 사이트에서 제공하는 아이콘들을 활용하기 위함이다.
Start 버튼을 클릭하고, 다음 코드를 복사한다.
3) 복사한 코드를 main.pug의 head 위치에 붙여 넣는다.
혹은 다음과 같이 코드를 수정하는 것도 가능하다.
차이는 link( ... , ... , ...) 형식으로 쓰였다는 점이다.
4) 다음은 footer의 위치에 Youtube 아이콘을 추가할 것이다.
우선, fontawesome 사이트에서 Youtube 아이콘을 나타내는 코드를 찾는다.
5) footer.pug에 footer라는 이름의 footer 클래스를 만들고,
footer.pug에 복사한 코드를 붙여넣는다.
이 때, pug방식으로 코드가 바뀌었다.
즉, <i class="fab fa-youtube"></i> -> i.fab.fa-youtube
로 바뀌었다.
6) footer__text가 클래스명인 span태그를 추가한다.
span 태그를 추가하는 이유는 여기에 년도, ©, WeTube 이 3개를 추가하기 위함이다.
7) 다음과 같이 코드를 추가한다. 여기서,
©는 ©를,
#{new Date().getFullYear()}는 연도를
WeTube는 WeTube를 나타낸다.
여기서 #{new Date().getFullYear()}를 쓴 이유는
연도가 바뀜에 따라서 자동으로 연도가 업데이트하도록 만든 것이다.
8) main.pug로 이동해서, include ../partials/footer를 통해서
만든 footer.pug 파일을 include한다.
9) npm start를 통해 실행하면, 다음과 같이 footer.pug에서 작성한 코드가 반영된 것을 확인할 수 있다.
"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."
