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

• 스프링 부트와 AWS로 혼자 구현하는 웹 서비스(이동욱 지음) 책을 읽고, 새로 알게된 내용과 잊어버렸던 내용들을 위주로 정리한 내용입니다.

4. 머스테치로 화면 구성하기

템플릿 엔진

템플릿 엔진이란?

• 지정된 템플릿 양식과 데이터가 합쳐져 HTML문서를 출력하는 소프트웨어
  
  
• 서버 템플릿 엔진: 서버에서 구동되는 템플릿 엔진
  • 서버에서 Java코드로 문자열을 만든 후 서버에서 HTML로 반환하여 브라우저로 전달한다.
    
    
• 클라이언트 템플릿 엔진: 브라우저 위에서 작동하는 템플릿 엔진
  • 서버에서는 Json, Xml형식의 데이터만 전달하고, 클라이언트에서 데이터를 혼합해 화면을 생성한다.
    
    

머스테치 문법 정리

• {{> }}
  • 현재 머스테치 파일을 기준으로 다른 파일을 가져온다.
    
    
• {#posts}
  • posts 라는 List를 순회한다.
    
    
• {{변수명}}
  • List에서 뽑아낸 객체의 필드를 사용한다.
    
    

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에서 /로 설정된다.
  • ex) src/main/resources/static/js/index.js (http://도메인/js/index.js)