본문 바로가기

Spring Boot(스프링 부트)

Spring Boot(스프링 부트) > 정적 컨텐츠 vs. MVC vs. API

김영한 선생님께 수업을 듣고 블로그 포스팅을 쓰려고 한다!

저번 학기에도 사실 똑같은 내용으로 수업을 들었었는데 한 번 더 학습을 하니 확실히 이해가 되었다

조금 더 업그레이드 된 이해력으로 포스팅을 하려고 한다

 

Spring Boot에 개발 방식에는 3가지가 있다고 하고 다음과 같다.

1. 정적 컨텐츠
2. MVC와 템플릿 엔진
3. API

 

하나하나 살펴보려고 한다!

 

정적 컨텐츠

 

정적 컨텐츠는 말 그대로 정적인 것으로 변하지 않는 html 등을 보여줄 때 사용하는 방식이다.

 

 

스프링 부트에 내장 톰켓 서버는 항상 컨트롤러를 먼저 첫 번째로 확인한다!

정적 컨텐츠는 관련 컨트롤러(변경 사항)이 없으므로 매핑할 필요도 없이 주소 그대로 입력하면 된다

 

resources > static > hello-staitc.html 파일을 만들었다고 하면

http://localhost:8080/hello-static.html 을 주소창에 입력하여 접근하면 되는 것이다

 

아무래도 개발을 할 때에는 뭔가 많이 쓰이지 않을 방식인 듯 했다!

 

MVC와 템플릿 엔진

 

 

MVC는 Model + View + Controller 방식의 합이다!

Controller에서 Model 객체를 담아서 View에다가 뿌려주는 느낌이다

 

정적 컨텐츠가 아니므로 생성 경로는 resources > templates 에서 html을 작성하면 된다

MVC와 템플릿 엔진을 두 가지 방법으로 설명해 주셨다

첫 번째는 단순히 모델 객체만 담아서 html을 뿌려주는 방식,

두 번째는 Param 값을 받아서 모델 객체에 담아 html을 뿌려주는 방식이 있다

코드를 보니 더 이해가 쉬웠다!

아래 코드는 HelloController 클래스의 코드와 html 코드이다

// 1. 단순히 모델 객체만 담아서 html을 뿌려주는 방식
@GetMapping("hello")
public String hello(Model model) {
         model.addAttribute("data", "hello!!");
         return "hello";
}

// 2. Param 값을 받아서 모델 객체에 담아 html을 뿌려주는 방식
@GetMapping("hello-template")
public String helloMvc(@RequestParam("name") String name, Model model) {
         model.addAttribute("name", name);
         return "hello-template";
}
hello.html

<!DOCTYPE html>
<html xmln:th="http://www.thymeleaf.org" xmlns:xmln="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Hello</title>
</head>
<body>
         <p th:text="'안녕하세요. ' + ${data}">안녕하세요. 손님</p>
</body>
</html>
hello-template.html

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

 

MVC와 템플릿 엔진의 큰 특징은 Model이 있다는 것이다. Model이 있다면 MVC 방식이라고 생각하면 될 것 같다.

 

 

그림을 보면서 설명하면 주소에 접근을 하면 우선적으로 컨트롤러를 확인한다!

컨트롤러에 해당 주소가 매핑되어 있기 때문에 실행하게 되는 것!

우선 return의 값은 return 값의 html 주소로 이동시킨 다는 의미이다

html 코드는 아래에 첨부했다

 

첫 번째의 경우는 hello.html 주소로 이동이 될텐데 타임리프를 이용하여 데이터 값을 변환하는 기능을 구현하였다

data의 값을 키 값으로 두고 컨트롤러에서 이를 "hello!!"라고 변환하여 모델 객체에 저장하는 느낌이다

그렇게 hello.html이 리턴되면 data 키 값이 hello!!라고 변환되어 html 파일이 뜰 것이다

 

두 번째의 경우는 Param 값을 받기 때문에 주소창에 추가적으로 입력이 필요하다

예를 들어 http://localhost:8080/hello-template?name=hello!! 식으로

