이 글은 인프런에 있는 김영한님의 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술" 강의를 듣고 정리한 필기입니다.
⛅️ Welcome page 만들어보기
저번 시간에 프로젝트 생성을 해보고 빌드를 해보았는데, error 페이지만 나왔었다. 아무것도 없었기 때문이다.
그럼 먼저 제일 간단한 welcome page를 만들어보자.
spring boot는 resources/static/index.html 파일을 넣으면 해당 파일을 welcome page로 만들어준다.
main - resources - static 폴더에 오른쪽 클릭을 하고 new File을 눌러서 indexl.html을 만들어주자.
그럼 이 페이지가 welcome page가 될 것이다.
이후 index.html에 내용을 적고 서버를 실행하면 해당 화면으로 바뀔 것이다.
welcome page에 대해 좀 더 알고 싶다면 spring boot reference doc.을 참고하자!
https://docs.spring.io/spring-boot/docs/2.6.3/reference/htmlsingle/#features 으로 들어가서 알고 싶은 키워드를 검색하면 원하는 내용을 찾을 수 있다.
⛅️ Thymeleaf 템플릿 엔진(Template engine)이란?
우리가 위에서 만든 것은 "정적 페이지 : static"이다.
html에서 적어놓은 파일을 웹 브라우저에 그대로 넘기는 것이다. 파일을 그대로 넘긴 것이다.
하지만 Template engine을 사용하면 본인이 원하는대로 프로그래밍을 해서 html의 모양을 바꿀 수 있다.
우리가 이번에 사용하는 템플릿 엔진은 Thymeleaf라는 템플릿 엔진인데, 버전 3으로 넘어오면서 많은 부분이 개선되었다.
위에서 소개한 spring boot features에서 Template engines를 검색하면 어떤 종류의 템플릿 엔진이 있는지 볼 수 있다.
⛅️ Controller와 Model을 이용하여 동작하는 화면 만들어보기
이번에는 Controller와 Model을 이용하여 동작하는 화면을 만들어보자.
1. 먼저 java - Practice1.practicespring 밑에 controller package를 하나 만들자.
그리고 HelloController 클래스를 하나 생성한다.
2. HelloController에 @Controller라는 어노테이션을 적어 spring에서 컨트롤러임을 인식하도록 한다.
해당 클래스 밑에 helloFunction이라는 메서드를 하나 생성하고, @GetMapping("hello")를 적어준다.
@GetMapping("hello")를 하게 되면 웹 어플리케이션 url에서 /hello가 붙게 되면 spring에서 해당 메서드를 호출한다.
@Controller
public class HelloController {
@GetMapping("hello")
public String helloFunction(Model model){
}
}
3. 이제 hello method의 몸체를 정의해주자. 여기서 매개변수로 전달해준 Model은 MVC 패턴에서의 Model이다.
addAttribute를 통해 값을 추가해준다.
여기서 눈 여겨 볼 사항은 문자열 "hello"를 반환한 것인데, 간단하게 말하자면 resources/templates의 hello.html을 찾으라는 뜻이다.
@Controller
public class HelloController {
@GetMapping("hello")
public String helloFunction(Model model){
model.addAttribute("data", "hello!!");
return "hello";
}
}
4. 그럼 resources/templates에서 New File을 눌러 hello.html을 생성하고 다음과 같이 작성하자.
두 번째 줄의 링크는 thymeleaf를 스키마로 선언한 것이며, 이를 통해 thymeleaf 템플릿 엔진의 문법을 사용할 수 있게 된다.
또한 중간 중간 보이는 th는 thymeleaf의 약자이다.
${data}를 볼 수 있는데, 이는 model 객체에 있는 data라는 key 값에 해당하는 value값으로 치환하라는 뜻이다.
<!DOCTYPE HTMl>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요, ' + ${data}" > 안녕하세요. 손님</p>
</body>
</html>
여기까지 한 후에, intelliJ로 빌드를 하고, herf로 되어있는 hello를 누르면 "안녕하세요, hello!!"가 화면에 뜰 것이다.
⛅️ 실제로 어떤 식으로 작동하는지 알아보기
1. 웹 브라우저에서 localhost:8080/hello 를 요청하면 spring boot에 내장되어있는 웹 서버인 tomcat에게 요청 사항을 전달한다. tomcat은 다시 spring에게 hello 요청을 전달한다.
2. spring은 우선 controller인 helloController에 @GetMapping("hello")로 matching 되어 있는 함수 helloFunction를 찾아서 실행한다.
@GetMapping("hello")를 통해서 localhost:8080/hello 에 matching 된 것으로 보면 된다.
해당 함수에서는 Model이 매개변수로 들어오는데, spring이 Model 객체에 key는 data이고, value는 hello!!인 attribute를 추가한다. 그리고 "hello"를 반환한다.
3. Controller에서 return 값으로 string을 반환하면, viewResolver가 화면(view)를 찾아서 처리를 해준다.
이 때, view mapping이 이루어지는데, view mapping이란 resources/templates/(ViewName).html 경로로 되어있는 파일을 찾는데 여기서 ViewName을 return 값인 hello로 치환하는 것을 말한다.
4. Thymeleaf 템플릿 엔진이 viewResolver가 찾아준 hello.html을 렌더링하여 웹 브라우저에 띄운다.
hello.html에 data라고 있는데, 이는 Controller의 helloFunction 메서드에 있는 model 객체에 추가한 attribute의 key값이다.
실제로 이 view를 렌더링 할 때에는 key에 해당하는 value 값. 즉 hello!!로 렌더링이 된다.
