작성일: 2023-09-22

# 웹 서버에 웹 페이지 만들기

– **목적:** 학습용 개인 프로젝트

– **내용:** Node.js, Express를 설치하고 웹 서버에서 보이는 웹 페이지를 Pug로 만들어보기

– **사용:** Pug, CSS 

—

하나의 사이트를 만들어보는 강의를 수강하는데 개발자의 영역까지는 지금 내 지식 수준에서는 어렵고, 웹 페이지를 Pug라는 템플릿 엔진으로 효율적인 HTML을 만들어보기로 했다.

만들기에 앞서 Pug 수정 내용을 실시간으로 확인하기 위해 nodemon으로 서버를 자동 재시작 할 수 있도록 했다.

그동안 HTML을 사용하면서 제일 답답했던 것 중에 하나가 여러 페이지가 있을 때 공통으로 사용하는 헤더, 푸터 같은 영역을 **페이지마다 수정** 해주어야한다는 점이었다. 그 문제를 해결하려면 php라는걸 배워야 했는데, 디자이너인 나에겐 너무 복잡하고 배워야하는 것이 많아서 고민이던 차에 강의에서 ‘Pug’의 존재를 발견한 것이다.

html의 형태인 꺽쇠 `<>` 없이 태그를 작성하는게 낯설지만, mixin, partial, include 등을 사용하면 한 파일에 표시되는 코드의 양도 훨씬 줄어들고 수정-저장의 반복 작업을 줄일 수 있어서 편리하다.