4. 화면 구성하기

4.1 서버 템플릿 엔진과 머스테시

템플릿 엔진

지정된 템플릿 양식 + 데이터 ⇒ HTML 문서를 출력하는 소프트웨어

서버 템플릿 엔진 ⇒ JSP, FreeMaker, Thymeleaf 등등

서버에서 Java 코드로 문자열(자바스크립트) 만든 후 브라우저로 전달
해당 문자열(자바스크립트)는 브라우저에서 처리

클라이언트 템플릿 엔진 ⇒ 리엑트, 뷰

자바스크립트

보통 웹페이지에서 구동한다.
물론 서버에서 굴릴 수 있게 하는 기술이 있다.
- 이를 서버사이드 렌더링이라고 함.
- 단, 여기서는 소개하지 않음

머스테시란?

다양한 서버 템플릿 엔진

JSP ⇒ 별로임.
FreeMaker ⇒ 너무 과하다.
Thymeleaf ⇒ 문법이 어렵다.

머스테시의 장점

심플한 문법
view와 서버의 분리
하나의 문법, client/server 모두 지원.

머스테시는 인텔리제이 플러그인 스토어에서 설치하면 된다.

4.2 기본 페이지 만들기

`build.gradle` 에 `mustache` 등록하기

코드

java

dependencies {
    // 1장
    implementation('org.springframework.boot:spring-boot-starter-web')
    testImplementation('org.springframework.boot:spring-boot-starter-test')

    // 2.3장 롬북
    // 2.4장 롬북 일부 수정
    annotationProcessor 'org.projectlombok:lombok'
    implementation 'org.projectlombok:lombok'
    testAnnotationProcessor 'org.projectlombok:lombok'
    testImplementation 'org.projectlombok:lombok'

    // 3.2장
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    implementation 'com.h2database:h2'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'

    // 4.2장
    implementation 'org.springframework.boot:spring-boot-starter-mustache'

}

기본 페이지 만들기

main/recources → 새로만들기 → 경로 → templates → index.mustache

코드

html

<!DOCTYPE>
<html>
<head>
    <title>스프링부트 웹 서비스</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
    <h1>스프링 부트로 시작하는 웹 서비스</h1>
</body>
</html>

머스테치에 URL 메핑.

Controller에서 진행
web/dto 에 IndexController 를 설치

코드

java

package org.example.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {
    @GetMapping("/")
    public String index() {
        return "index";
    }

}

test : IndexControllerTest 만들어보기

코드

html

<!DOCTYPE>
<html>
<head>
    <title>스프링부트 웹 서비스</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
    <h1>스프링부트로 시작하는 웹 서비스</h1>
</body>
</html>

4.3 게시글 등록 화면 만들기

부트스트랩을 이용해 화면 만들기
1. 외부 CDN을 이용한 방법
2. 직접 라이브러리를 받아서 사용하는 방법
책에서는 1번방법을 사용했음.

2개의 라이브러리 부트스트랩과 제이쿼리를 사용
단, 바로 추가하지 않고 분리해서 추가. (레이아웃 방식)

코드

footer.mustache

html

<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>

<!--index.js 추가-->
<script src="/js/app/index.js"></script>
</body>
</html>

header.mustache

java

<!DOCTYPE HTML>
<html>
<head>
    <title>스프링부트 웹서비스</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>

`index.mustache` 파일 변경

코드

html

