웹을 개발하는 방법?
-
정적 컨텐츠
welcome page처럼 파일을 그대로 웹브라우저에 내려주는거. -
MVC와 템플릿 엔진
html을 그냥 주는게 아니라 서버에서 프로그래밍해서 동적으로 바꿔주는 것.
modle, controller, 템플릿화면 등 MVC라고 한다.
요즘은 이렇게 개발을 많이한다. -
API
안드로이드나 아이폰 클라이언트를 개발해야한다면 서버입장에서 과거에는 XML을 썼는데 요즘은 Json이라는 데이터 구조 포맷이 있는데 그걸 클라이언트에게 전달한다.
1. 정적 컨텐츠
스프링부트는 정적 컨텐츠를 자동으로 제공.
자세히 알고 싶으면 spring.io 에서 document를 보면 된다.
그냥 원하는 html 파일을 static폴더에 넣어주면 볼 수 있다.
대신 어떤 프로그래밍을 할 수가 없다.
동작원리
먼저 웹브라우저가 주소를 입력하고 들어가려고 하면 내장 톰캣 서버에 그것이 전달된다. 그리고 내장 톰캣 서버에서 접속하려는 파일 관련 컨트롤러가 있는지 먼저 찾아본다. 그러고나서 resources 내부에 접속하려는 파일을 찾아보고 있으면 반환해준다.
2. MVC와 템플릿 엔진
MVC : Model, View, Controller
View
화면을 그리는 것에 모든 것을 집중
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<hody>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
</hody>
</html>Controller, Model
비즈니스 로직이나 내부적으로 처리해야하는 것에 집중
@Controller
public class HelloController {
@GetMapping("hello")
public String hello(Model model) {
model.addAttribute("data", "spring!!");
return "hello";
}
}예시
//HelloController.java
@GetMapping("hello-mvc")
public String helloMvc(@RequestParam("name") String name, Model model) {
model.addAttribute("name", name);
return "hello-template";
}# hello-template.html
<html xmlns:th="http://www.thymeleaf.org">
<hody>
<p th:text="'hello ' + ${name}" >hello! empty</p>
</hody>
</html>참고:
<p th:text="'hello ' + ${name}" >hello! empty</p>부분의 hello! empty 부분은 서버를 안키고 그냥 접속했을때 나온다. 서버를 키면 ${name} 부분이 대신 치환되서 나온다
그런데 이렇게 작성하고 http://localhost:8080/hello-mvc 에 들어가보면 에러가 발생한다. 근데 그 뒤에 ?name=아무거나입력 라고 입력하면 정상 작동한다.
어떻게 동작할까?
끝에 ?name=아무거나입력 라고 입력하면, HelloController.java 내에 String name의 파라미터로 입력한 값이 들어간다. 그러고나서 hello-template.html에 ${name}부분이 모델에서 키 값이 name인 걸 꺼내서 치환하는 것이다.
웹브라우저에서 localhost:8080/hello-mvc 를 내장 톰캣 서버에 넘기면, 서버는 스프링에 그것을 보낸다.
스프링은 helloController 에 맵핑이 되어있따는 것을 확인하고 메소드를 호출하고 return값과 model(name:아무거나입력한거)을 viewResolver에 넘긴다.
viewResolver는 템플릿에 return된 hello-template과 똑같은 html파일을 찾아서 Thymeleaf 템플릿 엔진이 렌더링해서 html을 변환해서 웹브라우저로 넘긴다.
다시 정리: 웹브라우저 주소 입력 -> 내장 톰캣 서버 -> 스프링 컨테이너 내부 helloController->
Mapping이 되어있는것을 확인 -> 반환값을 viewResolver로 넘김 -> 반환된 return 값과 똑같은 html 파일을 찾는다 -> 찾았으면 Thymeleaf 템플릿 엔진이 그것을 렌더링 -> 변환된 html -> 웹브라우저
정적일때는 그대로의 html을 보냈지만, 확실히 다른 모습을 보여주는 것을 볼 수 있다.
3. API
// 코드 1
@GetMapping("hello-string")
@ResponseBody
public String helloString(@RequestParam("name") String name) {
return "hello " + name;
}코드1
@ResponseBody 는 이 응답부에 직접 내가 body를 넣어주겠다는 뜻.
템플릿과 차이점은 그냥 바로 문자가 return 되는 것이다
실제 이렇게 작성하고 http://localhost:8080/hello-string?name=아무거나입력
으로 들어가서 페이지 소스 보기로 확인해보면 html 태그 같은 건 하나도 없고 문자열만 나와있다.
// 코드 2
...
...
...
@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;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
} //main 끝코드 2
이런식으로 클래스를 만들어서 객체로 return 하면 어떻게 될까?
이 방식을 API방식이라고 많이 얘기한다
실행해보면 {"name":"dqkwpodwq"} 와 같이 결과물이 나온다.
이 방식을 Json 방식이라고 한다.
Jsond은 key-value로 이루어진 구조이다
Key는 name, Value는 주소창에 넣었던 문자열이 될것이다.
옛날에는 XML 방식이라고 return 에 <HTML></HTML>을 다 넣고 했었는데, 요즘은 Json방식으로 거의 통일됐다.
그래서 요즘은 스프링의 기본은 객체를 반환하고 @ResponseBody라고 해놓으면 Json방식으로 반환하는게 기본이다.
어떻게 동작할까?
웹브라우저에서 주소를 내장 톰캣 서버에 보낸다. helloController는 @ResponseBody 를 보고 이 데이터를 그대로 넘겨야겠구나 결정한다. 문자열은 그대로 넘긴다. 코드2처럼 객체를 주면, 디폴트가 Json 방식으로 데이터를 만들어서 http 응답에 반환하겠다는게 기본정책이다.
