Spring - 정적 컨텐츠, MVC&템플릿 엔진, API

스프링 웹 개발 기초 개념 중 파일을 웹브라우저에 전달해주는 3가지 방식에 대해 정리해보았다.

📚목차📚

👉 1. 정적 컨텐츠

👉 2. MVC & 템플릿 엔진

👉 3. API

1. 정적 컨텐츠: 파일을 변환작업 없이 웹 브라우저에 전달해 주는 것.

resources > static 폴더 하위에 원하는 파일을 넣으면, 정적파일이 그대로 반환이 됨. 단 여기에는 어떤 프로그래밍 통해 파일 변환을 수행할 수는 없음.

https://www.baeldung.com/spring-mvc-static-resources

💻hello-spring.html💻

<!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>
<body>
<p th:text="정적 페이지 입니다.">안녕하세요. 정적페이지 입니다.</p>
</body>
</html>

✍ 정적 컨텐츠 동작과정

: 컨트롤러와 맵핑되는 게 없으면, resources > static으로 가서 맵핑되는 html파일을 찾아 렌더링 해줌.

2. MVC와 템플릿 엔진: html을 서버에서 조작하여 화면을 내보내는 것.

✍ MVC란?

Model, View, Controller를 뜻함.(담당 로직을 분리해 별도의 파일로 관리하는 개념)

비즈니스 로직이나 화면 뒷단에 관련된 것은 Controller가, 화면에 관련된 것은 View가 나눠서 관리함.

💻hello-controller 클래스💻

package com.example.firstspring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class HelloController {
    @GetMapping("/hello")
    public String hello(Model model){
        model.addAttribute("data", "hello!!");
        return "hello";
    }

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

-> return "hello-mvc" -> templates 폴더 하위에 hello-mvc.html 파일을 찾아 model객체를 전달.

💻hello-mvc.html💻

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

-> 전달받은 param값을 변수 자리에 넣음. 변경된 html을 렌더링함.

✍ MVC, 템플릿 엔진 동작 과정

웹브라우저에서 톰캣서버로 http request를 보내면, 톰캣 서버가 스프링 컨테이너 내부의 컨트롤러에서 return값을 보고 매칭되는 파일(여기서는 "hello-mvc")을 찾고, 모델의 param을 viewResolver로 전달해줌.

viewResolver는 전달받은 param을 변수 자리에 치환하여 템플릿 엔진을 이용해 html을 변환 후 화면에 렌더링 함.

3. API: 서버끼리 통신할 때, 데이터 주고받을 때 등 사용하는 방식

💻helloController 클래스💻

✍ @ResponseBody를 추가하는것이 핵심!

html body부에 해당 return값을 바로 넣어주겠다는 뜻으로, 요청한 클라이언트에 view같은 것 거치지 않고 다이렉트로 내려간다.

package com.example.firstspring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloController {
    @GetMapping("/hello")
    public String hello(Model model){
        model.addAttribute("data", "hello!!");
        return "hello";
    }

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

    @GetMapping("/hello-string")
    //html body부에 해당 내용을 바로 넣어주겠다는 뜻, 요청한 클라이언트에 그대로 내려감.
    //template 엔진처럼 view같은 것 거치지 않음.
    @ResponseBody
    public String helloString(@RequestParam("name") String name){
        return "hello" + name;
    }
}

✍ 템플릿엔진과 API 방식의 차이점?

마우스 우클릭 -> 페이지 소스 보기를 클릭하면,

템플릿 엔진 방식의 경우 html 페이지가 나오고 API 방식의 경우 문자열이 그대로 나오는 것을 볼 수 있다.

API 방식의 경우 html 파일을 렌더링하는 것이 아닌, data를 직접 주고받는 방식이다. view같은 것 거치지 않고 다이렉트로 data를 내려준다.

💻helloController 클래스💻

package com.example.firstspring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloController {
    @GetMapping("/hello")
    public String hello(Model model){
        model.addAttribute("data", "hello!!");
        return "hello";
    }

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

    @GetMapping("/hello-string")
    //html body부에 해당 내용을 바로 넣어주겠다는 뜻, 요청한 클라이언트에 그대로 내려감.
    //template 엔진처럼 view같은 것 거치지 않음.
    @ResponseBody
    public String helloString(@RequestParam("name") String name){
        return "hello" + name;
    }

    @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){
            name=name;
        }
    }
}

✍ API방식에서 사용되는 @ResponseBody가 동작하는 방식

@ResponseBody가 있을 경우, 컨트롤러가 템플릿 엔진에게 요청하는 것이 아닌 http body에 문자 or 객체(json형식으로 반환) 내용을 직접 반환한다.

기본 문자 처리시에는 ''StringHttpMessageConverter"가 동작하고, 기본 객체 처리시에는 "MappingJackson2HttpMessageConverter"가 동작한다.

문자를 return하면 말그대로 문자가 return되는데, 객체를 return하게되면, json format으로 data가 반환된다.

json 포맷이 대중화되기 전에는 XML포맷과 json 포맷이 격돌하는 시기가 있었는데, 요즘엔 거의 다 json 포맷을 이용한다.

저작자표시

'웹공부 > Spring' 카테고리의 다른 글

Spring 입문 - thymeleaf 템플릿 엔진 동작 (1)	2024.01.29

슬기의 블로그

Spring - 정적 컨텐츠, MVC&템플릿 엔진, API

'웹공부 > Spring' 카테고리의 다른 글

티스토리툴바

Spring - 정적 컨텐츠, MVC&템플릿 엔진, API

'웹공부 > Spring' 카테고리의 다른 글

'웹공부/Spring' Related Articles

티스토리툴바