[Spring Boot] 3주차 - 머스테치로 화면 구성하기

CH4. 머스테치로 화면 구성하기

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

• 템플릿 엔진 : 지정된 템플릿 양식과 데이터가 합쳐져 HTML문서 출력하는 SW ex) React의 View파일들
• 서버 템플릿 엔진 : 서버에서 구동. 서버에서 자바로 문자열 만들고 HTML로 변환해서 브라우저로 전달. js - 단순한 문자열
• 클라 템플릿 엔진 : 브라우저에서 화면 생성. 서버에서 json or xml 형식 데이터만 전달. 클라이언트에서 조립.
• 머스테치 : 수많은 언어를 지원하는 가장 심플한 템플릿 엔진. 자바에서는 서버 템플릿 엔진으로

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

🌱 2. 기본 페이지 만들기

• 머스테치 파일 기본 위치 : src/main/resources/templates
  머스테치 스타터 → 경로와 확장자는 자동 지정됨
• Controller에 URL mapping 하기 (IndexController.java)

🌱 3. 게시글 등록 화면 만들기

• FE 라이브러리 사용하는 방법 :
  1. 외부 CDN 사용 4
  2. 직접 라이브러리 받아서 사용
• 레이아웃 방식으로 부트스트랩과 제이쿼리 index.mustache에 추가
  → 공통 영역을 별도의 파일로 분리하여 필요할 때 가져다 쓰는 방식
• HTML은 위에서부터 코드가 진행됨. css를 윗 부분에, js는 아래에 쓰는 것이 좋음
• 게시글을 새로 쓰는 페이지인 posts-save.mustache 파일 만들기
• 버튼에 기능을 주기 위해 API 호출하는 js파일 생성 index.js
• index.js 에서 변수 속성으로 함수 추가한 이유 :
  → 브라우저의 scope는 공용공간으로, 다른 js파일의 이름이 동일한 함수가 있다면 덮어씌우기 때문에 index.js만의 scope(유효범위)를 만든 것.

🌱 4. 전체 조회 화면 만들기

머스테치 문법

1. {{#posts}} posts 리스트 순회. for문과 동일하다고 생각
2. {{변수명}} 객체의 필드 사용

• IndexController에서 쓰이는 Model :
  postsService.findAllDesc() 로 가져온 결과 posts로 index.mustache에 전달

🌱 5. 게시글 수정, 삭제 화면 만들기

• REST에서 CRUD HTTP Method에서 매핑
  1. Create → POST (@PostMapping)
  2. Read → GET (@GetMapping)
  3. Update → PUT (@PutMapping)
  4. Delete → DELETE (@DelteMapping)
• index.js 에서 버튼 등록하기

$('#btn-name').on('click', function(){
    처리할 함수 ;
});