정적컨텐츠, MVC패턴 및 템플릿 엔진, API

김현지·2023년 5월 17일

인프런_김영한_스프링강의

Spring

목록 보기

4/5

정적 컨텐츠

정적컨텐츠 : 파일을 그대로 브라우저에 내려받는 것입니다.
스프링 공식문서 > https://bit.ly/3IhQ8O0

<-> 동적인 컨텐츠 : JSP나 PHP처럼 서버에서 가공해서 동적으로 바꾸어서 브라우저에 내려받는 것입니다.

정적 컨텐츠 코드 작성하기

아래의 html 코드를 src > main > static에 hello-static.html 로 작성합니다.


<!DOCTYPE HTML>
<html>
<head>
  <title>Hello</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
정적 컨텐츠 입니다.

</body>
</html>

web browser에 http://localhost:8080/hello-static.html 입력하여 확인합니다.

동작 순서

웹브라우저가 주소창에 localhost:8080/hello-static.html을 입력하여 get방식으로 웹 페이지를 띄우려고 서버에 요청합니다.
내장된 톰캣 서버는 이 요청을 받아들이고, 우선 순위인controller에서 hello-static관련 파일을 찾아보지만, 현재 파일 구조에서는 찾을 수 없습니다.
resources > static에서 hello-static.html파일을 찾을 수 있었고, 이는 정적 컨텐츠가 있는 경로이므로, 정적 컨텐츠로 브라우저에게 응답합니다.

MVC와 템플릿 엔진

MVC(Model, Controller, View)와 템플릿 엔진

keyword : 역할과 책임, 관심사 분할

Model : Controller에서 생성한 데이터를 담아서 View로 전달. (bean)
Controller : 라우터와 비슷함. (Servlet)
View : 유저에게 보여질 화면을 담당하는 부분

mvc패턴과 템플릿 엔진 코드 작성

src > main > resources > templetes에 hello-mvc.html파일 생성하고 코드 작성
- html템플릿을 쓰면 p태그 사이에 내용이 없어도,
  ""따옴표안의 내용이 서버를 통해 실행되면서 메소드가 동작하는 것 처럼 내용이 생긴다.
- p태그의 th는 thymeleaf라는 뜻

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<p th:text="'안녕하세요. ' + ${name}" ></p>
</body>
</html>

src > main > java > com.example.hellospring의 HelloController(저번에 만들어 둔 클래스)에 코드 작성


    @GetMapping("hello-mvc")
    /*@RequestParam("name") 을 사용했다면, 
    브라우저 주소창에 http://localhost:8080/hello-mvc에 추가로 
    ?name=이랑 함께 출력시키고 싶은 내용
    (이 내용이 name에 담겨서 html에 전달 됨)을 입력
    (이게 get방식에서 ?&&~.. 라고 설명하심)*/
    public String helloMvc(@RequestParam("name") String name, Model model){
        model.addAttribute("name", name);
        return "hello-template";
    }

실행결과

?없이 url작성
?와 함께 name에 전달될 값을 작성

동작순서

웹브라우저에서 'http://localhost:8080/hello-mvc?name=스프링 공부 중입니다!'를 입력받아서 서버에 요청
내장 톰캣 서버가 스프링 컨테이너에 URI를 전달
스프링 컨테이너는 우선순위인 helloController에서 hello-template를 찾아서 model에게 반환
모델은 name과 전달할 내용을 감지해서 viewResolver에 전달
viewResolver는 Thymeleaf템플릿 엔진이 처리한templates/hello-template.html을 톰캣에게 전달
톰캣은 이를 html로 변환 후 유저의 웹브라우저에 전달

API

API : JSON데이터 포멧으로 클라이언트에게 전달하고, 화면은 클라이언트가 알아서 그려서 구성합니다.

key-value로 이루어진 json이 출력 되는 코드 작성

(xml보다 가볍고 가독성 및 코드 작성효율이 좋은 
json방식이 좀 더 많이 쓰이는 추세입니다.)

src > main > java > controller > 기존의 HelloContainer 클래스에서 아래와 같이 작성

 @GetMapping("hello-string")
    @ResponseBody //http프로토콜의 head와 body가 있는데 그 body에 이 내용을 직접 넣어주겠다.
    //뷰가 없고 이거 자체로 전달되어 화면이 그려짐. 하려면 html태그를 넣을 수는 있지만 비효율적이다.
    public String helloString(@RequestParam("name") String name){
        return "hello " + name;
    }

   //uri에 hello-api가 감지되면 톰캣에서 해당 코드로 매핑
    @GetMapping("hello-api")
    @ResponseBody
    public Hello helloApi(@RequestParam("name") String name) {
        Hello hello = new Hello(); //객체 생성
        hello.setName(name);
        return hello;//객체를 반환
    }
//getter와 setter, 자바 beanr규약, 객체 property 접근 방식
    static class Hello{ 
        private String name;
        
        //꺼낼때
        public String getName() {
            return name;
        }

        //넣을때
        public void setName(String name) {
            this.name = name;
        }
    }

실행 결과

?name=입력값 없이 요청 할 경우 -> 에러 발생
?name=입력값을 입력하여 요청할 경우 -> 정상적인 페이지 확인

@ResponseBody 사용 원리(코드 동작 순서)

웹브라우저에서 'http://localhost:8080/hello-api?name=데이터'를 주소창에 입력받으면 내장 톰캣 서버에 이를 전달(요청)
톰캣 서버는 URI에서 hello-api를 캐치해서 스프링 컨테이너의 helloController에 전달
스프링은 @ResponseBody 어노테이션을 보고, URI의 name=데이터부분을 hello(name:데이터)객체로 반환
- http의 body에 문자내용을 직접 반환
- viewResolver대신 HttpMessageConverter가 동작
  
  참고 : 클라이언트의 HTTP Accept해더와 서버의 컨트롤러 반환 타입 정보를 조합해서 HttpMessageConverter가 선택된다.
- 기본 문자처리 : 'StringHtpMessageConverter'
- 기본 객체처리 : 'MappingJackson2HttpMessageConverter'