https://devkimchi.tistory.com/76
Sprng Boot 2.7.8 Reactive WebOAuth2 Google Login 적용해 보기 간단 해결기
Sprng Boot 2.7.8을 이용 Reactive Web에 OAuth2를 이용해 Google Login을 붙여 볼 예정이다. 이전 시도에서 스프링부트 3.0.0 이용하여 실패했는데 소스도 별로 없고 글도 없어서 아직 이른가 보다라는 판단에
devkimchi.tistory.com
스프링 웹플러스에 구글 로그인은 적용시켰습니다.
이제 메인 페이지부터 해서 화면을 만들고 디자인을 적용시켜 볼 예정입니다.
Material 선택 이유
디자인엔 문외한 이기 때문에 감각적인 디자인을 하긴 힘들고 어려워서 구글에서 많은 디자이너와 개발자들이 사용자의 경험을 토대로 만들어둔 메테리얼 디자인을 적용시킬 예정입니다.
제가 고생하면서 아마추어 같은 디자인을 하느니 전문가들이 딱 가져다가 쓸 수 있게 만들어 놓은 메테리얼 디자인 얼마나 고맙습니까 그래서 즐겁게 사용해 보겠습니다.
https://m3.material.io/get-started
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
많은 디자인 철학들을 담아서 만들어 놨습니다. 개발자는 개발 업무에 집중할 수 있게 도와줍니다.
직접 홈페이지 방문해서 보면 많은 글들이 있는데 개발 프레임웍들도 그렇고 문서들이 엄청나게 많은데 다른 개발자들은 그걸 다 읽어 보고 진행을 할까요? 저는 그러지 못한 편인 거 같은데 다 읽어 보고 하면 견문을 넓히는데 도움이 될 거 같습니다. 근데 어떻게 읽어야 하나요? 머티리얼? 메테리얼? 메티리얼?
일단 스프링 부트 웹플럭스를 초기 세팅하고 구글 로그인까지 한 시점입니다. 이전글을 참고하시면 될 거 같습니다.
거기에 메테리얼 디자인을 입힐 예정인데 내용은 이렇습니다.
Thymeleaf Dialect 이용 페이지 나누기
- Thymeleaf Layout 을 이용해 상단 중단 하단으로 나누고
- 상단은 메뉴와 간단한 계정 정보
- 중단은 메인 콘텐츠가 오는 공간
- 중단도 좌 우로 나눠
- 좌측 중단메뉴
- 우측 콘텐츠
- 하단
우선 Maven의 pom.xml에 디펜던시를 추가해서 thymeleaf-layout-dialect 사용할 수 있게 종속성 다운로드를 합니다.
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
기본 html code에서 아래와 같이 코딩해 줍니다.
layout.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
th:lang="${#locale.language}"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
th:inline="text"
>
<head>
<meta charset="UTF-8"/>
<title>Layout</title>
</head>
<!-- parse level comments -->
<!--/* This code will be removed at Thymeleaf parsing time! user can't read */-->
<!--/* / Parser-level comment blocks are code that will be simply removed from the template when thymeleaf parses it / */-->
<!--/*
[[${session.user.name}]] warn null
[(${session.user.name})] /*[[${session.user.name}]]*/
${...} : Variable expressions.
*{...} : Selection expressions.
#{...} : Message (i18n) expressions.
@{...} : Link (URL) expressions.
~{...} : Fragment expressions.
Authorization-oriented expressions (such as those in 'sec:authorize') are restricted in WebFlux applications due to
a lack of support in the reactive side of Spring Security (as of Spring Security 5.1). Only a minimal set of security
expressions is allowed:
[isAuthenticated(), isFullyAuthenticated(), isAnonymous(), isRememberMe()]
sec:authorize
sec:authorize-url=""
*/-->
<body>
<div th:replace="~{top::top}"></div>
<div layout:fragment="contents"></div>
<div th:replace="~{bottom::bottom}"></div>
</body>
</html>
이렇게 코딩을 해주고 th:replace="~{top::top}" 이 부분은 해당 태그를 top.html에 있는 th:fragment가 top 인 부분을 가져오겠다는 내용입니다.
layout:fragment="contents" 이 부분은 layout:fragment로 저는 th:fragment와 헷갈렸는데 컨트롤러에서 던진 html이 소스에서 contents인 부분을 여기에 들어오게 되는 부분입니다. 차이라면 th:는 다른 데서 가져온다는 느낌 layout: 은 이 레이아웃을 해당 객체에 입히는 느낌입니다.
레이아웃은 해당 객체에 입히는 역할을 합니다.
레이아웃 설정은 이 정도고 Srping Controller에서 home으로 던진 후 홈에 어떤 레이아웃을 입힐지 설정해 주면 저희가 좀 전에 만든 레이아웃이 입혀지게 되는 겁니다.
Controller -> home.html
home.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
th:lang="${#locale.language}"
layout:decorate="~{layout}"
>
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<div layout:fragment="contents">
Home live test 1 2 3 4 5
</div>
</body>
</html>
layout:decorate="~{layout}" 이 부분이 layout.html로 decorate를 설정해 주는 부분이고
layout:fragment="content"
top.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
th:lang="${#locale.language}"
>
<head>
<meta charset="UTF-8">
<title>Top</title>
</head>
<body>
<div th:fragment="top">Top</div>
</body>
</html>
bottom은 top와 비슷합니다. 결과는
잘 나오는군요. 컨트롤러에서 home.html을 호출하면 레이아웃 데이레이트를 호출해서 입혀주게 됩니다.
보시는 바와 같이 결과물은 잘 나오는데 디자인이 없으니 개발자 스런 결과물이 나와버렸네요 그래서 여기에 머티리얼 디자인을 입혀 좀 더 수고를 줄이고 멋진 디잔인을 만들어 보겠습니다.
'개발 > 스프링 FIreBase Neo4j' 카테고리의 다른 글
| 스프링 부트 메테리얼 디자인 적용 라이브러리는 없나? 피그마? (0) | 2023.02.04 |
|---|---|
| 스프링 부트 머티리얼디자인 적용 시키기 (0) | 2023.02.02 |
| Sprng Boot 2.7.8 Reactive WebOAuth2 Google Login 적용해 보기 간단 해결기 (0) | 2023.02.02 |
| Spring boot 3 WebFlux Google OAuth2 재도전기 (0) | 2023.02.01 |
| SPRING WEBFLUX OAUTH 2.0 구글 로그인 후 넘어 오는 값(CODE) 방황기 (0) | 2023.01.29 |
