타임리프(Thymeleaf)에서 프래그먼트에 자바스크립트 함수 전달하기

2024-07-15 타임리프(Thymeleaf)는 서버 사이드 템플릿 엔진으로, HTML을 템플릿으로 사용하여 동적 웹 페이지를 생성하는 데 유용합니다. 때로는 자바스크립트 함수를 프래그먼트에 직접 전달해야 할 때가 있습니다. 이 글에서는 타임리프에서 프래그먼트에 자바스크립트 함수를 전달하는 방법을 설명합니다.1. 프래그먼트 정의하기먼저, 자바스크립트 함수를 호출할 수 있도록 프래그먼트를 정의합니다. 프래그먼트는 th:fragment 속성을 사용하여 정의할 수 있습니다.  2. 프래그먼트 호출하기타임리프 문법을 사용하여 프래그먼트를 호출할 때, 자바스크립트 함수와 매개변수를 문자열로 전달합니다. 3. 자바스크립트 함수 정의하기마지막으로, 호출하려는 ..

• format_list_bulleted WEB/Thymeleaf
• · 2024. 7. 15.
• textsms

JPA와 PostgreSQL의 TIME 타입 간 호환성 문제 해결하기

2024-06-111. 원인 최근 프로젝트에서 JPA를 사용하여 PostgreSQL 데이터베이스와 상호 작용하던 중, 예약 시간을 나타내는 엔티티 필드에서 호환성 문제가 발생했습니다. LocalTime으로 매핑된 reservationTime 필드를 사용할 때, PostgreSQL의 TIME 컬럼과의 호환성 문제로 인해 "Invalid value for NanoOfSecond" 오류가 발생했습니다.  Invalid value for NanoOfSecond (valid values 0 - 999999999): -935000000  기존 오류가 발생하던 entity 정보는 아래와 같습니다.  @Column(name = "reservation_tm", columnDefinition = "TIME") pr..

• format_list_bulleted WEB/JPA
• · 2024. 6. 11.
• textsms

html/css 드롭다운 메뉴 만들기 [No JavaScript!!]

2024-05-281. 방법 ::after 선택자를 이용해 가상의 html 영역을 만들고 이후 해당 부분을 hover 하는 방식을 이용해 간단하게 드롭다운 메뉴를 구현할 수 있다. 코드를 살펴보자.2. html menu sub1 sub2  코드는 간단하다. 우선적으로 hover 를 진행할 메뉴를 만들고 이후 드롭다운 메뉴리스트를 만들면 된다. 위의 코드에서는 menu 클래스가 호버를 진행할 항목이고 sub_menu 가 드롭다운이 되는 메뉴이다.3. css 처음 방법에서 소개했던 것과 같이 menu 에 가상 영역 ::after를 만들고 해당 부분을 호버시에 sub_menu의 display 가 flex 가 되면서 드롭다운 영역이 나타나게 된다. .menu { position: rel..

• format_list_bulleted WEB/CSS
• · 2024. 5. 27.
• textsms

Spring boot 파비콘 적용 방법 favicon.ico

2024-05-08 1. 방법 웹사이트 탭에 좌측에 나타나는 아이콘 같은 것을 파비콘이라고 하는데 해당 부분을 적용하는 방법을 알아보자.우선 favicon.ico 파일을 만들어야 하는데 ico 파일 정보를 만드는 것은 아래링크를 참고하자.https://favicon.io/ Favicon.io - The Ultimate Favicon Generator (Free)With Favicon.io you can quickly generate a favicon for your website for free!favicon.io그리고 만들어진 파비콘 정보를 아래 경로에 삽입한다. resources/static/favicon.ico 이후 자신의 프로젝트를 재실행하면 파비콘이 적용된 것을 확인할 수 있다.메인 이미지 출처..

• format_list_bulleted WEB/Spring
• · 2024. 5. 8.
• textsms

JPA PostgreSQL 오류: ll_to_earth(numeric, numeric) 이름의 함수가 없음 해결 방법

2024-04-08 1. 이슈 발생 이미 extension으로 cube와 earthdistance를 설치함에도 불구하고 아래와 같은 에러가 발생했다. > create extension cube [2024-03-26 10:25:45] [42710] 오류: "cube" 이름의 확장 모듈이 이미 있습니다 > create extension earthdistance [2024-03-26 10:25:57] [42710] 오류: "earthdistance" 이름의 확장 모듈이 이미 있습니다 > select ,trh.latitude ,trh.longitude from test_tb where earth_distance(ll_to_earth(37.60929341197407, 127.05318831597205) , ll_..

• format_list_bulleted WEB/JPA
• · 2024. 4. 8.
• textsms

자바스크립트 이미지 preload 구현하기 이미지 변경 시 깜빡임 제거

2024-04-03 1. 방법 아래와 같이 코드를 구성하면 최초 페이지 접속 후 이미지가 지역변수에 담기게 되어 이후에 이미지 경로를 변경해도 깜빡임 현상을 제거할 수 있다. let images = []; //이미지 객체를 담을 변수 let imagesUrs = []; //동적이미지 url 정보르 담을 변수 실제 이미지 경로를 넣어주면 된다. document.addEventListener('DOMContentLoaded', function () { function imgPreload() { for(let i = 0; i < imageUrls.length; i++) { images[i] = new Image(); images[i].src = imageUrls[i]; } } imgPreload() } 메인 ..

• format_list_bulleted WEB/JavaScript
• · 2024. 4. 3.
• textsms