[Spring] 스프링 입문강의[5] - spring 웹 개발 기초 및 MVC

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의

<김영한의 스프링 입문강의 참조>

 

 

1. 스프링 웹 개발 기초

 총 3가지의 방식이 있다.

• 정적 컨텐츠
  • 만들어진 html 파일을 보여준다.
• MVC와 템플릿 엔진
  • 후술
• API
  • 후술

 

2. 정적 컨텐츠

 static 폴더 내부에 html파일을 만들고 저장, 이후 서버를 실행한 후

url에 작성한 html 파일.html만 추가해주면 만들어 놓은 html파일이 웹 상에 보여진다.

 

간단한 원리를 배우고, 이미지를 만들어보자.

정적 컨텐츠 이미지

웹 브라우저에서 요청이 들어오면

• 요청을 톰캣 서버로 전달 후 톰캣 서버는 스프링에 요청을 전달한다.
• 스프링은 우선 스프링 컨테이너에서 관련 컨트롤러가 존재하는지 부터 확인한 후, 없다면
• static 폴더에 가서 관련 html이 존재하는지 확인한다.

컨트롤러 확인이 우선순위이다.

 

여기서도 없다면? error status 404를 raise하게 된다.

 

 

3. MVC와 템플릿 엔진

 수업 중 만든 HelloController가 Controller, resources/template 속의 /hello-template.html 파일이 View가 되고 Model은 Controller속에서 생성한 helloMvc객체가 된다.

 

View는 화면을 그리는 것에만 온 집중을 쏟아야 한다.

Model과 Controller는 비즈니스 로직의 내부 구현에 신경써야 한다.

 

3-1. MVC란

 MVC를 간단하게 알아보자.

 

 Model - View - Controller의 약자로, 사용자 인터페이스, 데이터 논리 제어를 구현하는데 사용되는 소프트웨어 디자인 패턴이다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 둔다. 즉, 어플리케이션의 시각적 요소와 그 이면의 로직을 서로 영향 없이 쉽게 고칠 수 있는 환경을 만들 수 있다.

 

Model은 어플리케이션의 정보, 즉 데이터를 나타내며

View는 텍스트, 체크박스 항목과 같이 User Interface(UI) 요소를,

Controller는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다.

 

더 정확히는,

• Model
  • 어떠한 동작을 수행하는 코드를 의미, 사용자에게 어떻게 보일지에 대해 신경쓰지 않아도 된다(표시 형식이 자유롭다). 모델은 순수하게 public 함수로만 이루어진다. 각 함수들은 User query에 대한 정보를 제공할 수 있으며 Model의 상태를 수정할 수도 있다.
• View
  • 보여줄 값(Model)을 Controller로부터 받아와 사용자에게 보여준다.
  • MVC에서 Model은 여러 View를 가질 수 있다.
• Controller
  • Controller를 사용해 Model의 상태를 바꿀 수 있다. 상태를 바꾸면 Model은 등록된 View에 자신의 상태가 바뀌었다는 것을 알리고 View는 이에 맞게 사용자에게 Model의 상태를 보여준다.
  • MVC에서 View는 여러 Controller를 가지고 있다.

 

각 구성요소들은 다음과 같은 관계를 가진다.

• Model은 Model 상태에 변화가 있을 때 Controller와 View에 이를 통보한다.
  • 이를 통해 View는 항상 최신의 결과를 보여주고, Controller는 Model변화에 따른 적용 가능한 명령을 추가 / 제거 / 수정할 수 있다. MVC 구현에서 Model의 통보 대신 View or Controller가 직접 Model의 상태를 읽어 오기(polling)도 한다.
• View는 사용자가 보게 될 결과물을 생성하기 위해 Model로부터 정보를 얻어 온다.
• Controller는 Model에 명령을 보내 Model 상태를 변경할 수 있다. 또한 Controller가 관련 View에 명령을 보내 Model의 표시 방법을 변경할 수 있다(문서를 스크롤 하는 과정).

 

3-1-1. MVC 예시

 간단한 쇼핑 리스트 앱(소프트웨어)을 생각해보자.

비즈니스적 요구는 이번 주에 사야할 각 item의 이름, 개수, 가격의 list를 볼 수 있게 하는 것이다.

MVC를 이용해 이 기능의 일부를 구현하는 방법을 보자.

https://developer.mozilla.org/en-US/docs/Glossary/MVC/model-view-controller-light-blue.png

• Model
  •  list항목이 포함해야 하는 데이터(이름, 개수, 가격)와 이미 존재하는 list 항목이 무엇인지를 지정한다.
• View
  • add to cart(장바구니에 넣기)와 같이 사용자가 보게될 양식을 정의한다.
• Controller
  • 쇼핑 list는 항목을 추가하거나 제거할 수 있게 해주는 입력 폼과 버튼을 가진다. 이러한 행위는 Model의 update를 발생시킨다. Controller에 전송된 입력은 Model에 적절한 처리를 하게 만들고, 처리된 데이터를 다시 View로 전송한다.

 

3-1-1. MVC on the web

 웹에서 일련의 동작은 MVC패턴으로 다음과 같이 실행된다.

• 사용자가 웹사이트에 접속
• Controller는 사용자가 요청한 웹페이지를 서비스하기 위해 모델을 호출
• Model은 DB나 file과 같은 데이터 소스를 제어한 후 결과를 return
• Controller는 Model이 return한 결과를 View에 반영
• 데이터가 반영된 View는 사용자에게 보여진다.

 

3-2. MVC, 템플릿 엔진 이미지

MVC, 템플릿 엔진 이미지

정적 컨텐츠와의 차이는 MVC구조에서 viewResolver가 변환한 HTML을 웹 브라우저에 전달하는 것에 있다.

(정적 컨텐츠는 변환 안하고 static html을 그냥 웹브라우저에 전달)

 

 

 

 

* ${name}은 model의 key값이 name인 것에서 값을 꺼내서 return해주는 역할을 한다.

 

 

 

4. API

 HelloController에 다음과 같은 메소드를 추가한다.

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

 

 

url query로 name parameter에 spring을 넣어줬다면,

Response의 소스코드는 단순히

hello spring

가 된다. 얼마나 효율적인가!

 

 

그런데 사실 이 방법은 주로 데이터를 받기 위해 쓰인다고 한다.

 

 

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

 html get함수에 Hello 라는 객체를 새로 정의한 점이 다르다.

 

Spring은 객체를 return하게 되면 이를 JSON type으로 변환해 response로 주는게 default이다.

문자를 받으면 HttpMessageConverter에서 StringConverter가, 객체를 받으면 JSONConverter가 작동을 한다.

ViewResolver 대신 HttpMessageConverter가 동작한다는 것이 템플릿 엔진을 이용한 동작과의 차이점이다.

@ResponseBody 사용 원리

 

이후 서버를 구동한 후 url에 

http://localhost:8080/hello-api?name=spring 를 입력하면

 

{"name":"spring"}

이라는 JSON 형태의 response를 받을 수 있다.

 

 

static class Hello{
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

 Hello 객체는 자바 bin 규약을 따라 getter와 setter를 구현해 객체를 캡슐화한다.

 

0. References

모델-뷰-컨트롤러 - 위키백과, 우리 모두의 백과사전

MVC - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

[개발상식] MVC 패턴이란? (Model-View-Controller)