[입문] 웹 개발 기초 - 정적 컨텐츠, MVC와 템플릿 엔진, API

크게 세 종류가 있다.

01. 정적 컨텐츠 : 파일을 웹 브라우저에 그냥 전달해준다.

02 MVC & 템플릿 엔진 : 서버에서 HTML을 조금 바꿔서 전달해준다

03. API : json 데이터 포맷으로 클라이언트에게 데이터 전달 / 서버끼리 통신할 때도 사용

 

정적 컨텐츠

- 스프링부트에서 정적 컨텐츠를 지원한다.

https://docs.spring.io/spring-boot/docs/2.3.1.RELEASE/reference/html/spring-boot-features.html#boot-features-spring-mvc-static-content

Spring Boot Features

정적 컨텐츠 동작 원리

01. 웹 브라우저에서 localhost에 접속 요청을 보낸다.

02. 내장 톰캣 서버가 요청을 받아 hello-static을 확인한 후 스프링으로 보낸다.

03. 컨트롤러를 확인한다(컨트롤러가 우선 순위를 가진다) -> 근데 관련 컨트롤러가 없다

04. resources/static 내부에 동일 이름을 가진 파일이 있는지 찾아본다.

05. 있으면 반환한다. 

 

MVC & 템플릿 엔진

MVC란?

Model, View, Controller로 구성되어 있다. 원래는 view랑 controller를 구분하지 않았지만 유지보수를 용이하게 하기 위해 분리하여 현재의 형태가 되었다!

 

Controller

@Controller
public class HelloController {
    @GetMapping("hello-mvc")
    public String helloMvc(@RequestParam(value="name") String name, Model model){ // 외부에서 파라미터 받는다
        model.addAttribute("name", name); // 앞에가 key 뒤에가 value
        return "hello-template";
    }
}

- 참고로 여기에서 홈페이지 주소는 localhost:8080/hello-mvc이다! (hello-template 아님)

localhost:8080/hello-mvc로 들어가면 error가 뜨는데 name 파라미터를 넘겨주지 않아서 발생하는 에러이다

위 코드에 name에서 ctrl+P(윈도우 기준)을 누르면 옵션이 나타나는데, required를 false로 지정해주면 파라미터를 안 넘겨도 되기 때문에 위와 같은 오류를 피할 수 있다(required는 default true)

하지만 우리는 name을 받아야 하므로...사이트 주소에 직접 name을 넣어주자

성공

 

MVC, 템플릿 엔진 작동 원리

01. 웹 브라우저 -> 톰캣 서버 -> 스프링

02. helloController에 메소드가 mapping 되어있으므로 해당 조건에 따라 스프링에 넘겨준다

03. viewResolver가 view를 찾아주고 템플릿 엔진을 연결해준다. -> template에서 찾아서 넘겨준다. 

04. 템플릿 엔진이 렌더링을 하여(정적 브라우저와의 차이점) 웹 브라우저에 넘겨준다

 

API

@ResponseBody 문자 반환

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

@ResponseBody 를 사용하면 뷰 리졸버( viewResolver )를 사용하지 않는다 - 템플릿 엔진과의 차이점!!

대신에 HTTP의 BODY에 문자 내용을 직접 반환(HTML BODY TAG를 말하는 것이 아님)

- 소스 코드를 보면 HTML없이 냅다 hello name만 나온다

 

@ResponseBody 객체 반환

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

		// property 접근 방식(JavaBean)
        public String getName() {
            return name;
        }

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

http://localhost:8080/hello-api?name=spring

실행하면 JSON 형태의 결과가 나온다.

기존의 xml 방식은 열고 닫아야 했는데 json은 바로 나오기 때문에 간단하다. 최근에는 거의 JSON 방식으로 가고 있다. 

 

@ResponseBody 작동원리

01. 브라우저 -> 톰캣 -> 스프링

02. helloapi Controller확인 -> @ResponseBody annotation 확인 -> http에 그냥 데이터를 넘기자!

근데 문자가 아니고 객체이다? default JSON 방식으로 반환하자

• HTTP의 BODY에 문자 내용을 직접 반환
• viewResolver 대신 HttpMessageConverter가 동작한다
• 기본 문자 처리 : StringHttpMessageConverter
• 기본 객체 처리 : MappingJackson2HttpMessageConverter (Jackson - JSON으로 바꿔주는 라이브러리)
• byte 처리 등 기타 여러 HttpMessageConverter가 기본으로 등록되어 있음

참고 : 클라이언트의 HTTP Accept 헤더와 서버의 컨트롤러 반환 타입 정보 둘을 조합해서 HttpMessageConverter가 선택된다. 

---

오늘의 팁✨

Ctrl+shift+enter를 누르면 끝까지 자동완성해준다