본문 바로가기

머스테치3

13. 전체 조회 화면 해당 게시물들은 이동욱 저자님의 "스프링 부트와 AWS로 혼자 구현하는 웹 서비스"를 공부하며 기록한 것입니다. 앞선 게시물에서는 게시글 등록 화면과 실제로 작동하도록 index.js까지 완성하였다. 이번 게시물에서는 index.mustache에서 저장되어있는 게시물 목록을 볼 수 있도록 구현할 계획이다. 우선 index.mustache를 변경한다. 기존의 index.mustache의 글 등록 버튼을 포함한 div 아래 작성한다. 여기서 머스테치의 문법이 처음으로 등장한다.(레이아웃 제외하고) 1) {{#posts}} - 이는 마치 Java의 for문과 동일하게 생각하면 되며, posts라는 list를 순회한다. 2) {{id}} 등등 {{변수명}} - List에서 뽑아낸 객체의 필드를 사용한다. ind.. 2021. 7. 21.
11. 머스테치 활용해 기본 페이지 생성, 테스트 코드 해당 게시물들은 이동욱 저자님의 "스프링 부트와 AWS로 혼자 구현하는 웹 서비스"를 공부하며 기록한 것입니다. 우선 build.gradle에 머스테치 스타터 의존성을 등록한다. implementation 'org.springframework.boot:spring-boot-starter-mustache' 머스테치는 스프링부트에서 공식 지원하는 템플릿 엔진이며, 추가 설정이 필요 없으며 스프링 부트의 버전 또한 신경쓰지 않아도 된다. 머스테치 파일의 기본 위치는 src/main/resources/templates 이다. 이곳에 머스테치 파일을 두면, 스프링 부트에서 자동으로 인식하여 로딩하게 된다. 우선 첫 페이지 index.mustache를 위의 위치에 생성한다. 이 머스테치에 URL을 매칭하기 위해서는.. 2021. 7. 20.
10. 서버/클라이언트 템플릿 엔진의 차이, 머스테치 해당 게시물들은 이동욱 저자님의 "스프링 부트와 AWS로 혼자 구현하는 웹 서비스"를 공부하며 기록한 것입니다. 이번 게시물에서는 템플릿 엔진의 종류 및 서버 템플릿 엔진과 클라이언트 템플릿 엔진의 타이점, 그리고 이 책에서 머스테치를 사용하게 된 이유에 대해 나열할 것이다. 1. 템플릿 엔진 우선 웹 개발에 있어 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML문서를 출력하는 소프트웨어를 이야기한다. 쉽게 이야기해서, 웹사이트 화면을 어떤 형태로 만들지 도와주는 양식이라고 생각하면 된다. 여기에는 JSP, Freemarker 부터 시작해서, 리액트, 뷰와 같은 View 파일이 있다. 모두 지정되어있는 템플릿과 데이터를 이용하여 HTML을 생성하는 템플릿 엔진이지만, 전자는 서버 템플릿 엔.. 2021. 7. 20.