2020/06/10 Medium 블로그에 작성한 내용 이사🚗
🔊서버 템플릿 엔진과 머스테치 소개
서버 템플릿 엔진
JSP, Freemarker 등
서버에서 Java 코드로 문자열을 만든 뒤 HTML로 변환하여 브라우저로 전달
클라이언트 템플릿 엔진
React, Vue 등
작성된 코드는 서버가 아닌 브라우저에서 실행됨
그래서 서버에서는 Json이나 xml 형식의 데이터만 전달하고 클라이언트에서 조립
🔊 머스테치란?
수많은 언어를 지원하는 가장 심플한 템플릿 엔진
문법이 다른 템플릿 엔진보다 심플
로직 코드를 사용할 수 없어 View와 서버의 역할을 명확히 분리
js와 java 2가지가 다 있어 하나의 문법으로 클라이언트/서버 템플릿 모두 사용 가능
이제 이 머스테치에 URL 매핑할거임. URL 매핑을 Controller에서 진행한다.
머스테치 스타터 때문에 문자열 반환하면 앞에는 경로, 뒤에는 파일 확장자가 자동으로 지정된다.
🔊 게시글 등록 화면 만들기
src/main/resources/templates 디렉토리에 layout 디렉토리 추가함.
footer.mastache와 header.mustache 추가함.
{{>}}는 현재 머스테치 파일 기준으로 다른 파일 가져오는 것.
IndexController에 글 등록 주소에 해당하는 Controller 추가.
고러면 posts-save.mustache도 만들어줘야겠쥬?
http://localhost:8080/posts/save
B.U.T 아직 글 등록 기능은 구현되지 않았음.
src/main/resource에 static/js/app디렉토리를 만들자.
그리고 index.js 생성.
Q. 여기서 굳이 main 변수의 속성으로 function을 추가한 이유?
A. 브라우저의 scope는 공용 공간으로 쓰이는데 나중에 로딩된 js의 init, save가 먼저 로딩된 js의 function을 덮어쓰게 된다. 그래서 index.js만의 유효 범위를 만들기 위해 그랬음.
footer.mustache에 index.js 불러오는거 추가!
스프링 부트는 기본적으로 src/main/resources/static에 위치한 js, css, 이미지 등의 정적 파일들은 URL에서 ‘/’로 설정된다.
글 등록하면 실제로 DB에 글 저장되는 것도 확인 가능~
🔊 전체 조회 화면 만들기
{{#posts}} : posts 라는 List 순회
{{id}} 등의 {{변수명}} : List에서 뽑아낸 객체의 필드 사용
Controller, Service, Repository 코드 작성하기.
1. PostsRepository
코드 추가SpringDAtaJpa에서 제공하지 않는 메소드는 @Query로 볼 수 있듯 쿼리로 작성 가능하다.
(규모 있는 프로젝트에서 데이터 조회는 조회를 위한 프레임워크 추가로 사용한다. querydsl, jooq, MyBatis 등.. 그 중 querydsl을 추천한다고..)
2. PostsService
코드 추가- readOnly를 주면 트랜잭션 범위는 유지하면서 조회 기능만 남겨둘 수 있다.
- 람다식 : .map(PostsListResponseDto::new) = .map(posts -> new PostsListResponseDto(posts))
- postsRepository 결과로 넘어온 Posts의 Stream을 map을 통해 PostsListResponseDto 변환 -> List로 반환하는 메소드
3. PostsListResponseDto
새로 작성4. IndexController
코드 변경Model
서버 템플릿 엔진에서 사용할 수 있는 객체를 저장할 수 있다.
postsService.findeAllDesc()로 가져온 결과를 posts로 index에 전달
🔊 게시글 수정, 삭제 화면 만들기
index.js
코드 추가$(‘#btn-update’).on(‘click’) : btn-update라는 id 가징 HTML엘리먼트에 click 이벤트 발생하면 update function 실행하도롣 이벤트 등록
type : ‘PUT’ : PUT 메소드 선택, API 에서 @PutMapping으로 선언했기 떄문에 PUT을 사용해야 한다.
url : ‘/api/v1/posts/’+id : 어느 게시뭉 수정할지 URL PATH로 구분 위해
IndexController
코드 추가PostsService
코드 추가JpaRepository에서 이미 delete 메소드 지원함
