Springboot (4) 웹 애플리케이션 - 2

1. 화면 구성

애플리케이션 화면 구성 시 JSP, Vue와 같은 템플릿 엔진을 사용한다. 템플릿 엔진이란 템플릿 양식과 데이터로 HTML을 구성하는 소프트웨어이다. 서버 템플릿 엔진(JSP, Freemaker)과 클라이언트 템플릿 엔진(React, Vue)이 있다.

• 서버 템플릿 엔진: 서버에서 처리 후 완성된 HTML을 전달하는 방식
• 클라이언트 템플릿 엔진: 서버에서는 Json/Xml 형태의 데이터만 전달하고 클라이언트에서 HTML로 조립하는 방식

 

A. Mustache

Mustache라는 템플릿 엔진 사용하여 화면을 구현한다. 사용하는 언어에 따라 서버/클라이언트 템플릿 엔진으로 활용 가능하다.

Handlebars/Mustache 플러그인 설치 후 build.gradle에 아래 의존성을 추가해준다.

    ...
    compile('org.springframework.boot:spring-boot-starter-mustache')
    ...

 

머스테치의 기본 파일 경로는 src/main/resources/templates이다. 컨트롤러에서 "abc" 응답 시 View Resolver에 의해 .../templates/abc.mustache로 연결된다.

 

[mustache 문법]

Expression	Description
{{>layout/header}}	./layout/header.mustache를 인클루드한다.
{{#posts}}	posts라는 List를 순회한다.
{{title}}	List에서 뽑아 낸 객체의 필드를 사용한다.
{{post.title}}	post라는 객체의 필드 접근

 

B. 정적(static)파일 관리

각종 화면 이벤트 처리를 위해 index.js라는 파일을 생성한다. 스프링부트는 src/main/resources/static을 정적파일 루트로 설정하므로 이 위치에 생성해주면 된다. 아래와 같이 파일별로 폴더를 나누어 관리하자.

• src/main/resources/static/js/...
• src/main/resources/static/css/...
• src/main/resources/static/image/...

index.js 생성 시 일반적으로 아래 형태로 함수를 생성하는데, 이렇게 처리하면 index.js만의 유효범위(scope)를 한정하게 되기 때문에 함수명 중복에 의한 문제점을 해소해준다.

var index = {
    init: function() {
        ...
    },
    save: function() {
        ...
    },
    update: function() {
        ...
    }
};

index.init();

 

2. 기타

REST에서의 CRUD↔HTTP Method 매핑

• 생성(Create): POST
• 조회(Read): GET
• 수정(Update): PUT
• 삭제(Delete): DELETE

 

기타 참고:

• 서버사이드 렌더링
• Querydsl(데이터베이스 조회용 프레임워크)
• Stream API, 람다식