[글작성일자: 2024.01.16] 안녕하세요 상훈입니다.

이번에 프로젝트를 통해 타임리프를 사용하게 되었는데, 생각보다 신기하고 간단하더라구요.
하나씩 공부하는 입장으로서 작성중에 있습니다.

 

1. 타임리프

타임리프는 아래 링크에 소개드립니다. 만약 보신적이 없으시다면 간단하게 훑는걸로 봐주세요!

https://www.thymeleaf.org/index.html#natural-templates

 

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

2. text, utext 무슨 차이인데?

딱 필요한부분만 말하자면, 문자 내에 html 태그를 사용할 수 있는가 없는가의 차이입니다.

예시)

//Java
model.addAttribute("testText", "<b>utext를 통하여 Escaped문자열을 사용할 수 있다.</b>");
  //HTML
  utext 를 사용할 경우:   <span th:utext="${testText}">testText</span><br/>
  utext 를 사용하지 않았을 경우: <span th:text="${testText}">testText</span>

이렇게 다른 결과를 볼 수 있습니다.

다른말로는 Escape 문법을 사용하여 화면에 렌더링을 시킬 수 있는가 정도.

 

html inspect 를 살펴보면, <b> 태그로 위에는 들어가있는 반면,  => Escaped
아래는 문자열로 들어가지는 모습을 볼 수 있습니다.

 

 

반응형
저작자표시 (새창열림)

'BackEnd > Java' 카테고리의 다른 글

[혼공자] 혼자 공부하는 자바 도서 리뷰  (0) 2024.02.25
동작중인 포트 확인, 종료 하는 방법  (0) 2023.05.28
[ Java ] MyBatis, include 사용 하여 SQL 조회 하는 방법  (0) 2023.04.13
[ Java ] 비밀번호 정책에 따른 비밀번호 검증 구현하기  (1) 2023.04.12
[Spring-Gradle] gradlew Permission Denied  (0) 2023.03.23

안녕하세요 상훈입니다.

React.js 프로젝트 링크를 남들에게 보낼 때, 조금 더 예쁜 썸네일과, 제목, 그리고 내용을 보내려고 할 때 유용한 미세먼지 팁 입니다.

/public/index.html 를 엽니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <meta property="og:image" content="%PUBLIC_URL%/이미지 이름을 작성해주세요" />
    <meta property="og:site_name" content="사이트 이름을 작성해주세요" />
    <meta property="og:description" content="이곳에 컨텐츠를 작성해주세요" />

이렇게 head 태그 안에 meta 태그로 작성해주시면 됩니다.

프로퍼티는 og: " " 로 작성하면 됩니다.

그리고 다시 빌드해주시고, 배포해주세요. 마지막으로 링크를 마구 보내줍니다.

이상입니다.

[ 카카오톡 전송 메시지 이미지 ]

업데이트 전
업데이트 후

이렇게 깔끔하게 카카오톡으로 링크를 전송할 수 있습니다.

 

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > React.js' 카테고리의 다른 글

[ React-Native ] Error : Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.  (0) 2022.04.08
[ React-Native ] 모바일 화면의 넓이, 높이 자동으로 가져오기 API  (0) 2022.04.07
[ React.js ] 웹페이지 제목 바꾸는 방법 / How to change title of React web project  (0) 2022.04.06
[ React.js ] public url 경로, 이미지 경로 쉽게 잡는 방법, public-url  (0) 2022.04.05
[ React-native ] [ expo-font ] error - fontFamily "Lobster-Regular" is not a system font and has not been loaded through Font.loadAsync.  (0) 2022.03.31

+ Recent posts

티스토리툴바