-
15. 스프링부트와 AWS - 부트스트랩과 제이쿼리실습/AWS 2021. 5. 8. 07:14
앞서 Index를 통해서 mustache가 제대로 실행되는 것을 확인해보았다.
이제 앞서 만든 내용을 바탕으로 게시글 조회, 등록, 수정 등의 화면을 만들어야 한다.
우선 그 전에 해당 프로젝트는 부트스트랩, 제이쿼리를 이용하므로 준비할 것이 몇 가지 있다.
부트스트랩, 제이쿼리 모드 라이브러리로서 매번 mustache에 코드를 추가해야한다.
이는 중복되는 코드이므로 이를 레이아웃 방식으로 mustache에 삽입해줄 예정이다.
레이아웃 방식으로 라이브러리 추가하기
우선 이전에 만든 "/src/main/resources/templates" 폴더 안에 layout폴더를 만든다.
이제 layout폴더 안에 캡쳐샷처럼 "header.mustache", "footer.mustache"를 생성해준다.
<!DOCTYPE HTML> <html> <head> <title> AWS+스프링부트 게시판 </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>header.mustache와 footer.mustache에 각각 위와 같이 코드를 입력해준다.
간단히 header와 footer의 사용법을 이야기하자면 위 그림과 같다.
mustache문서의 본문 코드가 달라지더라도 기본적으로 문서 상단과 하단은 다 비슷하거나 똑같다.
그러므로 상단에 해당하는 header와 하단에 해당하는 footer는 미리 만들어둔다.
그 다음 일반적인 mustache 파일은 본문 코드만 삽입한 뒤에 이 3개를 합쳐서 화면에 출력하는 것이다.
추가로 이 때 css는 header에 제이쿼리는 footer에 있는 것을 볼 수 있다.
이러한 배치는 브라우저 로딩 순서에 따른 것으로
일반적으로 브라우저에서 화면이 나타날 때 header - body - footer 순으로 로딩된다.
이때 body의 실행이 늦어지면 footer의 실행이 늦어지는데 css가 footer에 있다면 화면이 깨진채로 나온다.
반면 제이쿼리를 비롯한 자바스크립트 부분은 body의 로딩을 늦출 수 있으므로 footer에 배치한다.
그래서 header에는 css를 배치하고, footer에는 js를 배치했다.
index.mustache 수정하기
레이아웃 방식으로 mustache문서의 상단과 하단은 별도로 분리했다.
이제 index.mustache를 거기에 맞춰 수정하도록 하자.
index.mustache 파일을 위와 같이 수정해준다.
이렇게하면 이제 본문을 제외한 나머지 부분을 header와 footer로 나눠준 것이다.
참고로 mustache에서 {{>}}는 현재 머스테치 파일을 기준으로 다른 파일을 가져온다는 뜻이다.
이렇게 수정하고 나서 실행해보면 이전에 index.mustache를 실행한 것과 같은 결과를 볼 수 있다.
'실습 > AWS' 카테고리의 다른 글
16. 스프링부트와 AWS - 게시글 등록 화면 만들기 (0) 2021.05.08 14. 스프링부트와 AWS - 머스테치 설정하기 및 index 만들기 (0) 2021.05.08 13. 스프링부트와 AWS - JPA Auditing으로 시간 자동 등록하기 (0) 2021.05.08 12. 스프링부트와 AWS - H2 Database로 로컬 테스트해보기 (0) 2021.05.08 11. 스프링부트와 AWS - 게시글 조회, 수정 API 만들기 (0) 2021.05.07