MVC 패턴대로 뷰 템플릿 페이지 만들기

MVC 패턴이란?

 

M - 모델은 데이터를 관리하는 역할

V - 뷰는 웹페이지를 화면에 보여주는 것

C - 컨트롤러는 클라이언트의 요청에 따라 서버에서 처리하는 역할

 

위 처럼 역할을 나누는 기법을 MVC 패턴이라고 합니다.

 

뷰 템플릿 페이지 만들기

• src > main > resources > templates 디렉터리로 이동후 파일을 만들어주시면 됩니다.
• 파일을 만들때 greetings.mustache로 만들어주시면 됩니다.
• 위에서 mustache 확장자는 뷰 템플릿을 만드는 도구, 즉 뷰 템플릿 엔진을 의미합니다.
• 머스테치 파일을 만들면 머스테치 파일을 지원하는 플러그인을 발견했다고 나오는데 설치해주시면 됩니다.

 

머스테치 파일을 지원하는 플러그인

 

만든 후에 제일 윗줄에서 doc를 입력후 tab 버튼을 눌러주시면 기본 HTML 코드가 자동으로 작성됩니다.

 

 

이제 모델과 컨트롤러를 만들어주시면 됩니다.

 

컨트롤러 만들고 실행하기

com.example.firstproject에서 마우스 오른쪽 버튼을 누르고 메뉴에서 NEW-> package를 선택하시면 됩니다.

패키지명은 controller로 하겠습니다. (com.example.firstproject.controller)

그후 controller 패키지에서 자바클래스로 FirstController 를 만들어줍니다.

(일반적으로 컨트롤러 이름은 ???Controller 로 짓는다고 합니다.)

 

만든후에 이 클래스가 controller 임을 선언하는 @Controller 어노테이션을 작성하고

반환 타입이 문자열인 niceToMeetYou() 메서드를 선언해줍니다.

(여기서 @Controller를 입력하시면 자동으로 임포트가 됩니다.)

 

 

 

 

예시

예시로 niceToMeetYou 메서드로 greethings.mustache 페이지를 반환해보겠습니다.

return "" 부분을 return "greethings" 로 바꿔주시면 됩니다.

 

그리고 페이지(greethings.mustache)를 반환해달라고 하는 URL 요청을 접수를 해주시면 됩니다.

메서드 앞에 @GetMapping()을 추가해주시기만 하면 됩니다.(괄호 안은 URL 주소인 "/hello"를 집어 넣어줍니다.)

 

 

그리고 변경한 코드를 반영하기 위해 재시작을 해주시면 됩니다.

만약 실행결과가 위처럼 나오면 한글 깨짐 현상이 발생한 것입니다.

이때는 프로젝트에

src > main > resources > application.properties 파일을 열어 다음 코드를 추가한후 재실행 해주시면 됩니다.

server.servlet.encoding.force=true

추가후 재시작 화면

 

 

 

 

알아두기

---

어노테이션

• 어노테이션은 소스코드에 추가하여 사용하는 메타 데이터의 일종입니다.
• 메타 데이터는 프로그램에서 처리해야 할 데이터가 아니라 컴파일 실행 과정에서
  코드를 어떻게 처리해야 할지 알려주는 추가 정보입니다.
• 앞에 @를 붙여 사용합니다.