[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션 2 (정적컨텐츠, MVC와 템플릿 엔진, API)

티스토리 뷰

Spring

[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션 2 (정적컨텐츠, MVC와 템플릿 엔진, API)

chaewonni 2023. 11. 7. 16:18

💡정적 컨텐츠

정적 컨텐츠는 서버에서 뭘 해주는 것 없이 파일 그대로를 웹브라우저로 내려주는 것을 의미한다.

resource/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>

위 코드를 작성해준 후에

http://localhost:8080/static.html을 쳐서 들어가면

위와 같이 정상적인 정적 컨텐츠가 보인다.

💡정적 컨텐츠 원리

웹 브라우저에서 http://localhost:8080/static.html 주소에 들어가면 내장 톰켓 서버가 요청을 받고, '먼저' static.html 을 스프링 부트가 컨트롤러에 static 관련 컨트롤러가 있는지 확인을 한다. 이 프로젝트는 컨트롤러 파일이 없기 때문에 넘어가고 그 다음으로 static 관련 html 이 있는 지 확인을 하여 찾으면 이 파일을 웹 브라우저에 바로 보내주는 것이 정적 컨텐츠의 원리이다. (출처:easy00.log)

💡MVC와 템플릿엔진

MVC는 서버에서 변형을 해줘서 (html을 바꿔서) 내려주는 방법이다.

원래는 view랑 controller랑 분리되지 않고 view에서 다 했지만 이제는 분리되어 MVC(model, view, controller)라고 한다.

html을 서버에서 동적으로 프로그래밍 해서 웹브라우저로 내려주는 것을 템플릿 엔진이라고 하며, 템플릿 엔진을 사용하기 위한 컨트롤러, 모델, 템플릿 엔진 화면 이 3가지 Model, View, Controller(MVC) 라고 한다.
view는 화면을 그리는 데에 모든 영향을 집중해야 하며, model과 controller는 비지니스 로직에 관련이 있거나 내부적인 것을 처리하는데 집중한다. (출처:easy00.log)

즉, view는 화면과 관련된 일만, 비즈니스 로직과 서버 뒷단에 관련된 거는 controller나 뒷단 비즈니스 로직에서 다 처리하고, model에다가 관련된 화면에서 필요한 거를 담아서 화면에 넘겨주는 패턴을 사용하는 것이 일반적이다.

저번에 만들어두었 HelloController 클래스에

    @GetMapping("hello-mvc") //웹 브라우저에 칠 때 /hello-mvc로 들어오는 것
    public String helloMvc(@RequestParam("name") String name, Model model) {
        model.addAttribute("name", name);
        return "hello-template";
    }

위와 같은 내용을 추가해 주었다.는 localhost::8080/hello-mvc 로 들어가면 helloMvc라는 메서드를 호출하게 되고, 이 때 name이라는 이름의 param을 받아 attribute의 "name"에 param으로 받은 값을 model에 넣어 hello-template을 return해주는 것을 의미한다.

main/resources/templates 폴더 안에 return 값과 똑같은 이름의 파일 hello-template.html파일을 만들어주고,

<html xmlns:th="http://www.thymeleaf.org">
<body>
<p th:text="'hello ' + ${name}">hello! empty</p>
</body>
</html>

저번에는 ${data}였다면 이번에는 ${name}으로 작성해준다.

hello! empty가 있는 이유는 서버없이 그냥 html만들어서 볼 때 사용되는 것으로,

실제 서버를 타서 돌면 'hello ' +${name}으로 값이 바뀌게 된다.

이제 localhost:8080/hello-mvc로 들어가면 이와 같은 에러 페이지가 뜨는데, 이는 2023-11-07 14:45:35.563 WARN 20544 --- [nio-8080-exec-2] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.bind.MissingServletRequestParameterException: Required request parameter 'name' for method parameter type String is not present] 에러메세지에서 볼 수 있듯이 Required된 request parameter 'name'이 없기 때문이다.

정상적인 프로젝트를 실행하려면 name에 param값을 줘야 한다.

따라서 원래의 localhost:8080/hello-mvc가 아니라, http://localhost:8080/hello-mvc?name=spring!!! 으로 name=spring!!!이 다른 값을 줘야 제대로 된 화면이 뜬다.

💡MVC 동작원리

hello-mvc?name=spring!!! 에서 name의 param으로 받은 spring!!! 이 아래 코드에 있는 name의 자리에 들어가고, 이 값들이 Model에 담겨 hello-template로 넘어간다.

그러면 template에서 Model의 Key 값이 name인 것을 찾아, 그 value값을 ${name} 에 치환을 해주면 그 자리에 spring!!! 이 들어가게 된다. (출처:easy00.log)

먼저, 웹 브라우저에서 "localhost:8080/hello-mvc" 주소를 요청하면 내장 톰캣 서버가 요청을 먼저 처리한다. 내장 톰캣 서버는 스프링 부트 애플리케이션을 실행하기 위한 웹 서버 역할을 한다. 이 서버는 "hello-mvc" 경로로 들어온 요청을 스프링 프레임워크에게 전달한다.
스프링 프레임워크는 해당 요청을 처리할 컨트롤러(Controller)를 찾아서 실행한다. 이 경우, "helloController"라는 컨트롤러에 매핑(mapping)되어 있는 메서드를 호출한다.
"helloController"의 메서드가 실행되면, 해당 메서드에서는 "hello-template"라는 뷰(View)를 반환한다. 뷰는 사용자에게 표시할 내용을 생성하는데 사용되며, 이 경우 "hello-template"은 템플릿 엔진으로 처리된다.
스프링 부트는 템플릿 엔진(예: Thymeleaf)을 사용하여 "hello-template"을 렌더링한다. 템플릿 엔진은 동적 데이터를 HTML로 변환하는 역할을 하며, 이 경우 모델(Model)에 "name"이라는 키(key)와 값(value)인 "spring!!"을 전달한다.
템플릿 엔진은 모델의 데이터를 "hello-template"에 삽입하고, 최종적으로 HTML을 생성한다. 그리고 스프링 부트는 이 HTML을 웹 브라우저에 반환하며, 웹 브라우저는 해당 HTML을 렌더링하여 사용자에게 표시한다.

💡API

정적 컨텐츠를 제외하고는 html로 내리냐(MVC방법), API라는 방식으로 data를 바로 내리냐(API) 이렇게 두 가지의 방법이 있다.

API는 json이라는 데이터 구조 포멧으로 클라이언트로 데이터를 전달하는 방식이다. 서버끼리 데이터를 주고 받을 때 API방식을 사용한다.

기존 HelloController에

@GetMapping("hello-string")
    @ResponseBody //http의 body부에 "hello" + name; 이 데이터를 직접 넣어주겠다
    public String helloString(@RequestParam("name") String name){
        return "hello" + name; // String name에서 name에 spring을 넣으면 "hello spring"으로 바뀜
        //문자가 요청한 client에 그냥 내려감 (view 이런게 없음)
    }

위 코드를 추가해주면, name이라는 이름으로 param을 받아서 받은 값을 그대로 return해준다. 받은 name값이 그대로 서버에 전달되고, http body에 name값이 직접 들어가는 것이다.

이전에 template엔진은 화면을 가지고 view라는 template을 조작하는 방식이라면, api는 data를 그대로 내려주는 방식이다.

http://localhost:8080/hello-string?name=spring!!! 에 들어가면 위와 같은 화면이 뜬다.

💡API (JSON 방식)

이번엔 key, value로 이루어진 JSON방식을 사용해 볼 것이다. (최근에는 JSON방식으로 통일이 됨)

HelloContoller에

 @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;
        }
    }

