1. 정적 컨텐츠
정적 컨텐츠 동작 원리
- 클라이언트로부터 요청을 받고 서버에 미리 저장된 HTML, CSS, JS 등의 파일을 응답하는 것
정적 컨텐츠라는 이름처럼 고정된 느낌이 있으므로 무언가에 반응하거나 각각 사용자마다 다른 컨텐츠를 보여주지 않고 언제 어디서나 설정된 파일 그대로의 모습을 보여준다.
Spring에서 구현한 모습은 이렇다.
<!DOCTYPE HTML>
<html>
<head>
<title static content></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
정적 컨텐츠
</body>
</html>
src - resources - static에 하위 폴더로 hello-static 폴더를 만든 뒤에 위 html 코드를 쓴 뒤 작동을 시키고
localhost.8080/hello-static.html로 들어가면 아래와 같이 우리가 body 칸에 쓴 정적 컨텐츠라는 글이 나온다.
정적 컨텐츠의 동작 원리를 살펴보자.
우선 우리가 웹 브라우저에 localhost:8080/hello-static. html을 치면
1. 웹 브라우저는 내장 톰캣 서버로 hello-stati.html에서 사용자로부터 요청이 들어왔다고 알려준다.
2. 그러면 내장 톰캣 서버는 우선 순위에 따라 스프링 컨테이너에게 이 소식을 알려주고 hello-static 관련 컨트롤러가 있는지 살펴본다.
3. 스프링 컨테이너에 관련 컨트롤러가 없으므로 resources - static 파일에서 hello-static.html 파일이 있는지
살펴보고 있다면 해당 파일을 응답한다.
(스프링 컨테이너가 resources - static 파일보다 우선순위가 높다는 것도 알아두자.
2. MVC와 템플릿 엔진
MVC - Model, View, Controller
템플릿 엔진
Template는 '주형, 틀' 이란 뜻으로
템플릿 엔진은 지정된 틀 + 데이터로 HTML 문서를 표시하는 것을 말한다. ## 매우 간략하게 말한 설명
위에서 본 정적 콘텐츠는 템플릿 엔진을 쓰지 않고 개발자가 코딩을 해놓은 상태 그대로 웹 브라우저에 표시가 되었다.
하지만 MVC, 템플릿 엔진은 동적 컨텐츠를 다루는 데에 쓰이므로 템플릿 엔진을 알아두어야 할 필요가 있다.
템플릿 엔진은 처음에 들으면 상당히 생소하고 이해하기 어려울 수 있으니 구글링을 하여 다양한 설명, 코드를 보고
이해하길 바란다. 아래에서는 템플릿 엔진을 간략하게만 설명할 것이다.
우선 템플릿 엔진은 '서버 사이드 템플릿 엔진'과 '클라이언트 사이드 템플릿 엔진'으로 나눌 수 있다.
1. 서버 사이드 템플릿 엔진 (Server Side Template Engime)
말 그대로 서버 쪽에서 사용하는 템플릿 엔진이다. 위에서 템플릿은 하나의 틀이라고 말했다. 즉, 클라이언트가 서버로 요청을 보내면, 서버에서는 그 요청에 따라 데이터를 처리해야 하는데 이 데이터를 처리하는 과정에서 미리 만들어놓은 틀(템플릿)에 필요한 데이터를 넣고 HTML을 클라이언트에게 전달하는 것이다.
서버 사이드 템플릿 엔진의 예시로는 Thymeleaf, JSP, FreeMarker 등이 있다.
@Controller
public class HelloController {
@GetMapping("hello2")
public String hello(Model model) {
model.addAttribute("data", "hello!!");
return "hello";
}
@GetMapping("hello-mvc")
public String helloMvc(@RequestParam("name") String name, Model model) {
model.addAttribute("name", name);
return "hello-template";
}
}
첫번째 코드를 보면 HelloController 클래스에 HelloMvc 메서드를 볼 수 있다. (위의 hello 메서드는 무시해도 된다.)
우선 @GetMapping 으로 "hello-mvc"를 보면
@GetMapping에 대한 설명 먼저 해보자면
직관적으로 이름을 한 번 보겠습니다. Get은 일단 무언가를 얻어온다는 것이고 Mapping은 무언가를 연결시켜준다 라고
생각할 수 있습니다. 이걸 연결해보면 무언가를 얻어와서 연결시켜준다. 즉, 하나의 다리 역할을 한다 라고
상상해볼 수 있습니다.
localhost:8080/hello-mvc라는 url을 쳤을 때
웹 브라우저에서 이 url을 Spring 내부의 Controller로 보내면 여기서 GetMapping을 이용해서 hello/mvc
부분의 메서드를 실행시켜주는 것입니다.
일단 위 화면에서 에러가 난 이유는 RequiredString Parameter 로 넘어가야 할 name이 없기 때문이다.
즉, 필요한 파라미터가 없다라는 뜻이다.
위 사진 처럼 hello-mvc 뒤에 ?name=spring1234를 친 뒤에 실행을 시키면 위와 같이 우리가 넣은 값이
웹 브라우저에 나오는 것을 볼 수 있다.
이 동작 과정을 사진으로 먼저 살펴보자면
1. 웹 브라우저에서 내장 톰캣 서버로 해당 URL을 요청한다.
2. 톰캣 서버는 hello-mvc 라는 것이 왔다고 HelloController에게 전달한다.
3. 이때 @GetMapping을 통해 hello-mvc가 HelloController 내부에 있다고 알 수 있다.
5. 해당 메서드를 실행하게 되며 model값과 return 값을 viewResolver로 넘겨준다.
6. viewResolver는 return 값에 있는 hello-template과 똑같은 이름을 가진 html 파일을 찾는다.
7. Thymeleaf 템플릿 엔진을 이용하여 처리한다.
위에서 동적 컨텐츠 (템플릿 엔진 부분)을 설명했을 때 미리 만들어진 하나의 틀에 우리가 필요한 데이터를 넣어서
그 파일을 웹 브라우저로 전달해준다고 했다.
이때 hello.template.html 파일에서 우리가 변환해야 할 데이터 부분인 ${name}부분을 동적으로 바꿔서
웹 브라우저에 보여주는 것이다.
<html xmlns:th="http://www.thymeleaf.org">
<body>
<p th:text="'hello ' + ${name}"></p>
</body>
</html>
(hello.template.html 파일이다.)
localhost:8080/hello-mvc?name=spring1234 웹 브라우저의 소스 코드르르 보면 위와 같이 나온다.
우리가 바꾼 spring1234가 위 html 파일에 변환되어서 들어가 있는 것을 볼 수 있다.
'Spring > Spring' 카테고리의 다른 글
| [Spring] 빈 조회하기 - 상속 관계 (1) | 2024.08.30 |
|---|---|
| [Spring] 컨테이너에 등록된 빈 조회하기 (0) | 2024.08.29 |
| [Spring] 스프링 컨테이너 (0) | 2024.08.29 |
| [Spring] API(JSON 방식)와 @ResponseBody (0) | 2024.08.24 |
| [Spring] 라이브러리 살펴보기 (gradle, library, dependencies) (0) | 2024.08.23 |
