📢 김영한님이 지음,
[스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술] 강의를 정리한 글입니다.1. 스프링 웹 개발 기초
스프링으로 만들 수 있는 웹에는 크게 3가지 방식이 있다.
정적 컨텐츠, MVC 와 템플릿 엔진, API 방식이 있다.
1-1. 정적 컨테츠
📢 우선 정적 컨텐츠부터 살펴보자.
- 정적 컨텐츠는 서버를 이용하는 것 없이 저장된 소스 코드를 웹브라우저에게 응답해 보여주는 것을 말합니다.
대표적인 예시로는 섹션 1에서 만든 웰컴 페이지가 있습니다.
💻 HTML 작성
hello-spring\src\main\resources\static 하위에 index.html 파일을 생성하고 다음과 같이 작성해줍니다.
<<!--welcome 페이지는 도메인을 쳤을 때 바로 보여지는 페이지(index.html)-->
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
hello
<a href="/hello">hello</a>
</body>
</html>
👉🏻 프로젝트 실행
클라이언트로부터 localhost:8080 요청이 들어오게 되면 index.html 파일을 반환을 해줍니다. 이를 웰컴 페이지라고 합니다.
✨ 모든 기능들을 외울 수는 없다. 내가 찾고 싶은 기능이
있을 때는 스프링 부트에서 제공하는 메뉴얼에서 찾을 수 있어야 한다.
https://docs.spring.io/spring-boot/docs/current/reference/html/
정적 컨텐츠 예시를 하나만 더 보고 넘어가겠다.
💻 HTML 작성
hello-spring\src\main\resources\static 하위에 hello-static.html 파일을 생성하고 다음과 같이 작성해줍니다.
<!DOCTYPE HTML>
<html>
<head>
<title>static content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
정적 컨텐츠 입니다.
</body>
</html>👉🏻 프로젝트 실행
클라이언트로부터 localhost:8080/hello-static.html 요청이 들어오게 되면 우선 Tomcat 서버를 거치고 그 다음 컨트롤러에서 hello-staic에 매핑하는 동작이 있는 확인합니다.
이후 해당 동작이 없을 경우 /resources/static 하위에서 해당하는 파일을 찾아 반환해줍니다.
1-2. MVC 와 템플릿 엔진
📢 두번째 MVC와 템플릿 엔진을 살펴보자.
- 클라이언트가 서버를 요청한 방식에 따라 각기 다른 결과를 보여줍니다.
- 서버에서 프로그래밍을 해서 소스 코드를 동적으로 바꿔서 반환을 해줍니다.
Controller가 서버단에 필요한 부분을 처리를 하고 필요한 정보를Model에 저장을 하여View로 던져주는 로직이다.
💻 Controller 작성
우선 HelloController 에 /hello-mvc 경로가 들어오면 어떤 동작을 할 것인지 다음과 같이 작성을 해줍니다.
@Controller
public class HelloController {
@GetMapping("hello-mvc")
public String helloMvc(@RequestParam(value = "name", required = false) String name, Model model) {
model.addAttribute("name", name);
return "hello-template";
}
}💻 View 작성
<html xmlns:th="http://www.thymeleaf.org">
<body>
<p th:text="'hello ' + ${name}">hello! empty</p>
</body>
</html>@GetMapping("hello-mvc")어노테이션을 통해/hello-mvc와 같은 GET 요청이 들어왔을 경우 helloMvc() 메소드를 호출합니다.- helloMvc() 메소드는
@RequestParam에노테이션을 활용하여 파라미터값을 받고 있다. addAttribute()를 통해 값을 모델에 저장을 합니다."hello-template"를 반환을 하면ViewResolver가 해당 템플릿을 찾아서 Thymeleaf 엔진에게 처리해달라고 넘기고, Thymeleaf 엔진은model에 저장된 데이터를 가져와 값을 변환하여 반환합니다.
👉🏻 프로젝트 실행
localhost:8080/hello-mvc?name=string 와 같이 파라미터값과 함께 요청을 하면 다음과 같이 보입니다.
1-3. API
📢 마지막으로 API를 이용한 웹 개발에 살펴보겠다.
- 이전 MVC 방식은 HTML 형태로 반환을 해준 형태라면 API는 JSON 형태로 반환해주는 형태라고 생각하면 된다.
- 보통 클라이언트가 JSON를 이용해서 프론트와 연결을 할 때, 서버끼리 통신을 할 때 API 방식을 사용한다.
💻 Controller 작성(문자 반환)
HelloController 에 "hello-string" 라는 요청이 들어왔을 경우 동작하는 메소드를 작성해줍니다.
@GetMapping("hello-string")
@ResponseBody
public String helloString(@RequestParam("name") String name) {
return "hello " + name;
}@ResponseBody어노테이션을 적어주면viewResolver를 거쳐서 view 템플릿을 보여주는 것이 아니라HttpMessageConverter가 동작해서 문자를 반환합니다.@ResponseBody에서 body는 반환값을 HTTP 요청의 body내용에 맞게 매핑하여 반환을 하겠다는 의미이다.
👉🏻 프로젝트 실행
html 태그가 없이 그냥 문자열 그 자체를 반환하는 것을 볼 수 있다.
✨ 주로 사용되는 방식은 문자열이 아니라 객체 형태를 반환하는 방식이다.
💻 Controller 작성 (객체 반환)
HelloController 에 "hello-api" 라는 요청이 들어왔을 경우 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;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}👉🏻 프로젝트 실행
@ResponseBody어노테이션을 적어주면HttpMessageConverter가 동작을 한다.- 이전 예시와 다르게 문자가 아닌 객체일 경우
JSON형태로 만들어서 반환을 해줍니다.
