3장에서 JPA를 활용하여 데이터를 API화, 즉 데이터 베이스를 → JSON 으로 표현하는

방법에대해 설명을 하였습니다. 이번장에서는 데이터 베이스의 데이터가

어떻게 커스텀한 View(Html)로 표현이 되는지 살펴보겠습니다.

Model(data) / View(html) / Controler(router,api) 을 분리하였다고 하여 MVC 패턴이라고도 불립니다.


View 템플릿 선택

View 템플릿 생성과정

브라우져 사이드에서 작동하는 앵귤라 JS에서 뷰를 만드는 템플릿처리 과정이지만

서버사이드(SPRING,ASP.NET,NODE.JS) 에서도 최종 뷰를 데이터바인딩 처리하여 생성하는

과정은 거의 모두 동일하다고 보시면 됩니다. 

이미 다 만들어져 고정적인 html파일을 정적 리소스라고  표현하며,

어떠한 데이터 조건에따라 html의 모습이 달라지는 케이스를 동적 리소스라고 보통 표현을 합니다.

MVC패턴에 의해 뷰가 최종만들어지는 메카니즘을 상세하게 이해하는것도 중요하지만

SPRING에서는 어떠한 지점에 코딩을 해야 이 방식을 사용할수 있는지 사용관점에서 풀어나가겠습니다.

Thmeleaf  뷰 템플릿 준비

View템플릿을 사용할때 중요한 요소가, 기존 html 원형을 유지하느냐? 아니냐? 의 차이를 아는것이 중요합니다.

Node.js의 Jade vs EJS 에서 이러한 차이점에대한 개념을 쉽게 잡을수 있을듯 보입니다.

Jade가 처음나왔을때는, 지저분한 html을 더욱더 심플하게 사용할수 있다란점에서 유행을 끄는듯보였으나

Html디자이너와 협업을하며 문제가 생기기 시작하였습니다. 변형된 html 템플릿을 디자이너가 건들수 없기때문입니다.

그래서 다시 최근의 추세는, 바인딩 처리가 어찌되었건... html의 원형을 유지하면서 동적 처리가 가능한

뷰 템플릿 엔진 사용이 권장이됩니다.


Spring에서는 Html의 원형을 유지하는 Thmeleaf View템플릿을 통해 MVC패턴을 적용해보겠습니다.


의존 라이브러리추가

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>


템플릿 경로추가

SPRING에서 템플릿 관리 경로는 , 기본적으로 resources/templates 하위입니다.


testview.html 내용

<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
</head>
<body>
    <div th:each="item : ${peopleList}">
       <p th:text="${item.name}">SomeName</p> 
       <p th:text="${item.email}">SomeEmail</p>       
    </div>
</body>
</html>

사용자정보 리스트를 받아서, 이름-이메밀 정보를 단순하게 뿌려준다라고 가정해봅시다.

반복요소는 th:each 태그를 사용하며 peopleList를 읽어 각 item이란 단일요소를 반환하게 합니다.

for( item in peopleList ) {
	console.log( item.name );
	console.log( item.email );
}


이해를 돕기위해, 스크립트 코드로 간단하게 설명하면
위와같은 루프코드가 작동되어 html 뷰코드를 완성시킵니다.


View를 갱신하는 Controler코드 작성

@Controller
@RequestMapping(path="/")	//이 클래스의 루트 Router를 설정한다.
public class UserSearchAPI {
	
	@Autowired
	private UserPageRepo userPageRepo;
	
	@GetMapping(path="/usersearch") //이 멤버함수의 하위 주소를 설정한다.
	public @ResponseBody List<User> userSearch(			
			@RequestParam String name,
			@RequestParam int pagenum,
			@RequestParam int pagesize
			
	){
		PageRequest pageReq = new PageRequest(pagenum, pagesize);
		Page<User> userPage =userPageRepo.findByNameContaining(name,pageReq);		
		return userPage.getContent();		
	}
	
	@GetMapping(path="/peopleView")
	public String  peopleView( HttpServletResponse response,HttpServletRequest request, Model model ) throws UnsupportedEncodingException {		
		PageRequest pageReq = new PageRequest(0, 10);
		Page<User> userPage =userPageRepo.findAll(pageReq);		
		// Set Model		
		model.addAttribute("peopleList", userPage.getContent() );		
		return "testview";
	}	
}

userSearch() 함수는 3장에서 이미설명된, 데이터를 검색조건에 따라 Json화하는 기능이며

peopleView() 함수는 데이터 모델링의 코드를 View페이지에 전달하는것을 구현한 내용입니다.

localhost:8080/peopleView 를 호출하면 우리가 원하는 뷰페이지가 생성될것입니다.


thmeleaf 뷰템플릿을 사용할경우 , 3가지 규칙만 알고 있으면 됩니다.

뷰 모델 설정

model.addAttribute("peopleList", userPage.getContent() );

controller에서 뷰모델에서 사용되는 이름과 데이터를 복수개로 설정해주면 됩니다.

뷰페이지 선택

return "testview";
thymeleaf을 사용시, 미리 작성된 html코드의 파일명만(pre경로,확장자빼고) 리턴을 하게 되면

알아서 지정된 경로의 view파일 (resources/templates/testview.html)을 사용하게 됩니다.

html 코드내에 모델 선택

<div th:each="item : ${peopleList}">

뷰모델에 지정된 데이터는, 위와같은 형식으로 html코드내에서 접근할수가 있습니다.

더 풍부한 표현이 필요하다면, 아래 링크를 참고합니다.

http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#order-list


작동모습

DataView

우리가가진 DB의 데이터가 자연스럽게 Html로 변환되었습니다.

하지만 디자인은 자연스럽지 못하고 투박해보입니다. 그래서 템플릿 코드는 html 태그의 원형이 유지가되는것이 중요합니다.

이것을 이쁘게 만들수 있는 Html/CSS 제작자에게 템플릿코드를 그대로 공유하면 되기 때문입니다.


다음은 Angular.JS와 JPA CRUD와 연동하여, MVC 를 실현한 예제입니다.

http://websystique.com/spring-boot/spring-boot-angularjs-spring-data-jpa-crud-app-example/





  • No labels