16. 첫 페이지 보완

이번에 할 일

• 네비게이션 바에 Fontawesome으로 아이콘 추가
• 이메일 인증을 마치지 않은 사용자에게 메시지 보여주기
• jdenticon으로 프로필 기본 이미지 생성하기

NPM으로 프론트엔f드 라이브러리 설치

• npm install font-awesome
• npm install jdenticon

폰트어썸 아이콘 사용하기

• <i class=”fa fa-XXXX”></i>

 

Jdenticon으로 아바타 생성하기

• <svg width="80" height="80" data-jdenticon-value="user127"></svg>

타임리프 조건문

• th:if

 

부트스트랩 경고창

<div class="alert alert-warning" role="alert" th:if="${account != null && !account?.emailVerified}">     스터디올레 가입을 완료하려면 <a href="#" th:href="@{/check-email}" class="alert-link">계정 인증 이메일을 확인</a>하세요. </div>

 

 

<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css" />
...
<i class="fa fa-bell-o"></i>

npm으로 내장 라이브러리에 있는 경로를 링크로 걸고 bell 아이콘 추가

 

jdenticon을 활용한 아이콘 생성

<script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
jdenticon라이브러리 추가

<svg data-jdenticon-value="user127" th:data-jdenticon-value="${#authentication.name}"
                         width="24" height="24" class="rounded border bg-light"></svg>
svg생성 -> jdenticon값을 thymeleaf를 가지고 인증된 이름이 존재하면 해당 이름으로 생성

 

---

이번 강의에서 몰랐던 것 및 알아볼 것

OGNL(Object-Graph Navigation Language)

en.wikipedia.org/wiki/OGNL

OGNL - Wikipedia

Spring Expression language (SPEL)

www.baeldung.com/spring-expression-language

Spring Expression Language Guide | Baeldung