스프링 부트와 AWS로 혼자 구현하는 웹 서비스 04

이 글은 이동욱(jojoldu)님의 <스프링 부트와 AWS로 혼자 구현하는 웹 서비스> 를 참고하였습니다.

m.yes24.com/Goods/Detail/83849117

스프링 부트와 AWS로 혼자 구현하는 웹 서비스

 

머스테치로 화면 구성하기

이번 글은 저번에 만든 ApiController 를 이용하여 해당하는 화면 (CRUD)를 만들어 볼 것 이다.

 

머스테치는 화면 영역을 개발하는 템플릿 양식이다. Vue.js 나 React.js 와 같은 클라이언트 사이드 렌더링(CSR)와 달리 자바 진영에서 제공하는 서버 템플릿 엔진이다. 흔히 많이 사용하는 JSP는 Spring Boot 환경에 어울리지 않고, Thymeleaf는 다소 문법이 어려운 탓에 책에서는 Mustache를 권장한다.

 

 

머스테치 플러그인

 

문법체크나 HTML 문법 지원, 자동완성 기능을 도와주는 Mustache 플러그인을 설치하자.

 

 

build.gradle에 의존성 추가

 

두가지를 했다면 머스테치를 사용할 준비가 끝이 났다.

 

 

 

 

index.mustache 라는 파일을 templates/index.mustache로 생성후 각 문단 위아래에 레이아웃 분리를 위해 해당 문법을 사용한다. layout/header는 헤더영역 - css와 같이 사용자가 화면 렌더링 도중 깨진 화면을 보이지 않기 위해 다음과 같이 설정한다.

 

bootstarap도 사용

layout/footer.mustache

 

js의 경우 , 렌더링 시간을 지연 시킬 수 있으므로 가장 밑단인 footer에 설정하도록 하자. 또한 bootstap.min.js의 경우 jquery가 필요하고 의존적 관계이므로 jquery를 먼저 선언해주도록 한다. 위와 같은 URL로 라이브러리를 제공하는 방식을 CDN이라고 한다.

 

또한 js의 경우 , 절대경로(/)로 바로 시작한다. 위와 같이 /js/app/index.js -> http://도메인/js/app/index.js 로 실행이 되는 것이다. 

/ 하나로 애먹는 경우가 많으니, 기억하도록 하자.

 

 

javascript 를 모아놓은 index.js

 

다음과 같이 특이한 점이 있다면 js 파일을 통해 동작을 나누어 놓고 main 영역을 init 시켰다. 이와 같은 방법은 유효범위를 만들어서 javascript 소스의 중복 사용 방지라고 할 수 있다. 위와 같이 footer에서 Index.js를 참조하도록 설정후 , index 파일에서만 실행하도록 설정을 해놓은다면 ( 현재는 화면이 별로 없지만 ) 예상치 못한 스크립트의 실행을 방지할 수 있을 것 같다.

 

github.com/jojoldu/freelec-springboot2-webservice

jojoldu/freelec-springboot2-webservice

해당 깃헙에 소스가 있으니 참고하면 다음과 같은 화면을 빠르게 만들수 있다.

 

 

게시판을 만드는 목적이라기 보다는 AWS와 JPA, 그리고 Nginx를 통한 무중단 배포의 학습이 주목적이니 게시판 만드는 부분은 깃헙의 소스를 참고하여 빠르게 만들기 바란다!