준비중..
06 레이아웃 나누기
# 레이아웃 나누기
## 미션
---
레이아웃 나누기 미션! 아래 화면을 3단 구조(header/content/footer)로 나누고, 이를 파일로 구분하시오.
## 개념
---
#### ⭐ 레이아웃
화면을 구분하여 배치하는 것. 이를 레이아웃(layout)이라 한다. 웹 페이지는 반복되는 부분이 존재하는데, 이를 파일로 나누면 좋다. 이를 통해 코드의 중복을 줄일 수 있다.
가령 1000개의 페이지에 똑같은 요소가 있다고 하자. 해당 요소가 변경되는 경우, 1000개의 파일을 모두 고쳐한다. ~~야근 각..!~~ 미리 하나의 파일로 빼놓으면, 칼퇴 가능하다.
## 튜토리얼
---
#### ⭐ 뷰 나누기
1) header 생성: "templates/layouts/header.mustache"
```
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Article</a>
</li>
</ul>
</div>
</nav>
```
2) footer 생성: "templates/layouts/footer.mustache"
```
<!-- footer -->
<footer class="mb-5 container-fluid">
<hr>
<p>© CloudStudying ·
<a href="#">Privacy</a> · <a href="#">Terms</a>
</p>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<Script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<Script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<Script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
```
3) 기존 파일 변경: "templates/articles/index.mustache"
```
{{>layouts/header}}
<!-- jumbotron -->
<div class="jumbotron">
<h1>Article 목록</h1>
<hr>
<p>articles/index.mustache</p>
<p>{{msg}}</p> <!-- 모델 데이터를 가져 옴 -->
</div>
{{>layouts/footer}}
```
#### ⭐ 결과 확인
4) 브라우저 접속
## 훈련하기
---
- 위 코드를 깃으로 커밋(commit) 후, 깃허브로 푸시(push) 하시오.
## 면접 준비
---
- 뷰 페이지 레이아웃을 파일별로 나누는 이유는?