Chapter04.
머스테치(Mustache)로 화면 구성하기

학습 목표

• 서버 템플릿 엔진과 클라이언트 템플릿 엔진의 차이는?
• JSP가 아닌 mustache를 선택한 이유는?
• mustache를 통한 CRUD 화면 개발

---

chap4-1. 서버 템플릿 엔진과 머스테치 소개

🧾 서버 템플릿 엔진이란?

• 템플릿 엔진 ? 지정된 테플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 SW를 뜻함
  - ex) JSP, Freemarker, React, Vue ...

  
  

• 템플릿 엔진	종류	내용
  서버 템플릿 엔진	JSP, Freemarker	서버에서 구동 : 서버에서 java코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달한다.
  클라이언트 템플릿 엔진	React, Vue	(SPA)브라우저에서 화면을 생성 : 서버에서는 JSON, XML 형식의 데이터만 전달하고 클라이언트에서 조립한다.

  👉 JSP는 명확하게는 서버 템플릿 엔진은 아니나, View의 역할로서만 구성할 때는 템플릿 엔진으로서 사용할 수 있음

🧾 머스테치란?

• 수많은 언어를 지원하는 가장 심플한 템플릿 엔진
  머스테치 깃허브
• java에서 사용할 땐 서버 템플릿 엔진, 자바스크립트에서 사용될 땐 클라이언트 템플릿 엔진으로 모두 사용할 수 있음
• 로직 코드 작성할 수 없으므로 View의 역할과 서버의 역할이 명확히 분리

🧾 레이아웃 방식

• 레이아웃 방식? 공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식
• jQuery와 Bootstrap 라이브러리를 추가하기 위해서 이용

   경로 : src/main/resources/template/layout
    1) header.mustache
    2) footer.mustache

🚨 오류 기록

• mustache로 만들어진 view에서 데이터를 입력받아 h2(in-memory RDB)에 등록하는 과정에서 index.js파일이 넘어오지 않았음
  

  [ 원인과 해결 ]
  👉 folder 구조를 잘못잡아서 해당 index.js파일 경로에 따라 가져오지 못하고 있었음..
  👉 나는 모르고 static.js.app구조를 resources파일 하위가 아니라, templates 하위에 넣어놨었음
  👉 아래는 제대로 된 folder구조
  

🧾 스트링 부트에서 resources폴더

• index.js 호출 경로가 위에서 보면 "/"(절대경로)로 시작함.
• 스트링 부트에서는 기본적으로 src/main/resource/static에 위치한 js, css, img등 정적 파일들은 URL에서 /로 설정
• 그래서 호출할 때 "/"절대경로로 시작하면 파일위치에 맞게 호출이 가능함.

---

chap4-2. CRUD 화면 개발

🧾 전체 조회 화면 만들기

• 머스테치 문법 사용
  

  문법	설명
  {{#posts}}	- posts라는 List를 순회 - java에서의 for문과 동일하게 생각
  {{id}}, {{변수명}}	- List에서 뽑아낸 객체의 필드를 사용

• 규모가 있는 프로젝트에서는 조회용 프레임 워크를 따로 사용함
  - querydsl, joop, MybaBatis 등이 있음
  - 등록/수정/삭제 등은 SpringDataJpa를 통해 진행하고, 위의 프레임워크로 조회를 함
  
  
• 저자는 querydsl 프레임워크를 추천
  1. 타입 안정성 보장
  2. 국내 많은 회사에서 사용
  3. 레퍼런스가 많음

🧾 수정, 삭제 화면 만들기

• HTTP Method

  CRUD	HTTP Method
  생성 : Create	POST
  읽기 : Read	GET
  수정 : Update	PUT
  삭제 : Delete	DELECT

  👉 PostsApiController에 있는 API에서 @PutMapping으로 선언했기 때문에 PUT 사용
  👉 REST규약에 맞게 설정된 것
  

🚨 오류기록

• 제목을 클릭하면 수정 page로 넘어가야 하는데 계속 "Whitelabel Error Page"가 뜸
  
  

• java에서의 오류 내용
  ERROR 33716 --- [nio-8080-exec-6] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is com.samskivert.mustache.MustacheException$Context: No method or field with name 'posts' on line 10] with root cause

  [ 원인과 해결 ]
  👉 객체명을 post가 아니라 "posts"로 보내줘야 posts-update.mustache에서 객체를 사용하는데,
       객체가 없다고 오류가 발생했던 것
  👉 addAttribte할 때 key값을 posts로 수정함..!
  

---

참고
1. 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 (이동욱)