[Spring Intro] Section 02. 스프링 웹 개발 기초_정적 컨텐츠, MVC와 템플릿 엔진, API

스프링 웹 개발 방법

정적 컨텐츠 ; 파일을 그대로 웹브라우저에 내려주는 것
MVC와 템플릿 엔진 ; 서버에서 HTML을 프로그래밍해서 동적으로 내리는 것
API ; JSON이라는 데이터 구조 포맷으로 클라이언트에게 데이터를 전달하는 방식

정적 컨텐츠

# 정적 컨텐츠 기능

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>

> hello-static.html 파일 생성 후 프로젝트 실행

localhost:8080/hello-static.html 접속 시 위와 같은 화면이 출력된다.

# 정적 컨텐츠 동작 환경

> 웹 브라우저에서 localhost:8080/hello-static.html 접속

> 내장 톰켓 서버가 요청을 받아 Spring에게 전달

> Spring이 컨트롤러 쪽에 hello-static이 있는지 먼저 찾아봄

(컨트롤러가 우선 순위를 가짐)

> 매핑이 된 hello-static 컨트롤러가 없으므로 resources의 static/hello-static.html을 반환

정적 컨텐츠 방식을 제외하고는

MVC처럼 View를 찾아서 템플릿 엔진을 통해 화면을 렌더링해서 HTML을 웹 브라우저에 넘겨주는 방식과

API를 통해 데이터를 바로 클라이언트에게 넘겨주는 방식으로 나뉨

MVC와 템플릿 엔진

MVC : Model, View, Controller

View에서 모든 것을 프로그래밍했던 Model1 방식 > View와 Controller가 분리된 MVC 방식으로 변화

View : 화면을 그리는 데에 모든 역량을 집중
Controller : 비즈니스 로직과 관련이 있거나 내부적인 것들을 처리하는 데 집중

# MVC 기능

Controller

package hello.hellospring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
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") String name, Model model) {
        model.addAttribute("name", name);
        return "hello-template";
    }
}

resources/templates/hello-template.html

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

> 위 두 코드를 적용했는데 localhost:8080/hello-mvc에 접속해보면 에러 페이지가 뜨는 것을 확인할 수 있다.

> 에러가 떴다면 로그를 반드시 확인해야 한다. WARN이 보이는 부분에서 에러가 발생했다.

> 로그를 자세히 보면 Parameter 값을 주지 않아서 생긴 오류임을 알 수 있다.

# Command + P를 활용한 파라미터 정보 확인

Command + P를 통해 Parameter 정보를 확인해보니 value() 혹은 name()이 있고,

required()의 default가 true임을 알 수 있다.

true인 경우에는 parameter 값을 반드시 입력해줘야 에러가 나지 않는다.

> 나는 name에 spring!!!이라는 값을 넣어줬다.

새로고침 하면 위와 같이 정상적으로 실행된다.

# MVC, 템플릿 엔진 동작 환경

> 내장 톰켓 서버가 웹 브라우저로부터 요청을 받아 Spring에게 전달

> helloController의 hello-mvc 메소드에 매핑이 되어 있으므로 해당 메소드 호출

(name에 넣은 값도 함께 Spring에 반환)

> Spring이 viewResolver를 통해 templates/hello-template.html을 찾아 Thymeleaf 템플릿에 처리 요청

> 템플릿 엔진에서 변환한 HTML을 웹 브라우저에 표시

API

# API 기능

[ String 반환 ]

//Controller에 아래 코드 추가
@GetMapping("hello-string")
@ResponseBody
public String helloString(@RequestParam("name") String name) {
        return "hello " + name; // "hello spring"
}

@ResponseBody : ViewResolver를 사용하지 않고 HTTP의 BODY에 "hello " + name 부분을 직접 넣어줌

**HTML이 아닌 HTTP의 응답 바디이므로 혼동하지 말 것

[ 객체 반환 ]

//Controller에 아래 코드 추가
@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 : 객체를 JSON 형태로 변환

[ String 반환 vs 객체 반환 ]

[ 템플릿 엔진 vs API 페이지 소스 비교 ]

템플릿 엔진은 HTML 태그들이 보이는 반면 API 사용 시에는 HTML 태그 없이 내가 적은 문자열이 그대로 나타남

이때, 템플릿 엔진과의 차이점은 View 없이 return 부분이 그대로 웹 브라우저에 표시된다는 점이다.

# API 동작 환경

> @ResponseBody 사용 시 HTTP의 BODY에 문자 내용을 직접 반환

viewResolver 대신에 HttpMessageConverter 가 동작
기본 문자처리: StringHttpMessageConverter가 담당
기본 객체처리: MappingJackson2HttpMessageConverter가 담당

(객체 반환 시 기본 정책 : JSON 형식으로 데이터를 만들어서 HTTP 응답에 반환)

내용 및 이미지 출처 : 김영한의 스프링 입문

저작자표시 비영리 (새창열림)

'🖋️ study > spring' 카테고리의 다른 글

[Spring Intro] Section 05. 회원관리 예제 - 웹 MVC 개발(회원 웹 기능, 홈 화면 추가, 등록, 조회) (0)	2023.01.25
[Spring Intro] Section 04. 스프링 빈과 의존관계_컴포넌트 스캔과 자동 의존관계 설정, 자바 코드로 직접 스프링 빈 등록하기 (0)	2023.01.23
[Spring Intro] Section 03. 회원 관리 예제_백엔드 개발, 비즈니스 요구사항 정리, 회원 도메인과 리포지토리 만들기, 회원 리포지토리 테스트, 회원 서비스 개발, 회원 서비스 테스트 (0)	2023.01.20
[Spring Intro] Section 01. 라이브러리 살펴보기, View 환경설정, 빌드 및 실행 (0)	2023.01.16
[Spring Intro] Section 01. 프로젝트 환경설정 (0)	2023.01.16

스프링 웹 개발 방법

정적 컨텐츠

MVC와 템플릿 엔진

API

'🖋️ study > spring' 카테고리의 다른 글

검색 태그

티스토리툴바