웹 개발의 방식은 여러 가지가 있는데
1. 정적 컨텐츠
2. MVC와 템플릿 엔지
3. API
이렇게 3가지에 대해 살펴볼 것이다.
1. 정적 컨텐츠
말 그대로 변환 없이 바로 html을 전달하는 것이다.
- hello-spring.html
<html>
<head>
<title>static content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
정적 컨텐츠입니다.
</body>
</html>
클라이언트에 반환된 페이지 소스를 보면 알 수 있듯이 html파일의 코드 그대로 반환됐다.
이렇게 변환되지 않고 컨트롤러 없이 그대로 반환되는 것이 정적 컨텐츠이다.
- 동작 과정
웹브라우저: html 요청
-> 내장톰캣 서버: 전달
-> 스프링: 관련 컨트롤러 찾아봄 -> 하지만 없음(정적이므로 컨트롤러 X)
-> 스프링 부트 내에서 html파일만 찾음
-> 웹브라우저에 반환
-> 화면에 보임
.
.
.
2. MVC와 템플릿 엔진
MVC = Model View Controller
의 약자이고 역할에 따라 나누었다.
Model은 데이터를 담아 전달할 수 있고(동적으로), View는 화면 관리, Controller는 설정, 로직 관리다.
- Controller(HelloController)
public class HelloController {
@GetMapping("hello-mvc")
public String helloMvc(@RequestParam(value = "name", required = true) String name, Model model) {
model.addAttribute("name", name);
return "hello-template";
}
}
컨트롤러 이름을 "HelloController"로 정하고 위에 애너테이션 @Controller를 하여 컨트롤러임을 명시한다.
@GetMapping("hello-mvc")
-> 클라이언트에서 "localhost:8080/hello-mvc" 요청이 컨트롤러에 들어오면 아래 함수를 실행한다.
@RequestParam은 가로 안에 "name"만 써도 된다. (required=true가 default)
형식: @RequestParam("가져올 데이터의 이름")[데이터 타입][가져온 데이터를 담을 변수]
Model 객체를 이용해서 데이터를 담은 변수의 값, 즉 name의 값을 넘겨준다.
return "hello-template"를 반환함으로서 Spring이 자동으로 src/main/resources의 templates에서 hello-template를 찾아 View에 반환한다.
- View(hello-template)
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p th:text="'hello ' + ${name}" >hello! empty</p>
</body>
</html>
위와 같이 localhost:8080/hello-mvc?name=minju!! 에서 name에 minju!!라는 String값을 넣어 View에 보이게 했다.
View의 코드에서 ${name}이 모델에서 값을 치환된 것이다. (minju!!로)
페이지 소스를 보면 p태그 안의 값이 변환되어 반환된 것을 알 수 있다.
이는 템플릿 엔진에서 변환되어 반환된 것이다.
- 동작 과정
웹브라우저 요청(localhost:8080/hello-mvc)
-> 내장 톰캣 서버: 전달
-> 스프링: 컨트롤러 찾음
-> HelloController: return "hello-template", model(name:spring)
-> viewResolver: 뷰를 찾아서(templates에서 hello-template.html) 템플릿 엔진과 연결
-> 템플릿 엔진: 렌더링 후 변환해서 HTML을 웹브라우저에 반환
-> 화면에 보임
.
.
.
3. API
마지막 API는 우선 html을 이용하지 않는다.
html 없이 바로 값을 그대로 전달한다.
그래서 서버 간 통신에도 쓰인다.
대신 @ResponseBody를 이용해 HTTP의 Body부분으로 바로 전달한다.(html을 이용하지 않는 이유)
@ResponseBody는 문자 또는 객체를 전달한다.
- 문자
문자는 그대로 전달한다.
컨트롤러에서 "hello" + name을 바로 반환한다.
public class HelloController {
@GetMapping("hello-string")
@ResponseBody
public String helloString(@RequestParam("name") String name) {
return "hello" + name;
}
}
위와 같이 name=minju!!를 넣고 그 값이 "hello" + name 들어가서 반환된다.
페이지 소스에서도 반환된 값만 보이고 따로 html은 없는 것을 알 수 있다.
- 객체
객체 생성 후 JSON 방식으로 데이터를 생성한다.
JSON 방식: "key: value"
데이터를 객체에 담아 HTTP 응답에 반환한다. (return hello;)
객체를 JSON방식으로 변환하는 JSON라이브러리는 JACKSON과 GSON이 있는데
스프링에서는 JACKSON을 이용한다.
public class HelloController {
@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;
}
}
}
getter/setter 메서드를 이용해 name이 private이지만 외부 접근이 가능하도록 했다
-> 메서드를 통해 접근(property 접근) - Java Bean 표현 방식이다.
실행 화면과 페이지 소스를 통해 데이터가 JSON방식으로 변환 후 반환된 것을 알 수 있다.
key = name, value = minju!!
- 동작 과정
웹브라우저 요청(localhost:8080/hello-api)
-> 내장 톰캣 서버: 전달
-> 스프링: 컨트롤러 찾음
-> 컨트롤러: @ResponseBody, return hello(name:minju!!)
-> HttpMessageConverter(변환) - 문자: StringConverter
- 객체: JsonConverter
-> 변환된 값을 웹브라우저에 저달
-> 화면에 보임
API의 가장 큰 특징은 html이 없다는 것이다.
이렇게 웹의 3가지 동작 방식에 대해 알아보았다.
정적 컨텐츠, MVC와 템플릿 엔진, API에 대해 잘 이해할 수 있는 시간이었다.
참고 강의_인프런 - 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
'Spring' 카테고리의 다른 글
| [Spring]회원 관리 Backend 개발(2) - Test 케이스 작성 (0) | 2023.07.11 |
|---|---|
| [Spring] 회원 관리 Backend 개발(1)_회원 등록&조회 (0) | 2023.07.11 |
| [Spring]스프링 프로젝트 생성 / IntelliJ 설치&환경 설정&실행_1 (0) | 2023.06.24 |
