첫 게시글에서 위와 같이 웹페이지를 여는것에 성공했지만 각종 오류 메시지로 가득합니다.
먼저 src -> main -> resource -> static 폴더에 index.html 파일을 새로 만들어 줍니다.
static에 index.html 파일은 spring boot가 기본적으로 Welcome Page로 인식합니다.
https://docs.spring.io/spring-boot/docs/2.7.4/reference/htmlsingle/#web
index.html 파일에 아래와 같은 html 코드를 입력해줍니다.
html 코드
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Hello</title>
</head>
<body>
Hello
<a href="/hello">hello</a>
</body>
</html>
이제 HelloSpringApplication.java를 재실행 해준 후에 localhost:8080 으로 접속하면 아래와 같은 페이지가 나오게 됩니다.
Template Engine
위에서 만든 Welcome Page는 html 코드를 그냥 그대로 넘겨준것 입니다.
Template Engine을 사용하면 html의 코드를 변경할 수 있습니다.
Template Engine은 Thymeleaf 사용하겠습니다.
먼저 hello.hellospring 폴더 내부에 controller package를 생성해줍니다.
그 후, controller 패키지 폴더 내부에 HelloController 클래스 파일을 하나 만들어 주고 위의 내용을 적어줍니다.
여기서 @GetMapping("hello") 의 의미는 /hello라고 들어오면 아래의 hello 함수가 실행되게 됩니다.
다음으로는 /hello 페이지를 만들어 주겠습니다.
templates 폴더 내부에 hello.html 파일을 만들어 준 후에 위의 내용을 채워줍니다.
이제 model.addAttribute("data", "hello"); 의 의미를 보겠습니다.
여기서 "data"는 hello.html의 ${data}와 같다고 보시면 되고 "data"를 "hello"로 치환하겠다는 의미가 되겠습니다.
이제 localhost:8080/hello 로 접속을 하면
위와 같이 data가 치환이 되어서 나오는 것을 볼 수 있습니다.
동작 방식
이제 동작방식을 보겠습니다.
springboot에는 톰켓이라는 내장 서버가 있습니다.
url에 localhost:8080/hello 라고 던지게 되면 톰켓에서 /hello 라는 것을 인식하게 되고
spring controller를 보면 @GetMapping("hello") 라는 문구에서 hello와 매칭시켜주게 됩니다.
그 후에, spring이 model을 만들어서 인자값으로 넣어주게 되고 저희가 정의한 함수가 실행하게 됩니다.
그리고 return "hello"; 라는 문구는 templates 폴더 내부에 있는 hello.html을 실행시켜라 라는 지시를 내리게 됩니다.
출처 : 인프런 - 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 (김영한 강사님)
'Web > backend' 카테고리의 다른 글
| 06. API - 정리 (0) | 2022.10.05 |
|---|---|
| 05. 정적 컨텐츠, MVC (0) | 2022.10.04 |
| 04. 빌드하고 실행하기 (0) | 2022.10.04 |
| 02. 사용하는 library (0) | 2022.09.30 |
| 01. Spring initializr, IntelliJ 사용하기 (0) | 2022.09.30 |