스프링 입문 - View 환경설정
지난 시간에, 처음 생성한 프로젝트의 main메서드를 실행시키고, 웹브라우져에서 localhoust:8080 에 접속해보면,
위의 사진처럼 에러페이지가 떳다. 아무것도 없어서 뜨는 에러페이지다.
이번에 시간에는 뭐라도 넣어보려고 한다.
Welcome Page 만들기
SpringBoot는 resources/static 폴더에 index.html 이라고 넣어두면 해당 html을 Welcom Page로 인식한다.
Welcome Page란, 도메인만 누르고 들어왔을 때의 첫 화면을 의미한다.
resources/static 경로에 index.html 파일을 생성한다.
<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
Hello
<a href="/hello">hello</a>
</body>
</html>위의 html 코드를 index.html 에 작성해주자.
그리고, 서버를 껏다가 다시 켜서 localhost:8080 에 접속해보자.
이렇게 Welcome Page가 잘 만들어 졌다.
SpringBoot는 Spring생태계 자체를 감싸서 편리하게 사용할 수 있도록 도와준다.
Spring은 Java엔터프라이즈 웹 어플리케이션 개발과 관련된 전반의 생태계를 거의 다 제공하기 때문에 어마어마하게 크다.
그래서 전부 머릿속에 담을 수가 없다.
즉, 필요한 것을 잘 찾는 능력이 중요하다.
그러면 "Welcom Page"는 어떻게 만들지?" 라고 할 때는 아래와 같이 하면 된다.
먼저, spring.io에 접속한다.
Spring makes Java simple.
Level up your Java code and explore what Spring can do for you.
spring.io
Spring Boot메뉴로 들어간다.
현재 프로젝트에 사용중인 (2.6.7) 의 Reference Doc으로 들어간다.
여러가지 Sections 이 있는데,
찾고자하는 내용과 유사한 섹션들을 잘 살펴보자.
지금은, Web섹션을 살펴보자.
static폴더에서 index.html을 먼저 찾고, 만약에 못찾으면 index template를 찾는 방식... 으로 동작한다.라는 내용을 확인할 수 있다.
이런식으로 필요한 내용을 잘 찾는 것이 중요하다.
방금 전에 index.html에 코드를 작성해서 실행한 것은, 정적페이지이다.
그냥, 우리가 적은 파일을 웹서버가 그대로 웹브라우져에 응답을 주는 것이다.
프로그래밍이라기보다는, 파일을 그대로 던져준 것이다.
그런데, 템플릿 엔진 이라는 것을 사용하면,
내가 원하는대로 loop를 넣거나 해서 모양을 바꿀 수 있다.
https://docs.spring.io/spring-boot/docs/current/reference/html/web.html#web
Web
Graceful shutdown is supported with all four embedded web servers (Jetty, Reactor Netty, Tomcat, and Undertow) and with both reactive and servlet-based web applications. It occurs as part of closing the application context and is performed in the earliest
docs.spring.io
공식문서에 자주사용하는 템플릿 엔진들이 제시되어 있다.
그중에 Thymeleaf를 선택한 것이다.
우리가 사용할 템플릿 엔진은 thymeleaf 이다.
Thymeleaf
Integrations galore Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework. Check out our Ecosystem to see more integrati
www.thymeleaf.org
thymeleaf의 공식 사이트이다.
웹어플리케이션의 첫번째 진입점인 컨트롤러를 만들어 보자.
hello.hellospring 밑에다가 controller 라는 패키지를 생성해보자.
그리고 해당 패키지에 HelloController 클래스를 만들어보자.
그리고 아래와 같이 코드를 작성하자.
이렇게 하면,
웹어플리케이션에서 /hello라고 들어오면,
빨간 상자부분의 @GetMapping 어노테이션부분의 메서드를 호출해준다.
spring에서 해주는 기능이다.
hello메서드의 작성은 위와같이 마무리하고,
templates폴더에 hello.html 파일을 생성한다.
그리고, 강의 문서에 있는 html을 복사해서 붙여넣어 주었다.
코드를 보면, body태그 밑에 <p로 시작해서 th가 있는데 th는 thymeleaf의 th이다. 위에 스키마로 선언되어 있다.
이렇게 한줄로 작성해주면, 템플릿엔진으로서 thymeleaf 문법을 사용할 수 있다.
그다음,<p 태그로 묶어준
이 부분에서 data 부분이
HelloController.java에서 model.addAttribute에서 key로 넣었던 data의 value인 "hello!!"로 치환된다.
한번 Run시켜보자.
웹브라우저에서 localhost:8080에 /hello 로 들어가보자.
안녕하세요. hello!!가 출력되는 것을 볼 수 있다.
페이지의 소스를 확인해 보자.
<p태그에, 안녕하세요. hello!! 가 작성되어 있다.
data가 잘 치환되었다.
동작환경을 그림으로 살펴보자.
먼저 웹 브라우저에서 localhost:8080/hello라고 던지면,
스프링 부트는 tomcat이라는 웹서버를 내장하고 있는데, 해당 서버에서 이것을 받아서 어떻게 하냐면,
"어? /hello 네? 라고 하면서 스프링한테 던져서 물어본다.
스프링이 helloController에 보면, @GetMapping 어노테이션으로 감싼 메서드가 실행이 된다.
그러면, 스프링이 모델이라는 것을 만들어서 넣어주는데, 해당 모델에다가 model.addAttribute해서 key는 data, value는 hello!! 라고 넣어놓는다.
그리고, return을 하는데, return의 이름이 "hello"다.
인텔리제이 유료버전에서는 command를 누른상태에서 hello를 클릭하면 연결된 해당 html로 이동한다.
즉, return 을 하는 것("hello")의 이름이 resources의 templates에 있는 이름(hello.html)이랑 똑같다.
그러니깐 쉽게 설명하자면, reuturn "hello"는 기본적으로 스프링부트가 어떻게 세팅되어 있냐면,
resources폴더의 templates폴더 밑에 있는"hello.html을 찾고, 가서 랜더링을 해라!" 라는 뜻이다.
이러한 기능은 viewResolver가 담당한다.
'Spring' 카테고리의 다른 글
| 스프링 입문 - MVC와 템플릿 엔진 (0) | 2022.05.16 |
|---|---|
| 스프링 입문 - 정적 컨텐츠 (0) | 2022.05.16 |
| 스프링 입문 - 빌드하고 실행하기 (0) | 2022.05.15 |
| 스프링 입문 - 라이브러리 살펴보기 (0) | 2022.05.13 |
| 스프링 입문 - 프로젝트 생성 (0) | 2022.05.13 |