1. header.ejs // footer.ejs 생성
: header 및 footer 사용은 필수가 아님. 다만 DRY(Don't Repeate Yourself)를 적용하기 위함이다.
그림 1과 같이 views/partials 아래에 header.ejs와 footer.ejs를 생성한다.
2. header.ejs 및 footer.ejs에 다음과 같이 html 코드를 입력한다.
1) header.ejs
<DOCTYPE>
<html>
<head>
<title>Yelpcamp</title>
</head>2) footer.ejs
<p>TradeMark YelpCamp 2020</p>
</body>위의 header.ejs와 footer.ejs를 합치면 기본적인 html 파일의 형태가 나온다. 즉 두 파일을 res.render로 서버에서 클라이언트로 response 시 전송할 스크립트 앞 뒤로 붙이도록 설정하는 것이다.
다시 말해 Yelpcamp의 모든 페이지는 위와 같은 header와 footer가 조립되어 클라이언트로 전달된다.
3. res.render에서 사용하는 스크립트에 header와 footer 호출하는 코드 삽입
1) landing.ejs
<%- include("partials/header") %> <!--2에서 작성한 header.ejs 호출-->
<h1>Landing Page</h1>
<p> Welcome to Yelpcamp </p>
<a href="/campgrounds"> Back to campgrounds page <a/> <!-- campgrounds 페이지로 이동시키는 링크-->
<%- include("partials/footer") %> <!--2에서 작성한 footer.ejs 호출-->2) campground.ejs
<%- include("partials/header") %> <!-- 2에서 작성한 header.ejs 호출-->
<% campgrounds.forEach((campground) => { <!-- forEach loof로 app.js에 있는 const campground 반복호출 -->
<div>
<%= campground.title %> <!-- forEach loof 돌 때 title을 뽑아서 출력-->
<img src="<%= campground.image %>"> <!-- forEach loof 돌 때 image을 뽑아서 출력-->
</div>
<%})%>
<%- include("partials/footer") %> <!-- 2에서 작성한 footer.ejs 호출-->
<img> 태그에 표현식을 위와 같이 했을 경우 실제로 server에서 리턴하는 코드는 아래와 같으며, 정상적으로 img를 출력하는 코드를 브라우저에서 동작시켜 이미지를 출력시킨다.
<img src="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F1340BB3D5030CCFE02">
4. 마지막으로 페이지를 디자인 하기 위해 BootStrapCDN을 header.ejs에 추가해준다.
<!DOCTYPE html>
<html>
<head>
<title>Yelpcamp</title>
<link ref="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
'Full stack development > The Web Developer Bootcamp(2020)' 카테고리의 다른 글
| 303. Mongo Shell Bacis (0) | 2020.09.27 |
|---|---|
| 300. YelpCamp: Styling Nav and Forms (0) | 2020.09.26 |
| 299. YelpCamp: Styling Campgrounds (0) | 2020.09.26 |
| 298. Note about YelpCamp: Styling Campgrounds Lecture (0) | 2020.09.26 |
| 297. YelpCamp: Creating Campgrounds (0) | 2020.09.26 |