본 글은 Youtube - 홍팍님의 강의를 참고하여 작성하였습니다.
[View Templates란? ]
로그인을 하여 사이트에 접속하면 유저마다 다양한 화면이 제공되어야 하는 곳이 있다.
네이버 로그인 화면을 예로 들자면
- {{ 회원 프로필 사진 }}
- {{ 회원명 }} +님
- {{ 메일 갯수 }}
- {{ 쪽지 갯수 }}
- {{ 알림 갯수 }}
...
등 회원에 따라 각각의 정보를 나타낼 부분이 존재합니다.
그렇다고 회원들의 수 마다 .html 파일을 만들어서 회원에 맞는 .html 파일을 보여준다는 것은 상당히 비효율적인 방법입니다.
이를 보완하기 위해 나온 것이 View Templates입니다.
뷰 템플릿이란 화면을 담당하는 기술입니다.
웹페이지를 하나의 틀로 만들고 각각 값에 변수를 삽입하게 됩니다.
틀이 되는 페이지가 변수 값에 따라 여러 화면이 됩니다.
( 설치 과정에 Dependencies에 추가한 Mustache가 뷰 템플릿을 만드는 도구입니다. )
[ View Templates의 구조 ]
[ MVC 패턴 ]
[ Model ]
데이터를 관리합니다.
[ View ]
[ Mustache ]
- Help - Find Action - Plugins 검색
- Preferences... - plugins
Handlebars/Mustache를 설치
프로젝트에 📁 templates 폴더에 인사하기 위한 프로젝트를 위해 greeting.mustache를 생성해주겠습니다.
📄 mustache 파일에 doc를 입력하고
Tab키를 눌러주면 자동으로 기본 HTML코드가 완성이 됩니다.
### [ Controller ]
logic 처리를 담당합니다.
[ Controller 만들기 ]
📁 프로젝트 - 📁 main -📁 java - 📦 패키지에 FirstController라는 자바 파일을 만들어 주었습니다.
다음과 같이 작성해줍니다.
이 클래스가 컨트럴러임을 선언해주고
@getMapping 을 통해 URL을 요청해줍니다.
@Contoller public class ...{ @getMapping("/요청 URL") public Stirng 메서드명() { return "응답 페이지 파일명"; } }
@getMapping에 들어갈 URL 문자열이 사이트 URI 뒤에 붙을 문자열이 됩니다.
[ Mustache ]
여기서 우리는 mustache 파일에
회원 이름을 상황에 따라 변화시키고 싶다면 Mustache 문법을 사용합니다.
문법은
{{ 변수명 }} 안에 값은 상황에 따라 바뀔 수 있게 됩니다.
그 후 모델을 추가해줍니다.
컨트롤러 파일 파라미터에 모델 객체를 추가하여 import해줍니다.
그 이후 모델 객체를 이용하여 해당 변수에 접근합니다.
model.addAtrribute("변수명", "값");