{{>layout/header}}

    <h1>스프링부트로 시작하는 웹 서비스 Ver.2</h1>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
                {{#userName}}
                    Logged in as: <span id="user">{{userName}}</span>
                    <a href="/logout" class="btn btn-info active" role="button">Logout</a>
                {{/userName}}
                {{^userName}}
                    <a href="/oauth2/authorization/google" class="btn btn-success active" role="button">Google Login</a>
                    <a href="/oauth2/authorization/naver" class="btn btn-secondary active" role="button">Naver Login</a>
                {{/userName}}
            </div>
        </div>
        <br>
        <!-- 목록 출력 영역 -->
        <table class="table table-horizontal table-bordered">
            <thead class="thead-strong">
            <tr>
                <th>게시글번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>최종수정일</th>
            </tr>
            </thead>
            <tbody id="tbody">
            {{#posts}}
                <tr>
                    <td>{{id}}</td>
                    <td><a href="/posts/update/{{id}}">{{title}}</a></td>
                    <td>{{author}}</td>
                    <td>{{modifiedDate}}</td>
                </tr>
            {{/posts}}
            </tbody>
        </table>
    </div>

{{>layout/footer}}

`IndexController` 파일 변경

코드

html

<!DOCTYPE>
<html>
<head>
    <title>스프링부트 웹 서비스</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
    <h1>스프링 부트로 시작하는 웹 서비스</h1>
</body>
</html>

`posts-save.mustache` 파일 생성

코드

html

{{>layout/header}}

<h1>게시글 등록</h1>

<div class="col-md-12">
    <div class="col-md-4">
        <form>
            <div class="form-group">
                <label for="title">제목</label>
                <input type="text" class="form-control" id="title" placeholder="제목을 입력하세요">
            </div>
            <div class="form-group">
                <label for="author"> 작성자 </label>
                <input type="text" class="form-control" id="author" placeholder="작성자를 입력하세요">
            </div>
            <div class="form-group">
                <label for="content"> 내용 </label>
                <textarea class="form-control" id="content" placeholder="내용을 입력하세요"></textarea>
            </div>
        </form>
        <a href="/" role="button" class="btn btn-secondary">취소</a>
        <button type="button" class="btn btn-primary" id="btn-save">등록</button>
    </div>
</div>

{{>layout/footer}}

test: 실제 웹 페이지 보기

application 클래스에서 main 메서드 실행
localhost:8080/ 으로 접근

단, 등록버튼은 기능이 없다.

등록버튼 기능 넣기

index.js 파일을 생성한다.

코드

javascript

var main = {
    init : function () {
        var _this = this;
        $('#btn-save').on('click', function () {
            _this.save();
        });

        $('#btn-update').on('click', function () {
            _this.update();
        });

        $('#btn-delete').on('click', function () {
            _this.delete();
        });
    },
    save : function () {
        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));
        });
    },
    update : function () {
        var data = {
            title: $('#title').val(),
            content: $('#content').val()
        };

        var id = $('#id').val();

        $.ajax({
            type: 'PUT',
            url: '/api/v1/posts/'+id,
            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));
        });
    },
    delete : function () {
        var id = $('#id').val();

        $.ajax({
            type: 'DELETE',
            url: '/api/v1/posts/'+id,
            dataType: 'json',
            contentType:'application/json; charset=utf-8'
        }).done(function() {
            alert('글이 삭제되었습니다.');
            window.location.href = '/';
        }).fail(function (error) {
            alert(JSON.stringify(error));
        });
    }

};

main.init();

footer.mustache 코드를 다시 한번 바꾼다.

코드

html

<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>

<!--index.js 추가-->
<script src="/js/app/index.js"></script>
</body>
</html>

test : 글 등록 확인하기

localhost:8080/ 으로 접근
- 글을 실제로 올려본다
localhost:8080/h2-console 으로 접근

select * from posts쳐서 쿼리 확인

★ 에러 확인

글 등록이 안될 경우 ⇒ F12 눌러서 오류 확인하기

다음과 같은 에러가 뜰 경우:

Failed to load resource: the server responded with a status 
of 404 ()

네트워크를 확인해 본다. 잘 보면 코드를 볼 수 있는 창이 있다.

보통 이런 경우, 경로가 잘못 되었을 가능성이 굉장히 높다.
footer.mustache 코드를 다시 수정하자.
static.js.app 경로를 다시 한번 설정해 보는 것도 좋다.

4.4 전체 조회화면

index.mustache의 UI 변경

코드

html

<!DOCTYPE>
<html>
<head>
    <title>스프링부트 웹 서비스</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
    <h1>스프링 부트로 시작하는 웹 서비스</h1>
</body>
</html>

`Controller, Service, Repository` 코드 변경

먼저 PostsRepository 인터페이스에 쿼리를 추가한다.

코드

java

package org.example.domain.posts;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

import java.util.List;

// 3.2장
public interface PostsRepository extends JpaRepository<Posts, Long> {
    // 4.4장
    @Query("SELECT p FROM Posts p ORDER BY p.id DESC")
    List<Posts> findAllDesc();
}

