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 추가.
http://localhost:8080/posts/save
B.U.T 아직 글 등록 기능은 구현되지 않았음.
src/main/resource에 static/js/app디렉토리를 만들자.
그리고 index.js 생성.
footer.mustache에 index.js 불러오는거 추가!
스프링 부트는 기본적으로 src/main/resources/static에 위치한 js, css, 이미지 등의 정적 파일들은 URL에서 ‘/’로 설정된다.
글 등록하면 실제로 DB에 글 저장되는 것도 확인 가능~
{{#posts}} : posts 라는 List 순회
{{id}} 등의 {{변수명}} : List에서 뽑아낸 객체의 필드 사용
Controller, Service, Repository 코드 작성하기.
코드 추가
SpringDAtaJpa에서 제공하지 않는 메소드는 @Query로 볼 수 있듯 쿼리로 작성 가능하다.
(규모 있는 프로젝트에서 데이터 조회는 조회를 위한 프레임워크 추가로 사용한다. querydsl, jooq, MyBatis 등.. 그 중 querydsl을 추천한다고..)
코드 추가
새로 작성
코드 변경
서버 템플릿 엔진에서 사용할 수 있는 객체를 저장할 수 있다.
postsService.findeAllDesc()로 가져온 결과를 posts로 index에 전달
코드 추가
$(‘#btn-update’).on(‘click’) : btn-update라는 id 가징 HTML엘리먼트에 click 이벤트 발생하면 update function 실행하도롣 이벤트 등록
type : ‘PUT’ : PUT 메소드 선택, API 에서 @PutMapping으로 선언했기 떄문에 PUT을 사용해야 한다.
url : ‘/api/v1/posts/’+id : 어느 게시뭉 수정할지 URL PATH로 구분 위해
코드 추가
코드 추가
JpaRepository에서 이미 delete 메소드 지원함