지난 포스팅에이어, 이번에는 Spring MVC를 사용하여 컨트롤러에서 페이지를 호출하는 예제를
작성해 보려고 합니다.
먼저, 다들 아시겠지만 간단히 MVC를 짚어 보자면 Model View Controller의 의미이며
스프링이 제공하는 웹 구축을 위한 프레임워크로 이해하시면 됩니다.
| Model은 무엇을 할 지에 대한 로직을 담고 비지니스 로직을 처리하기 위한 역할을 담당합니다. View는 최종 사용자에게 결과를 화면(UI)로 보여주기 위한 역할을 하게 됩니다. Controller은 이 두 사이에 있는 컴포넌트로 Model이 데이터를 어떻게 처리할 지를 알려주는 역할을 담당합니다. 즉, 클라이언트의 요청에 대해 Model이 업무 수행을 완료하면 그 결과를 가지고 화면을 생성하도록 View에 전달 하는 역할을 하게 되며, 일종의 조정자를 담당합니다. |
위와 같은 관계에서 예를 들어 볼까요?
Controller의 가장 많이 쓰이는 어노테이션(Annotation) 중 @Controller는 Controller의 역할을 할 것이다라는 명시하는 용도로 사용되며, 비지니스 로직을 호출하여 전달할 Model과 View를 반환합니다.
@RequestMapping은 클라이언트의 요청에 대해 어떤 컨트롤러 또는 어떤 메서드가 담당하여 처리할 지 매핑하는 명시자 입니다. 보통 메서드 선언부에 URL을 명시하여 사용하게 됩니다.
(ex:@RequestMapping(value="/main", method=@RequestMethod.GET)
이제 설명은 이만하고, 실습을 통해 알아보도록 하겠습니다.
SampleController (@Controller)를 생성하면서 진행해 보도록 하겠습니다.
com.mobile.mis 하위에 sample.controller 패키지를 생성합니다.
그 안에 SampleController 파일(Java Class)을 생성해 봅시다.
Controller의 내용은 아래의 소스를 참고하여 http://localhost:8080/main 호출 시, static/index.html 이 호출되도록
컨트롤러의 내용을 작성해 봅시다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
package com.mobile.mis.sample.controller;
import org.springframework.stereotype.Controller;
import org.sprsssingframework.web.bind.annotation.RequestMapping;
@Controller
public class SampleController {
@RequestMapping(value = "/main")
public String main(){
return "index.html";
}
}
|
cs |
아래와 같이 작성이 되었으면 완성된 것입니다.
자, 이제 서버를 기동하여 http://localhost:8080/main 를 호출해 보도록 하겠습니다.
지난번과 마찬가지로 MisApplication 파일을 우클릭하여, Run MisApplication.main()을 실행합니다.
아래와 같이 지난번에 만들어 둔, index.html이 실행되는 것을 알 수 있습니다.
물론, http://localhost:8080으로 호출해도 같은 html 파일이 호출될 것입니다.
지금까지는 View로 반환하는 컨트롤러를 작성해 보았고, 이번에는 문자열 Data를 View로 반환하는 예제를 만들어 보겠습니다.
데이터 반환을 위해서 사용해야 하는 어노테이션은 @ResponseBody를 사용하며 문자열, 맵, json등 반환이 가능합니다.
위의 내용에 이어, SampleController에 아래와 같이 소스를 추가해 줍시다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
package com.mobile.mis.sample.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class Controller {
@RequestMapping(value = "/main")
public String main(){
return "index.html";
}
@ResponseBody
@RequestMapping("/sample")
public String sample() {
String data = "@ResponseBody 어노테이션을 통해 반환";
return data;
}
}
|
cs |
위와 같이 코드를 작성하면, 에러가 발생할 것입니다. 눈치 채셨겠지만 @ResponseBody 어노테이션을 사용하려면 import class 를 해야 하는데 import문이 빠져 있기 때문이죠... 간단하게 단축키를 통해 입력이 가능한데요..
빨갛게 에러표시가되는 13번째 줄 @ResponseBody에 마우스를 가져다 댄 상태에서 ctrl + 1을 누르면 [import class]를
클릭하여 간편하게 import문이 자동 생성되는 것을 알아보기 위해서 였습니다.
완성되었다면 아래와 같이 나타나야 합니다.
이제 컨트롤러의 코드구성은 끝나고, View에서 데이터를 받아서 보여 줄 수 있도록 static/index.hml 파일을 수정해 보도록 합시다.
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스프링부트 index.html</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- @Controller와, @ResponseBody 어노테이션으로 데이터 View 구현 -->
<script>
$.ajax({
type: "GET",
url: "/sample",
success: (data) => {
console.log(data);
$('#sample1').html(data);
}
})
</script>
</head>
<body>
<h1>스프링부트 첫 화면 입니다.</h1>
<p> 이 페이지는 인덱스 페이지 입니다. </p> </ br>
<p> 스프링부트는 resources/static 폴더를 기본으로 인식합니다. </p> </ br>
<div id="sample1"> </div>
</body>
</html>
|
cs |
http://localhost:8080/main 으로 접속하여 테스트를 진행해 보면,
아래와 같이 ajax를 사용하여 get 방식으로 /sample 의 결과를 받아 div(sample1) 영역에 보여지게 됩니다.
다음 포스팅에서는 @Controller 어노테이션과 @RestController 어노테이션에 대해 살펴보도록 하겠습니다.
'SPRING BOOT' 카테고리의 다른 글
| [스프링부트 6] Spring MVC View 만들기 (JSP) (7) | 2021.11.10 |
|---|---|
| [스프링부트 5] Spring MVC Controller 만들기 2탄 (0) | 2021.11.10 |
| [스프링부트 3] IntelliJ를 이용하여 스프링부트 개발 시작하기 (0) | 2021.11.09 |
| [스프링부트 2] 스프링부트(Spring Initializr) 프로젝트 생성하기 (0) | 2021.11.09 |
| [스프링부트 1] 개발환경 IntelliJ (인텔리제이) 설치 (0) | 2021.11.09 |