PostsService 에 코드 추가

코드

java

// 3.4장 등록 파트
@RequiredArgsConstructor
@Service
public class PostsService {
    private final PostsRepository postsRepository;

    @Transactional
    public Long save(PostsSaveRequestDto requestDto) {
        return postsRepository.save(requestDto.toEntity()).getId();
    }

		// 3.4장 수정 & 삭제 파트
    @Transactional
    public Long update(Long id, PostsUpdateRequestDto requestDto) {
        Posts posts = postsRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("해당 게시글이 없습니다. id=" + id));
        posts.update(requestDto.getTitle(), requestDto.getContent());
        return id;
    }

    public PostsResponseDto findById(Long id) {
        Posts entity = postsRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("해당 게시글이 없습니다. id=" + id));
        return new PostsResponseDto(entity);
    }

		// 4.4장
    @Transactional(readOnly = true)
    public List<PostsListResponseDto> findAllDesc(){
        return postsRepository.findAllDesc().stream()
                .map(PostsListResponseDto::new)
                .collect(Collectors.toList());
    }

}

indexController 클래스 index 메소드에 코드 추가

코드

java

package org.example.web;

import lombok.RequiredArgsConstructor;
import org.example.service.posts.PostsService;
import org.example.web.dto.PostsResponseDto;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

// 4.2장
@RequiredArgsConstructor // 4.4장에서 추가
@Controller
public class IndexController {
    private final PostsService postsService; // 4.4장에서 추가

    @GetMapping("/")
    public String index(Model model) { // 4.4장 추가
        model.addAttribute("posts", postsService.findAllDesc()); // 4.4장 추가
        return "index";
    }

    // 4.3장
    @GetMapping("/posts/save")
    public String postsSave() {
        return "posts-save";
    }
}

4.5 수정, 삭제 화면

게시글 수정

먼저 posts-update.mustache 파일을 수정한다

코드

html

{{>layout/header}}

<h1>게시글 수정</h1>

<div class="col-md-12">
    <div class="col-md-4">
        <form>
            <div class="form-group">
                <label for="title">글 번호</label>
                <input type="text" class="form-control" id="id" value="{{post.id}}" readonly>
            </div>
            <div class="form-group">
                <label for="title">제목</label>
                <input type="text" class="form-control" id="title" value="{{post.title}}">
            </div>
            <div class="form-group">
                <label for="author"> 작성자 </label>
                <input type="text" class="form-control" id="author" value="{{post.author}}" readonly>
            </div>
            <div class="form-group">
                <label for="content"> 내용 </label>
                <textarea class="form-control" id="content">{{post.content}}</textarea>
            </div>
        </form>
        <a href="/" role="button" class="btn btn-secondary">취소</a>
        <button type="button" class="btn btn-primary" id="btn-update">수정 완료</button>
        <button type="button" class="btn btn-danger" id="btn-delete">삭제</button>
    </div>
</div>

{{>layout/footer}}

index.js에도 업데이트 버튼 추가

코드

javascript

var main = {
    init : function () {
        var _this = this;
        $('#btn-save').on('click', function () {
            _this.save();
        });

        $('#btn-update').on('click', function () {
            _this.update();
        });

        $('#btn-delete').on('click', function () {
            _this.delete();
        });
    },
    save : function () {
        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));
        });
    },

    /* update 기능 : 4.5장 추가 */
    update : function () {
        var data = {
            title: $('#title').val(),
            content: $('#content').val()
        };

        var id = $('#id').val();

        $.ajax({
            type: 'PUT',
            url: '/api/v1/posts/'+id,
            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));
        });
    },


    delete : function () {
        var id = $('#id').val();

        $.ajax({
            type: 'DELETE',
            url: '/api/v1/posts/'+id,
            dataType: 'json',
            contentType:'application/json; charset=utf-8'
        }).done(function() {
            alert('글이 삭제되었습니다.');
            window.location.href = '/';
        }).fail(function (error) {
            alert(JSON.stringify(error));
        });
    }

};

main.init();

index.mustache 코드 수정

코드

html

{{>layout/header}}

