이번에는 스프링 부트에서 웹 개발을 할 때 가장 먼저 마딱트리는 웹 개발 방식들에 대하여 공부했다.
스프링 부트에서 웹 개발을 할 때, 아래와 같은 세가지 방식을 주로 사용한다고 한다.
✨ 정적 컨텐츠를 활용한 웹 개발
✨ MVC와 템플릿 엔진을 활용한 웹 개발(템플릿 엔진: 미리 정의된 템플릿과 데이터를 엮어서, 최종적으로 보여질 화면을 만들어주는 엔진)
✨ API 방식을 사용한 웹 개발
그럼 아래에서 하나씩 살펴보겠다.
1. 정적 컨텐츠
클라이언트에게 페이지를 넘길 때, 별도의 변환 과정을 거치지 않고, 미리 저장된 문서 그대로 제공하는 방식을 의미한다.
이전 포스트에서 View를 띄워 보는 과정에서, 정적 컨텐츠를 활용한 페이지 구성을 이미 한번 다루어 보았다.
먼저 프로젝트의 static 폴더에 아래의 html 문서를 생성한 후, 서버를 실행해 보자.
./src/main/java/resources/static/static_content.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
이 페이지는 정적 컨텐츠입니다.
</body>
</html>이후 위의 html문서의 주소를 도메인으로 입력하면, 아래처럼 html 문서가 그대로 출력되는 것을 볼 수 있다.
정적 컨텐츠는 이름 그대로 정적인, 즉!! 별도의 처리, 변환 등의 과정 없이, 저장된 그대로 보여지는 컨텐츠를 의미한다.
Spring boot에서는 이처럼 정적 컨텐츠를 활용하여 웹 페이지를 구성할 수 있다.
2. MVC와 템플릿 엔진
✨ Model: 데이터를 관리하는 부분
✨ View: 보여질 화면(템플릿)을 미리 정의 부분
✨ Controller: Model과 View를 연결해주는 부분, 클라이언트가 View에서 입력한 내용을 Model에 반영하고, Model의 내용을 View에 참조시키는 부분
MVC(Model, View, Controller)는 요즘 서버사이드 프로그래밍에서 정말 많이 쓰이는 패턴이다.
서버의 여러 기능들을 한 곳에 몰아서 개발하지 않고, Model, View, Controller 세 가지 역할로 나누어서 개발하는 디자인 패턴이다.
이렇게 각 역할을 확실하게 구분지어서 코드를 작성하면, 가독성 증가, 유지 보수 용이 등 장점이 아주 많다.
스프링에서도 이런 MVC 패턴을 적극 지원한다.[공식문서1, 공식문서2]
한번 MVC 패턴을 사용하여 페이지를 만들어보자.
먼저 View를 구현해보자.
아래 코드는 타임리프를 활용하여 구성한 문서이다.
프로젝트의 templete 폴더에 아래 문서를 생성하자.
src/templates/MVC_view.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="'이 페이지는 MVC를 이용하여 구성된 페이지입니다.'"></p>
<p th:text="'입력 받은 데이터는 ' + ${mvc_val} + '입니다.'"></p>
</body>
</html>코드를 대충 설명하자면, {mvc_val} 부분이, 프로젝트 모델 안에 저장된 값으로 치환되어, 클라이언트에게 넘어가는 방식이다.
이어서 컨트롤러를 만들어보자.
필자는 편의상 메인 메소드가 위치한 클래스 내부에 컨트롤러를 생성했다.
src/main/java/프로젝트 도메인/프로젝트 이름.java
package com.example.hello;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
@SpringBootApplication
public class HelloApplication {
// 컨트롤러 클래스 생성
@Controller
public class MyController{
// 도메인 주소 매핑, 해당 주소 접근시 동작 정의
@GetMapping("mvc-page")
public String mvcPageMapping(@RequestParam("val") String val, Model model){
model.addAttribute("mvc_val", val);
return "MVC_view";
}
}
public static void main(String[] args) {
SpringApplication.run(HelloApplication.class, args);
}
}컨트롤러 클래스를 자세히 살펴보자.
먼저 @GetMapping을 사용하여 접근할 도메인 주소를 설정한다. 필자는 "mav_page"라는 도메인 주소를 매핑시켰다.
이후 해당 도메인에 접근했을 때 실행될 동작을 정의하는 메소드를 작성하였다.
해당 메소드의 매개변수로 String val, Model model이 있다.
여기에서 model은 프로젝트의 모델에 접근할 수 있도록 하는 객체이다.
그렇다면 String val은 어떤 역할을 하는 변수일까?
잘 살펴보면 String val변수에 @RequestParam()어노테이션이 붙은것을 볼 수 있다.
🎈 @RequestParam
쿼리 형식의 서블릿 파라미터를, 메소드안에서 변수처럼 사용할 수 있게 해준다.[공식문서]
✨ 쿼리 파라미터란?
https://www.google.co.kr/search?q=apple
위의 주소를 한번 살펴보자.
/search 로 끝나는 도메인 주소 뒤에 ?q=java 가 붙어있는 것을 볼 수 있다.
여기서 ?뒤의 내용이 바로 쿼리 파라미터이다.
서버로 데이터를 전송해야 할 때, 복잡하게 body에 값을 집어넣지 않고, 간단하게 쿼리 파라미터를 사용하여 데이터를 전송할 수 있다.
즉 RequestParam변수는, 클라이언트가 도메인 주소에 접근할 때 "val"이라는 파라미터를 함께 넘기면, 서버단에서 String val 변수를 통해 넘겨받게 되는 것이다.
이후 model.addAttribute()구문을 통해 넘겨받은 파라미터를 모델에 "mvc_val"이라는 이름으로 저장한다.
그리고 이렇게 모델에 저장된 데이터가, View단에서 컨트롤러에 의해 사용되는 것이다.
코드를 모두 작성했으면 서버를 실행하고, "mvc-page"에 접근해보자.
위의 그림처럼 파라미터로 넘겨준 값이 View에서도 보이는 것을 확인 할 수 있다.
위의 동작 과정을 다시 한 번 정리하면 아래와 같다.
- 클라이언트가 "mvc-page"에 접근, 접근하면서 파라미터를 넘김
- 컨트롤러에서 정의된
mvcPageMapping()메소드가 실행됨. 클라이언트가 입력한 파라미터는String val매개변수로 들어감- 파라미터 값을 모델에 추가하고, 해당 데이터와 함께 템플릿 문서를 넘김
- ViewResolver가 화면을 구성, 클라이언트에게 전달
이렇게 MVC를 활용하여 패이지를 구성해보았다.
3. API
지금까지 클라이언트에게 전송되는 데이터는 모두 템플릿(HTML) 형태의 문서였다.
하지만 컴퓨터끼리 간단한 데이터만 전송해야 하는 경우, 굳이 템플릿 문서를 통해 통신하는 과정은 매우 번거롭고, 비효율적인 과정일 것이다.
이럴 때 API 방식을 사용하여, 데이터 그 자체만 바로 넘길 수 있다.
바로 예제를 살펴보자.
컨트롤러에 아래 메소드를 추가한다.
src/main/java/프로젝트 도메인/프로젝트 이름.java -> public class MyController
// API를 사용하여 웹 개발
@GetMapping("api-page")
@ResponseBody // 리턴 값을, http의 바디로 바로 적용, 데이터만 바로 전송
public String apiPageMapping(@RequestParam("val") String val){
return "api를 통해 넘겨받은 값은 " + val;
}API 방식으로, 데이터를 바로 전달하기 위해서는 @ResponseBody어노테이션을 추가해주면 된다.
이후 서버 실행 및 해당 페이지에 접근해보자.
그러면 우리가 반환한 텍스트가 그대로 전송된 것을 확인할 수 있다.
