[Spring Boot] 스프링 웹 개발 기초

Updated:

정적 컨텐츠

  • 정적 컨텐츠 : 그냥 파일을 웹브라우저에 전달해 주는 것
  • MVC와 템플릿 엔진 : 템플릿 엔진을 위해 / JSP, PHP 같은 것, HTML을 그냥 주는게 아니라 서버에서 프로그래밍 해서 HTML을 동적으로 바꿔서 내리는 것
  • API : JSON 데이터 포맷으로 데이터를 클라이언트에게 전달하는 방식

정적 컨텐츠 생성

resources/static/hello-static.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello</title>
</head>
<body>
정적 컨텐츠 입니다.
</body>
</html>

Screen Shot 2022-04-05 at 5 51 08 PM

내장 톰켓 서버에서 요청을 받는다 -> hello-static.html이 왔다고 spring에게 넘긴다 -> 컨트롤러 쪽에서 먼저 찾아본다 -> mapping 되는 컨트롤러가 없다 -> 내부의 resources/static 에서 찾아본다

Screen Shot 2022-04-05 at 5 50 18 PM

MVC와 템플릿 엔진

  • MVC : Model View Controller

view : 화면에 집중 controller, model : 내부적인 처리에 집중

Controller

HelloController.java

@GetMapping("hello-mvc")
public String helloMvc(@RequestParam("name") String name, Model model) {
    model.addAttribute("name", name);
    return "hello-template";
}

View

hello-template.html

’'’java

hello! empty

’’’

http://localhost:8080/hello-mvc.html로 접속하면 오류가 난다.

Screen Shot 2022-04-05 at 6 06 17 PM

컨트롤러에서 name -> sprigng 으로 바뀜 -> 모델에 담김 템플릿으로 넘어가면 -> 모델의 key(name) 값(spring)으로 바꿔서 치환해줌

Screen Shot 2022-04-05 at 6 06 09 PM

MVC, 템플릿 엔진 이미지

웹 브라우저에서 localhost:8080/hello-mvc.html를 넘기면 내장 톰켓 서버를 거친다. -> 내장 톰켓 서버는 스프링에게 hello-mvc.html 왔어 라고 던진다. -> 스프링은 helloController에 저 메소드가 mapping이 되어있네? 하면서 그 메소드를 호출해준다. -> return 할 때 이름을 hello-template, model은 (name:spirng) 이라고 하고 스프링 에게 넘겨준다. -> 스프링의 viewResolver가 동작한다. (view를 찾아주고 템플릿 엔진에 연결시켜주는 역할) / return 의 string name과 같은 애를 찾는다. -> templates/hello-template.html 을 찾어서 Thymeleaf 템플릿 엔진한테 처리해 달라고 넘긴다 -> 템플릿 엔진이 렌더링 해서 변환을 한 html을 웹 브라우저에 반환

Screen Shot 2022-04-05 at 6 11 44 PM

API

MVC 방식이 있고, API 방식이 있다.

HelloController.java에 코드 추가

@GetMapping("hello-string")
@ResponseBody
public String helloString(@RequestParam("name") String name) {
    return "hello " + name;
}

@ResponseBody : HTTP의 Body부의 데이터를 직접 넣어주겠다는 뜻 return string 값이 요청한 클라이언트에게 그대로 내려간다.

소스를 보면 html 코드가 하나도 없고 return string 값만 있는걸 확인할 수 있다.

Screen Shot 2022-04-05 at 6 42 29 PM

= MVC와 다르게 View 이런거 없이 데이터를 그대로 내려준다.


문자가 아닌 데이터를 달라고 한다면?

Hello 객체를 정의한 후, Controller에서 hello 객체를 생성하고 return 해주었다. getter, setter로 외부에서 접근 가능 하도록 : Java Bean 표준 방식, 프로퍼티 접근 방식

@GetMapping("hello-api")
@ResponseBody
public Hello helloApi(@RequestParam("name") String name) {
    Hello hello = new Hello();
    hello.setName(name);
    return hello;
}

// hello 객체 생성
static class Hello {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

JSON이 나온다. key-value 형식으로 이루어진 구조

JSON(JavaScript Object Notation) 속성-값 쌍(attribute–value pairs and array data types (or any other serializable value)) 또는 “키-값 쌍”으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.

Screen Shot 2022-04-05 at 6 50 10 PM

@ResponseBody라고 해놓으면 JSON으로 반환하는 것이 기본

@ResponseBody 사용원리

웹 브라우저에서 localhost:8080/hello-api를 친다 -> 톰켓 내장 서버에서 hello-api가 왔어 라고 스프링에 던진다. -> 스프링은 hello-api가 있네? 하는데 @ResponseBody 어노테이션이 붙어있다. (안붙어있으면 ViewResolver 에게 던짐) -> HTTP 응답에 그대로 데이터를 넘겨야겠다고 동작한다. -> 근데 return이 문제가 아니라 객체다. -> 객체가 오면 default 는 JSON 방식으로 데이터를 만들어서 HTTP 응답에 반환 하겠다. -> HttpMessageConverter가 동작을 한다.(단순 문자면 StringConverter, 객체면 JsonConverter) -> hello 객체를 JSON으로 바꾼것을 요청한 웹 브라우저, 서버로 응답을 한다.

Screen Shot 2022-04-05 at 6 59 10 PM

  • @ResponseBody를 사용
    • HTTP body에 문자 내용을 직접 반환
    • viewResolver 대신에 HttpMessageConverter 가 동작
    • 기본 문자처리: StringHttpMessageConverter
    • 기본 객체처리: MappingJackson2HttpMessageConverter
    • byte 처리 등등 기타 여러 HttpMessageConverter 가 기본으로 등록되어 있음

참고 : 클라이언트의 HTTP Accept 헤더와 서버의 컨트롤러 반환 타입 정보 둘을 조합해서 HttpMessageConverter가 선택된다.

정리

정적 컨텐츠 : 그냥 파일을 그대로 내려준다.

MVC와 템플릿엔진 : 템플릿 엔진을 MVC 방식으로 쪼개서 View를 HTML로 프로그래밍 한 것으로 렌더링 해서, 렌더링이 된 HTML을 클라이언트에게 전달해 준다.

API : 객체를 반환, (View 없이) JSON으로 HTTP Response에게 전달

참고

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

Leave a comment