[01] 정적 컨텐츠, MVC와 템플릿 엔진, API

[ 웹 개발의 기초 3가지 방법 ]

1. 정적 컨텐츠

2. MVC와 템플릿 엔진

3. API

---

[ 정적 컨텐츠 ]

파일을 그대로 웹 브라우저에 내려주는 것

static/hello-static

localhost:8080/hello-static.html 로 접속하면 파일 그대로 웹 브라우저에 내린 화면을 볼 수 있다.

 

동작 과정은 다음과 같다.

이 전에도 말했었지만 우선순위가 높은 컨트롤러에서 찾아보고 

그 다음 static으로 갔는데 해당 파일이 있으니 변환없이 그대로 웹 브라우저에 띄워준다.

---

[ MVC와 템플릿 엔진 ]

서버에서 html..등을 변경해서 내려주는 것

MVC : Model,View,Controller

 

- View는 화면에 관련된 일만,

-Controller는 서버 뒷단에 관련된 일만

-Model에다가 관련된 화면에 필요한 것들을 담아서 넘겨준다.

---

[ 예시 ]

controller

controller/HelloController

*Model은 model attributes를 저장하는 interface*

 

Model을 매개변수로 전달 받고, model.addAttibute("key","value") 메소드를 이용하여 view에 전달할 데이터를

key,value 쌍으로 전달하였다.

 

@RequestParam("name") String name으로 

?name = 이 부분의 값을 받아와서 name 변수에 저장해주었다.

 

View

templates/hello-template.html

http://localhost:8080/hello-mvc?name=하이하이

 

---

[ 동작 과정 ]

controller에서 return 하면 뷰 리졸버가 View를 찾아주고, template과 연결시켜주는 역할을 한다.

톰켓 서버가 랜더링을 해주면 HTML 변환 후 웹 브라우저에 띄워진다.

---

[ API 방식 ]

JSON data 포맷으로 client에 전달 (data를 바로 내리는 것)

 

요즘엔 vue,리액트.. 이런 것들을 쓸 때에도 API로 data만 내려주면 화면을 client가 알아서 그리고 정리하는

그런 방식을 사용한다고 한다.

그리고 서버끼리 통신할 때에도 API 방식을 사용한다.

---

[예시 1] ResponseBody 문자 반환

@ResponseBody 를 사용하면 뷰 리졸버를 사용하지 않는다

대신에, HTTP의 BODY에 문자 내용을 직접 반환한다.

 

[ 결과 ]

소스 보기를 눌렀을 때 문자만 전달이 된 것을 볼 수 있음

---

[예시 2] ResponseBody 객체 반환

[ 결과 ]

JSON 형식으로 바뀌어서 출력

@ResponseBody로 객체를 전달했더나 JSON 방식으로 매핑되어 출력된 것을 볼 수 있다.

---

[ 동작 원리 ]

- 톰켓 서버가 api 왔어! 하고 스프링에 던짐

- controller에 갔는데, @ResponseBody라는 녀석을 만났다!

- 그 다음엔 HttpMessageConverter이 작동하게 되고, 이때

- 단순 문자 형태면 StringConverter가 동작하고 객체 형태면 JsonConverter가 기본으로 동작한다

---

* @ResponseBody를 사용시*

- HTTP BODY에 문자 내용을 직접 반환

- 뷰 리졸버 대신에 HTTP메시지컨버터가 동작

- 기본 문자처리 : StringHTTPMessageConverter

- 기본 객체처리 : MappingJackson2HttpMessageConverter

- byte 처리 등등 기타 여러 Http메시지컨버터가 기본으로 등록되어있는데 현업에서 거의 건들지 않는다고함.

 

** 참고 **

클라이언트의 HTTP Accept 헤더와 서버의 컨트롤러 반환 타입 정보 둘을 조합해서

Http메시지컨버터가 선택된다.

 

 

*자료 출처*

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 (김영한)