위 코드를 추가해주면

hello-api가 @GetMapping으로 매핑되어 있어 웹에 localhost:8080/hello-api을 치면 해당 메서드 호출하게 되고,

@ResponseBody는 직접 http의 body에 data를 넣어준다.

그리고 이번엔 위와 달리 JSON방식이므로 JSON방식으로 data를 넘겨주기 위해 hello라는 새로운 객체를 만들어주었고, 그 객체에 값을 넣어 return해주었다.

http://localhost:8080/hello-api?name=spring!!! 을 치면 위와 같은 화면이 뜬다.

{"key":"value"} 처럼 JSON 형식으로 data가 웹 브라우저에 내려간 것을 확인할 수 있다.

💡API 동작원리

웹 브라우저에 localhost:8080/hello-api를 타이핑하면 내장 톰켓 서버에서 hello-api를 spring으로 보내준다. spring은 hello-api가 mapping 되어 있는 것을 확인하고 또한 거기에 @ResponseBody가 있어 http 응답에 data를 그대로 넘겨주는 동작을 하게 된다.
그러나 바로 위 프로젝트에서는 객체를 넘겨주기 때문에 data 그대로가 아닌 JSON 방식으로 만들어서 http 응답에 반환을 해야한다.
즉, @ResponseBody가 있으면 HttpMessageConverter가 동작을 하고, 객체가 return 됐기 때문에 JsonConverter가 동작하게 되어 객체를 JSON 형태로 바꾸게 되어 JSON 형태로 응답을 하게 된다. (출처:easy00.log)

즉, @ResponseBody가 있으면 viewResolver한테 던지는 것이 아니라, 그대로 http응답에 data를 넘긴다.

문자가 아니고 객체일 땐, return값에 바로 넣는 것이 아니라 JSON방식으로 data를 만들어서 http응답에 반환한다.

@ResponseBody라고 오면, HttpMessageConverter가 동작해서 문자일 땐 StringConverter, 객체일 땐 JsonConverter가 기본으로 동작한다. 객체일 땐 객체를 문자로 바꿔서 반환해야하므로 객체를 Json스타일로 바꿔서 웹브라우저한테 보내준다.

'Spring' 카테고리의 다른 글

[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션6 (스프링 DB 접근 기술) (3)	2023.12.29
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션5 (회원 관리 예제 - 웹 MVC 개발) (2)	2023.12.24
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션4 (스프링 빈과 의존관계) (0)	2023.11.27
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션3 (회원 관리 예제 - 백엔드 개발) (0)	2023.11.08
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션 0~1 (프로젝트 생성, 라이브러리 살펴보기, View환경설정, 빌드하고 실행하기) (0)	2023.11.07

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

글 보관함

자라자

티스토리 뷰