- 스프링 부트와 AWS로 혼자 구현하는 웹 서비스(이동욱 지음) 책을 읽고, 새로 알게된 내용과 잊어버렸던 내용들을 위주로 정리한 내용입니다.
4. 머스테치로 화면 구성하기
템플릿 엔진
템플릿 엔진이란?
- 지정된 템플릿 양식과 데이터가 합쳐져 HTML문서를 출력하는 소프트웨어
- 서버 템플릿 엔진: 서버에서 구동되는 템플릿 엔진
- 서버에서 Java코드로 문자열을 만든 후 서버에서 HTML로 반환하여 브라우저로 전달한다.
- 클라이언트 템플릿 엔진: 브라우저 위에서 작동하는 템플릿 엔진
- 서버에서는 Json, Xml형식의 데이터만 전달하고, 클라이언트에서 데이터를 혼합해 화면을 생성한다.
머스테치 문법 정리
{{> }}
- 현재 머스테치 파일을 기준으로 다른 파일을 가져온다.
{#posts}
{{변수명}}
javascript 작성 팁 및 정적파일
index.js
var main = {
init : function () {
var _this = this;
$('#btn-save').on('click', function () {
_this.save();
});
},
save : function () {
console.log("hello")
var data = {
title: $('#title').val(),
author: $('#author').val(),
content: $('#content').val()
};
$.ajax({
type: 'POST',
url: '/api/v1/posts',
dataType: 'json',
contentType:'application/json; charset=utf-8',
data: JSON.stringify(data)
}).done(function() {
alert('글이 등록되었습니다.');
window.location.href = '/';
}).fail(function (error) {
alert(JSON.stringify(error));
});
}
main.init();
var main = {~}
, main이라는 변수의 속성으로 function을 추가한 이유
- 여러 사람이 참여하는 프로젝트에서 함수이름이 중복될 수 있다.
- 이러한 문제를 피하기 위해 index.js만의 유효한 범위를 만들어 사용한다.
정적파일
- 스프링 부트는 기본적으로 src/main/resources/static에 위치한 정적파일들은 URL에서 /로 설정된다.