스프링 부트, 입문!

준비중..

스프링 부트, 입문!

기본 게시판 만들기!

06 레이아웃 나누기

# 레이아웃 나누기 ## 미션 --- 레이아웃 나누기 미션! 아래 화면을 3단 구조(header/content/footer)로 나누고, 이를 파일로 구분하시오. ![클라우드스터딩-스프링부트-레이아웃-나누기](https://i.imgur.com/tzHzsWZ.png) ## 개념 --- #### ⭐ 레이아웃 화면을 구분하여 배치하는 것. 이를 레이아웃(layout)이라 한다. 웹 페이지는 반복되는 부분이 존재하는데, 이를 파일로 나누면 좋다. 이를 통해 코드의 중복을 줄일 수 있다. 가령 1000개의 페이지에 똑같은 요소가 있다고 하자. 해당 요소가 변경되는 경우, 1000개의 파일을 모두 고쳐한다. ~~야근 각..!~~ 미리 하나의 파일로 빼놓으면, 칼퇴 가능하다. ![클라우드스터딩-스프링부트-뷰-페이지-레이아웃](https://i.imgur.com/U4511F1.png) ## 튜토리얼 --- #### ⭐ 뷰 나누기 ![클라우드스터딩-스프링부트-레이아웃-구조-머스테치](https://i.imgur.com/13k0RO2.png) 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/popper.js@1.16.0/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) 브라우저 접속 ![클라우드스터딩-스프링부트-레이아웃-나누기](https://i.imgur.com/tzHzsWZ.png) ## 훈련하기 --- - 위 코드를 깃으로 커밋(commit) 후, 깃허브로 푸시(push) 하시오. ## 면접 준비 --- - 뷰 페이지 레이아웃을 파일별로 나누는 이유는?