WelcomePage
WelcomPage
도메인을 입력하면 접속되는 메인 웹 화면
SpringBoot에서 WelcomPage를 만드는 방법은 아래의 경로에 index.html 파일을 생성하면 된다.
src > main > resouces > static > index.html
파일 생성 후 main > HelloSpringApplication에서 main 메서드를 실행하면 8080 포트에서 WelcomPage를 접속할 수 있다.
SpringBoot 학습방법
springboot는 spring 생태계 전반을 감싸서 편리하게 사용할 수 있게 도와주는 도구이다. spring의 크기가 큰 만큼 springboot의 크기도 어마어마하다.
springboot가 제공하는 기능들을 모두 외운다는 것은 물리적으로 불가능하기에 필요한 정보를 잘 찾는 방식을 직접 습득해야한다.
모르는게 생기면 spring.io를 방문하자!
Projects > SpringBoot > Learn > 현재 설치된 버전의 Reference Doc 선택 > 필요한 메뉴 선택
필요한 메뉴 페이지에 진입 후 크롬의 finder 기능을 적극 활용하여 궁금한 내용을 찾아보자.
템플릿 엔진
백엔드의 기본구성은 아래와 같다.
- 클라이언트
- 웹 서버
- 웹 애플리케이션 서버
- 데이터베이스
웹 브라우저에서 도메인을 입력하면 웹서버가 정적 페이지인 index.html을 반환한다.
클라이언트가 동적 페이지를 요청하면 웹 애플리케이션 서버로부터 반환을 받을텐데, 웹 애플리케이션 서버에는 어떻게 접근하는걸까?
SpringBoot 프로젝트 생성 시 추가했던 라이브러리인 Thymeleaf라는 템플릿 엔진을 사용하여 구현할 수 있다.
SpringBoot에선 Thymeleaf 외 FreeMarker, Mustache와 같은
템플릿 엔진도 사용 가능하다.
이들의 차이점은 무엇이고, 이번 커리큘럼에서는 왜 Thymeleaf를 쓰게되었는지 알아보았다.
Tymeleaf
HTML 구조를 그대로 유지한 상태에서 서버 데이터를 주입할 수 있는 템플릿 엔진으로, 브라우저 단독 실행과 서버 렌더링을 모두 지원한다.
Spring MVC와의 통합도가 높아 SpringBoot 환경에서 기본 템플릿 엔진으로 채택되었다.
Mustache
logic-lee(로직이 없는) 템플릿 엔진으로, 템플릿에는 최소한의 표현만 두고 모든 로직을 서버 코드로 밀어내는 특성이 있다.
FreeMarker
템플릿 구조를 자유롭게 설계할 수 있어서 레거시 Spring MVC 프로젝트나 복잡한 서버 사이드 렌더링에서 사용되었다.
하지만, HTML 친화성이 낮고 SpringBoot 환경에서는 점차 사용 빈도가 줄어들고있다.
동적페이지
동적 페이지로 만들기 위한 웹애플리케이션 서버의 첫번째 진입점이 바로 'controller'이다.
src > main > java > hello.hello_spring 폴더에 controller 패키지를 생성한다.
만들어진 패키지 아래에 controller class 생성 후, Controller annotation을 추가해줌으로써 controller 생성이 완료된다.
//controller
package hello.hello_spring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloController {
@GetMapping("hello")
public String hello(Model model) {
model.addAttribute("data", "hello!");
return "hello";
}
}패키지란?
관련있는 클래스들을 논리적으로 묶어 충돌을 막는다.
이제 controller가 접근할 수 있는 view를 생성할 차례이다.
static 폴더와 같은 하이라키에 있는 templates 폴더에 hello.html을 생성해보자.
우리는 Thymeleaf 템플릿을 사용할 것이므로, html에 태그에 스키마를 선언해주어야 Thymeleaf 템플릿을 사용할 수 있다.
controller는 view로 전달할 데이터(model)에 'data'라는 이름으로 "hello!" 값을 담는다.
// view
<!Doctype HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head> ... </head>
<body>
<p th:text="'안녕하세요. ' + ${data}">안녕하세요. 손님</p>
</body>
</html>view에서sms controller가 전달한 ${data}를 참조하여 HTML 렌더링을 시작한다.
MVC 패턴에 대한 개념이 없었던 나는 controller 작성 시 한가지 실수를 하였다. 도메인 접속 시 controller가 return 하는 문자열이 그대로 화면에 출력되는 값이라고 생각해, "hello!!"를 반환 값으로 사용했었다.
Spring MVC에서 controller의 return 값은 응답 본문이 아니라 view의 이름이다. 즉, return "hello"는 "hello.html"이라는 템플릿을 찾아 렌더링하라는 의미였던 것이다!
@GetMapping decorator에 "hello" 라고 경로를 지정하면 hello.html 템플릿이 사용되는 것으로 오해한 것이다.
해당 decorator가 의미하는 것은, 브라우저가 '/hello' 요청을 보내면, ./hello를 처리할 controller method를 찾아서 실행한다.
method의 반환값인 "hello"를 viewResolver에게 전달하여 hello.html을 출력하게된다.