<h1>스프링부트로 시작하는 웹 서비스 Ver.2</h1>
<div class="col-md-12">
    <div class="row">
        <div class="col-md-6">
            <a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
            {{#userName}}
                Logged in as: <span id="user">{{userName}}</span>
                <a href="/logout" class="btn btn-info active" role="button">Logout</a>
            {{/userName}}
            {{^userName}}
                <a href="/oauth2/authorization/google" class="btn btn-success active" role="button">Google Login</a>
                <a href="/oauth2/authorization/naver" class="btn btn-secondary active" role="button">Naver Login</a>
            {{/userName}}
        </div>
    </div>
    <br>
    <!-- 목록 출력 영역 -->
    <table class="table table-horizontal table-bordered">
        <thead class="thead-strong">
        <tr>
            <th>게시글번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>최종수정일</th>
        </tr>
        </thead>
        <tbody id="tbody">
        {{#posts}}
            <tr>
                <td>{{id}}</td>
                <td><a href="/posts/update/{{id}}">{{title}}</a></td>
                <td>{{author}}</td>
                <td>{{modifiedDate}}</td>
            </tr>
        {{/posts}}
        </tbody>
    </table>
</div>

{{>layout/footer}}

indexController 파일 수정

코드

java

// 4.2장
@RequiredArgsConstructor // 4.4장에서 추가
@Controller
public class IndexController {
    private final PostsService postsService; // 4.4장에서 추가

    @GetMapping("/")
    public String index(Model model) { // 4.4장 추가
        model.addAttribute("posts", postsService.findAllDesc()); // 4.4장 추가
        return "index";
    }

    // 4.3장
    @GetMapping("/posts/save")
    public String postsSave() {
        return "posts-save";
    }

    // 4.5장
    @GetMapping("/posts/update/{id}")
    public String postsUpdate(@PathVariable Long id, Model model) {
        PostsResponseDto dto = postsService.findById(id);
        model.addAttribute("post", dto);

        return "posts-update";
    }
}

게시글 삭제

먼저 posts-update.mustache 파일을 수정한다

코드

html

{{>layout/header}}

<h1>스프링부트로 시작하는 웹 서비스 Ver.2</h1>
<div class="col-md-12">
    <div class="row">
        <div class="col-md-6">
            <a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
            {{#userName}}
                Logged in as: <span id="user">{{userName}}</span>
                <a href="/logout" class="btn btn-info active" role="button">Logout</a>
            {{/userName}}
            {{^userName}}
                <a href="/oauth2/authorization/google" class="btn btn-success active" role="button">Google Login</a>
                <a href="/oauth2/authorization/naver" class="btn btn-secondary active" role="button">Naver Login</a>
            {{/userName}}
        </div>
    </div>
    <br>
    <!-- 목록 출력 영역 -->
    <table class="table table-horizontal table-bordered">
        <thead class="thead-strong">
        <tr>
            <th>게시글번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>최종수정일</th>
        </tr>
        </thead>
        <tbody id="tbody">
        {{#posts}}
            <tr>
                <td>{{id}}</td>
                <td><a href="/posts/update/{{id}}">{{title}}</a></td>
                <td>{{author}}</td>
                <td>{{modifiedDate}}</td>
            </tr>
        {{/posts}}
        </tbody>
    </table>
</div>

{{>layout/footer}}

index.js에도 삭제 버튼 추가

코드

javascript

var main = {
    init : function () {
        var _this = this;
        $('#btn-save').on('click', function () {
            _this.save();
        });

        $('#btn-update').on('click', function () {
            _this.update();
        });

        $('#btn-delete').on('click', function () {
            _this.delete();
        });
    },
    save : function () {
        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));
        });
    },

    /* update 기능 : 4.5장 추가 */
    update : function () {
        var data = {
            title: $('#title').val(),
            content: $('#content').val()
        };

        var id = $('#id').val();

        $.ajax({
            type: 'PUT',
            url: '/api/v1/posts/'+id,
            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));
        });
    },

		/*delete 기능 : 4.5장 추가*/
    delete : function () {
        var id = $('#id').val();

        $.ajax({
            type: 'DELETE',
            url: '/api/v1/posts/'+id,
            dataType: 'json',
            contentType:'application/json; charset=utf-8'
        }).done(function() {
            alert('글이 삭제되었습니다.');
            window.location.href = '/';
        }).fail(function (error) {
            alert(JSON.stringify(error));
        });
    }

};

main.init();

삭제 api 만들기

PostsService 코드 수정 : Service

코드

java

import java.util.List;
import java.util.stream.Collectors;

// 3.4장 등록 파트
@RequiredArgsConstructor
@Service
public class PostsService {
    private final PostsRepository postsRepository;

    @Transactional
    public Long save(PostsSaveRequestDto requestDto) {
        return postsRepository.save(requestDto.toEntity()).getId();
    }

    // 3.4장 수정 & 삭제 파트
    @Transactional
    public Long update(Long id, PostsUpdateRequestDto requestDto) {
        Posts posts = postsRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("해당 게시글이 없습니다. id=" + id));
        posts.update(requestDto.getTitle(), requestDto.getContent());
        return id;
    }

    public PostsResponseDto findById(Long id) {
        Posts entity = postsRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("해당 게시글이 없습니다. id=" + id));
        return new PostsResponseDto(entity);
    }

    // 4.4장 추가
    @Transactional(readOnly = true)
    public List<PostsListResponseDto> findAllDesc(){
        return postsRepository.findAllDesc().stream()
                .map(PostsListResponseDto::new)
                .collect(Collectors.toList());
    }

    // 4.5장 추가
    @Transactional
    public void delete (Long id) {
        Posts posts = postsRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("해당 게시글이 없습니다. id" + id));

        postsRepository.delete(posts);
    }

}