name 값을 입력해주어야 저 컨트롤러의 메소드가 실행된다!

만약 name 값을 입력하지 않고 http://localhost:8080/hello-template 라고 하면 에러!

그렇게 Param 값을 입력해주면 name의 값이 String name에 저장되고 이도 마찬가지로 html에 있는 name의 키 값을 String name에 저장된 문자로 변환되어 html을 출력하게 해준다

즉, name 키 값 으로 hello!!가 출력이 될 것이다

 

 

API


API는 html 형식으로 뿌려주는 것이 아닌 단순히 문자 형식이나 JSON 형식으로 뿌려주는 방식이다

 

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

 

API의 특징으로는 @ResponseBody가 붙어있다

이는 http의 body에 그대로 return 값을 넣어주겠다는 의미이다.

즉 return 값이 "hello " + name이기 때문에 name을 Spring!!이라고 아래와 같이 기입하게 되면

http://localhost:8080/hello-string?name=Spring!!

html 형식이 아니라 그대로 hello Spring!!이 출력되게 된다

 

 

API 방식으로 String 형식이 아니라 객체 자체를 반환할 수 있는데 이때는 String 형이 아닌 JSON 형식으로 body에 전달하게 된다.

 

@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;
         }
}

 

객체를 전달해주기 위해서는 새로운 클래스를 아래에 생성해주어야 한다

게터와 세터를 단축키로 입력하고(단축키는 아래에 정리해 놓을 것이다!)

Param 값을 받아 객체의 변수 안에 저장한 후 객체를 반환하면, 그 클래스의 변수와 저장된 값이

JSON 형식으로 출력된다

 

만약 주소란에 http://localhost:8080/hello-api?name=Spring!! 라고 입력하게 되면

Hello 클래스에 저장된 변수 name과 저장된 값 Spring!!이 JSON 형식으로 출력되는 것이다

 

 

뭔가 따로 html을 작성할 필요가 없고 Model 객체를 이용하지 않아도 되기 때문에 실제로도 많이 쓰일 거라고 생각이 들었다

 

다음은 API 작동 원리이다

 

 

@ResponseBody라고 명시되어 있으면 HttpMessageConverter를 통해 return 되는 값을 통째로 Body에 넘겨야 된다고 생각을 하게 된다!

만약 return 값이 String이면 StringConverter, 혹은 return 값이 객체면 JsonConverter에 입력되게 되고 Converter 형식에 맞게 그대로 웹 브라우저에 띄워주게 된다

 


 

intelliJ를 쓰면서 선생님께서는 능숙하게 단축키를 활용하셔서 나도 이번에 공부하면서 단축키도 같이 익혀야 겠다고 생각이 들었다

포스팅 할 때마다 알게되는 단축키들을 적고 나중에 한번에 또 정리해서 포스팅을 올리면 어떨까 생각도 들었다

Ctrl + P : 코드 구현부 즉시 보기
                안에 파라미터가 어떤 걸 들어가야할 지 모를 때 쓰는 단축키, 디폴트 값 예시가 나와있다

Alt + Insert + Getter and Setter : Class를 만들고 Getter Setter를 바로 만들어 주는 단축키!
                                                      생성자(Constructor) 생성 단축키

Ctrl + Alt + i : 들여쓰기 단축키
                        사용해보니 한줄씩 적용되는 특징이 있다 
                         Ctrl + A로 전체 선택 후 단축키를 지정하면 한번에 된다!

 

두 번째 강의를 복습하는 것인데 정말 처음에는 멘탈이 나갈 정도로 너무 어려웠었다.

따로 JSP랑 서블릿을 깔짝 학습해서 그런가 뭔가 이해가 쏙쏙 되니까 기분도 좋고, 왜 이런 내용을 이해를 못했을까 싶었다

이론이 중요하다는 말이 무슨 느낌인지 알게되는 거 같다

배울 것들이 산더미라 막막하지만 그래도 한번 뿐인 인생 부딪혀보는 것도 괜찮을 것 같다