템플릿 엔진 : 예전에 JSP, PHP와 같이 서버에서 프로그래밍을 해서 html을 동적으로 바꿔서 내리는 것입니다.
- 템플릿 엔진의 필요성 1. 대부분 Templete Engine은 HTML에 비해 간단한 문법을 사용함으로써 코드량을 줄일 수 있습니다. 2. 데이터만 바뀌는 경우가 굉장히 많으므로 재사용성을 높일 수 있습니다. 3. 유지보수에 용이합니다.
MVC : 컨트롤러, 모델, 뷰 패턴으로 나눠서 만드는 것
View
<!-- /templates/hello-template.html 생성 -->
<html xmlns:th="http://www.thymeleaf.org">
<!-- thymeleaf 사용 -->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="'hello ' + ${name}">hello! empty</p>
<!-- thymeleaf는 "'hello ' + ${name}" 라는 값으로 치환이 된다. 실질적으로 hello! empty 값은 없어도 된다. -->
<!-- 서버 없이 HTML을 볼 때 마크업 하는 사람이 보기 위해 hello! empty라고 작성해주는 것이다. -->
</body>
</html>
Controller
// HelloController
...
@GetMapping("hello-mvc")
public String helloMvc(@RequestParam("name") String name, Model model) {
// model에 담으면 View 에서 사용
model.addAttribute("name", name);
return "hello-template";
}
...
추가 시 오류가 발생합니다.
whitelabel Error Page
WARN이 뜨면 항상 확인해야 합니다. 옆으로 스크롤을 움직여보면 오류를 확인할 수 있습니다.
Required request parameter 'name' for method parameter type String is not presen
command + p (파라미터 정보)
name에 가서 command + p (파라미터 정보 // 자주 사용합니다.) value = "name", required = true (default 값은 넣어야 합니다.) 이런 식으로 시켜도 되고 파라미터 정보를 넣어줘도 됩니다. 다시 원래의 코드로 돌아가서(Value, required 빼고 오류가 발생한 코드) http://localhost:8080/hello-mvc?name=spring! < 이렇게 입력하면?
hello spring!
파라미터를 받아온 것을 확인할 수 있습니다.
MVC, 템플릿 엔진 이미지
1.3 API
안드로이드나, 아이폰 클라이언트로 개발 시 JSON이라는 데이터 구조 포맷으로 데이터를 클라이언트에 전달하는 것을 뜻합니다. 뷰 JS나 리엑트 사용 시에도 API로 데이터만 내려주고, 화면은 클라이언트가 알아서 그리는 방식을 많이 사용합니다. 또한 서버끼리 통신할 때도 API 방식을 많이 사용합니다.
// HelloController
...
@GetMapping("hello-string")
@ResponseBody // http body부에 직접 이 내용을 넣어주겠다.
public String helloString(@RequestParam("name") String name) {
return "hello " + name;
// 파라미터에 string 이라고 넣으면 "hello string" 이라고 뜬다.
// 이 때 페이지 소스보기를 해보면 html 형식이 아니라 정말 텍스트만 뿌려주는걸 볼 수 있다.
}
...
페이지 소스 보기
2. API 방식은 데이터를 가지고 올 때 많이 사용한다. ( json 형식으로 가져오기 )
// helloController
// hello 라는 객체를 넣어보기
...
@GetMapping("hello-api")
@ResponseBody
public Hello helloApi(@RequestParam("name") String name) {
Hello hello = new Hello();
hello.setName(name);
return hello;
}
static class Hello {
private String name;
// command + N 을 누르시면 getter & setter 를 쉽게 만드실 수 있습니다.
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
...
command + N 생성
tip> command + Shift + Enter를 누르면 자동 완성이 된다. 세미콜론(;) 같은 부분
json 으로 데이터를 잘 가지고 온 모습
최근에는 거의 json으로 반환하는 게 기본으로 되어 있습니다.
@ResponseBody 사용 원리
@ResponseBody - HTTP의 Body에 문자 내용을 직접 반환 - 'viewResolver' 대신에 'HttpMessageConverter'가 작동 - 기본 문자 처리 : 'StringHttpMessageConverter' - 기본 객체 처리 : 'MappingJackson2HttpMessageConverter' - byte 처리 등등 기타 여러 HttpMessageConverter가 기본으로 등록되어 있음.
클라이언트와 HTTP Accept 헤더와 서버의 컨트롤러 반환 타입 정보 둘을 조합해서 'HttpMessageConverter'가 선택된다.