PostsApiController 코드 수정

코드

java

// 3.4장 등록 파트
@RequiredArgsConstructor
@RestController
public class PostsApiController {

    private final PostsService postsService;

    @PostMapping("/api/v1/posts")
    public Long save(@RequestBody PostsSaveRequestDto requestDto) {
        return postsService.save(requestDto);
    }

    // 3.4장 수정 & 삭제
    @PutMapping("/api/v1/posts/{id}")
    public Long update(@PathVariable Long id, @RequestBody PostsUpdateRequestDto requestDto) {
        return postsService.update(id, requestDto);
    }

    @GetMapping("/api/v1/posts/{id}")
    public PostsResponseDto findById (@PathVariable Long id) {
        return postsService.findById(id);
    }
    
    // 4.5장
    @DeleteMapping("/api/v1/posts/{id}")
    public Long delete(@PathVariable Long id) {
        postsService.delete(id);
        return id;
    }
    
}

4. 화면 구성하기

4.1 서버 템플릿 엔진과 머스테시

머스테시란?

4.2 기본 페이지 만들기

`build.gradle` 에 `mustache` 등록하기

기본 페이지 만들기

4.3 게시글 등록 화면 만들기

footer & header

`index.mustache` 파일 변경

`IndexController` 파일 변경

`posts-save.mustache` 파일 생성

test: 실제 웹 페이지 보기

등록버튼 기능 넣기

test : 글 등록 확인하기

★ 에러 확인

4.4 전체 조회화면

index.mustache의 UI 변경

`Controller, Service, Repository` 코드 변경

4.5 수정, 삭제 화면

게시글 수정

게시글 삭제

삭제 api 만들기

화면 설정

4.1 서버 템플릿 엔진과 머스테시

머스테시란?

4.2 기본 페이지 만들기

build.gradle 에 mustache 등록하기

기본 페이지 만들기

4.3 게시글 등록 화면 만들기

footer & header

index.mustache 파일 변경

IndexController 파일 변경

posts-save.mustache 파일 생성

test: 실제 웹 페이지 보기

등록버튼 기능 넣기

test : 글 등록 확인하기

★ 에러 확인

4.4 전체 조회화면

index.mustache의 UI 변경

Controller, Service, Repository 코드 변경

4.5 수정, 삭제 화면

게시글 수정

게시글 삭제

삭제 api 만들기

`build.gradle` 에 `mustache` 등록하기

`index.mustache` 파일 변경

`IndexController` 파일 변경

`posts-save.mustache` 파일 생성

`Controller, Service, Repository` 코드 변경