[강좌]스프링 입문 - 2. 스프링 웹 개발 기초

이 글은 인프런에서 김영한 님의 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술"을 수강 후 개인적으로 공부한 내용을 정리한 게시글입니다. 잘못된 점이나 부족한 부분이 있다면 언제든 지적 부탁드립니다.

해당 강의는 이곳에서 수강할 수 있습니다.

이전 강의에서는 IntelliJ에서 프로젝트를 생성, 생성된 프로젝트와 라이브러리를 살펴보고 실행을 통해 Thymeleaf의 동작을 확인해 보았습니다.

웹을 개발하는데는 크게 3가지 방법이 있으며, 이번 강의에서는 이 3가지 방법에 대해 알아봅니다.

1. 정적 컨텐츠

html 파일을 그대로 웹 브라우저에 보여줍니다.

스프링 부트는 정적 컨텐츠 기능을 자동으로 제공합니다.

이전 강의에서 진행했던 것과 같이 resources/static에 html 파일을 올리면 서버에서 html 파일을 그대로 띄웁니다.

이 페이지는 프로그래밍을 할 수 없는 정적 페이지입니다.

정적 컨텐츠는 스프링에서 다음과 같이 제공됩니다.

웹 브라우저에서 url으로 요청을 받으면 내장 톰캣 서버가 먼저 요청을 받고 스프링에게 넘겨줍니다.

스프링은 먼저 Controller 중에서 hello-static을 찾고, 없다면 resources/static에서 hello-static.html을 찾습니다.

해당하는 html 파일이 있다면 이를 웹 브라우저에 반환, 웹 페이지를 그대로 출력합니다.

2. MVC와 템플릿 엔진

JSP, PHP와 같이 서버에서 프로그래밍을 하여 html 파일을 동적으로 실행합니다.

이를 위해 Model, View, Controller(MVC)로 분리하여 개발을 진행합니다.

View는 화면을 보여주는 일에만 집중하고, Controller는 비즈니스 로직 또는 서버의 뒷단에 관련된 일에 집중합니다.

정적 컨텐츠에서는 단순히 html 파일만 띄웠다면 이번에는 외부에서 파라미터를 받아옵니다.

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

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

위와 같이 Controller와 html 파일을 작성하고 실행 후 주소창에

localhost:8080/hello-mvc?name=spring

위와 같은 url을 입력하면

위와 같은 웹 페이지를 확인할 수 있습니다.

MVC 템플릿 엔진은 다음과 같이 동작합니다.

웹 브라우저에서 url을 통해 요청을 받으면 내장 톰캣 서버를 거쳐 스프링은 hello-mvc라는 Controller를 찾습니다. 해당 Controller가 Model에 값이 spring인 key name을 담고 hello-template를 리턴하면서 Model을 넘겨주면, viewResolver라는 화면과 관련한 장치가 동작하여 resources/template에서 hello-template이라는 화면(html 파일)을 찾고 템플릿 엔진을 연결합니다. 모델을 넘겨받은 Thymeleaf 템플릿 엔진은 렌더링 후(name을 spring으로 변환 후) 변환된 html을 웹 브라우저에 넘깁니다.

3. API

클라이언트(안드로이드 등)와 개발을 진행할 때, 또는 서버끼리 데이터를 전달할 때 서버가 JSON이라는 데이터 구조 포맷으로 클라이언트(및 서버)에게 데이터를 전달합니다.

MVC 방식과의 차이점은 웹 브라우저에 html을 내리는가, 데이터를 바로 내리는 가의 차이에 있습니다.

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

위의 MVC방식에 @ResponseBody가 추가되었습니다. 이는 http의 body부에서 데이터를 직접 받겠다는 뜻입니다.

이 방식은 View가 따로 필요하지 않으며, return 되는 "hello"+name이 요청한 client에 바로 내려옵니다. 실행 후

localhost:8080/hello-string?name=spring

을 통해 확인하면

와 같이 View를 따로 작성하지 않았음에도 웹 브라우저에 해당 문자열이 그대로 출력되는 것을 확인할 수 있습니다.

문자가 아닌 데이터(객체)를 반환하기 위한 방법은 다음과 같습니다.

@Controller
public class HelloController {
    @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;
        }
    }
}

Controller에서 마찬가지로 @ResponseBody를 사용하고 Hello클래스를 정의, 객체를 생성하고 리턴하였습니다.

이를 실행 후 localhost:8080/hello-api? name=spring으로 확인해 보면

위와 같이 객체가 JSON 형식으로 변환된 것을 확인할 수 있습니다.

JSON은 key-value 쌍으로 이루어진 구조로 xml방식에 비해 간단하고 가벼워 최근 프로젝트에서 많이 사용되는 방식입니다.

@ResponseBody의 작동 방식을 살펴봅니다.

스프링은 이전과 같이 hello-api라는 Controller를 찾습니다. 이때 Controller에 @ResponseBody 태그가 붙어있으면 MVC 방식에서의 viewResolver가 아닌 HttpMessageConverter가 동작합니다. Controller에서 반환하는 값이 string이라면 StringHttpMessageConverter가 작동하여 string을 바로 처리하고, 객체가 반환되면 MappingJackson2HttpMessageConverter가 작동해 객체를 JSON방식으로 변환합니다. JSON으로 만들어진 객체는 바로 웹 브라우저에 key-value 쌍으로 반환됩니다.

이번 강의에서는 스프링에서의 대표적인 웹 개발 방식 3가지에 대해 알아보았습니다.

다음 강의에서는 회원 관리 예제를 작성하며 백엔드 개발을 학습해 봅니다.

저작자표시

'웹 프로그래밍 > 공부, 연습' 카테고리의 다른 글

[강좌]스프링 입문 - 6. 스프링 DB 접근 기술(1) (0)	2021.06.10
[강좌]스프링 입문 - 5. 회원 관리 예제 - 웹 MVC 개발 (3)	2021.06.09
[강좌]스프링 입문 - 4. 스프링 빈과 의존관계 (1)	2021.06.07
[강좌]스프링 입문 - 3. 회원 관리 예제 - 백엔드 개발 (1)	2021.06.03
[강좌]스프링 입문 - 1. 프로젝트 환경설정 (2)	2021.06.01

티스토리툴바