WEB
-
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_..
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_..
2024.04.08 -
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() } 메인 ..
자바스크립트 이미지 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() } 메인 ..
2024.04.03 -
2024-04-01 1. 예시 코드 아래와 같은 코드가 있다고 가정해 보자. 해당 코드의 결과는 항상 로그인이 되어 있든 로그인이 되어 있지 않던 로그아웃을 하던 "if (authentication.isAuthenticated()) log.info("인증됨")" 코드가 실행된다. 즉 authentication.isAuthenticated() 이 부분이 항상 true를 리턴한다. 그 이유는 무엇일까? Authentication authentication = SecurityContextHolder.getContext().getAuthentication(); if (authentication.isAuthenticated()) log.info("인증됨") else log.info("인증안됨") } 2. 원인 S..
Spring Security 에서 Authentication 의 isAuthenticated() 가 항상 true 인 이유2024-04-01 1. 예시 코드 아래와 같은 코드가 있다고 가정해 보자. 해당 코드의 결과는 항상 로그인이 되어 있든 로그인이 되어 있지 않던 로그아웃을 하던 "if (authentication.isAuthenticated()) log.info("인증됨")" 코드가 실행된다. 즉 authentication.isAuthenticated() 이 부분이 항상 true를 리턴한다. 그 이유는 무엇일까? Authentication authentication = SecurityContextHolder.getContext().getAuthentication(); if (authentication.isAuthenticated()) log.info("인증됨") else log.info("인증안됨") } 2. 원인 S..
2024.04.01 -
2024-03-25 1. 방법 File to Base64 전달받은 파일 정보를 FileReader로 읽어 들여 base64 문자열을 만드는 코드이다. //실제 파일을 base64로 변환하는 코드 function fileToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = () => { reader.abort(); reject(new Error('파일을 읽는 도중 오류가 발생했습니다.')); }; reader.onload = () => { resolve(reader.result); }; reader.readAsDataURL(file); }); } // 사용 예제 as..
자바스크립트 File to Base64 | Base64 to File 구현하기2024-03-25 1. 방법 File to Base64 전달받은 파일 정보를 FileReader로 읽어 들여 base64 문자열을 만드는 코드이다. //실제 파일을 base64로 변환하는 코드 function fileToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = () => { reader.abort(); reject(new Error('파일을 읽는 도중 오류가 발생했습니다.')); }; reader.onload = () => { resolve(reader.result); }; reader.readAsDataURL(file); }); } // 사용 예제 as..
2024.03.25 -
2024-03-18 1. 방법 @Builder.Default 를 사용하여 TestDataClass.builder().build() 와 같은 형식으로 선언해도 아래처럼 정의된 값들이 들어가게 할 수 있다. import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import java.util.Arrays; import java.util.List; @Data @Builder @NoArgsConstructor @AllArgsConstructor public class TestDataClass { @Builder.Default private String name = "kin..
Builder 형식의 Data 클래스 필드값 Default 설정하는 방법2024-03-18 1. 방법 @Builder.Default 를 사용하여 TestDataClass.builder().build() 와 같은 형식으로 선언해도 아래처럼 정의된 값들이 들어가게 할 수 있다. import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import java.util.Arrays; import java.util.List; @Data @Builder @NoArgsConstructor @AllArgsConstructor public class TestDataClass { @Builder.Default private String name = "kin..
2024.03.18 -
2024-03-13 1. 방법 Object.keys(obj).length 통해 전체 키를 추출해서 사이즈를 확인하는 방법이다. const obj = { key1: 'value1', key2: 'value2', key3: 'value3' }; const keyCount = Object.keys(obj).length; console.log(keyCount); // 객체 obj에는 3개의 키-값 쌍이 있음 메인 이미지 출처 : 사진: Unsplash의Sies Kranen
자바스크립트 Object 크기 확인 하는 방법2024-03-13 1. 방법 Object.keys(obj).length 통해 전체 키를 추출해서 사이즈를 확인하는 방법이다. const obj = { key1: 'value1', key2: 'value2', key3: 'value3' }; const keyCount = Object.keys(obj).length; console.log(keyCount); // 객체 obj에는 3개의 키-값 쌍이 있음 메인 이미지 출처 : 사진: Unsplash의Sies Kranen
2024.03.13 -
2024-03-11 1. 방법 inupt 태그 속성에서 caret-color: transparent; 해당 부분만 추가하면 커서가 블링크 되는 것을 지울 수 있다. caret-color: transparent; 2. 출처 https://stackoverflow.com/questions/9333044/how-to-hide-blinking-cursor-in-input-text
input 태그 커서 없애는 방법 how to remove blinking input?2024-03-11 1. 방법 inupt 태그 속성에서 caret-color: transparent; 해당 부분만 추가하면 커서가 블링크 되는 것을 지울 수 있다. caret-color: transparent; 2. 출처 https://stackoverflow.com/questions/9333044/how-to-hide-blinking-cursor-in-input-text
2024.03.11 -
2024-03-06 1. 방법 th:frgment를 호출할 th:replace 파트 호출할 th:frgment 이름 뒤에 괄호를 붙인뒤(매개변수명=${백엔드에서 넘긴 변수}) 를 같이 전달하면 th:frgment에 th:frgment 부분 th:frgment에서는 value1 is a value1 is b 메인 이미지 출처 : 사진: Unsplash의Pavel Golasowski
thymeleaf 에서 th:fragment 에 매개변수 넣는법2024-03-06 1. 방법 th:frgment를 호출할 th:replace 파트 호출할 th:frgment 이름 뒤에 괄호를 붙인뒤(매개변수명=${백엔드에서 넘긴 변수}) 를 같이 전달하면 th:frgment에 th:frgment 부분 th:frgment에서는 value1 is a value1 is b 메인 이미지 출처 : 사진: Unsplash의Pavel Golasowski
2024.03.06 -
2024-01-02 1. HTML 2. CSS /* input태그디자인 참고*/ .search_wrap { display: flex; width: 100%; padding: 0.625rem; align-items: center; gap: 0.625rem; border-radius: 0.75rem; border: 1px solid #DBDBDB; background: #FFF; box-sizing: border-box; } .search_txt, /* 여기서 시작 */ input[type="text"].search_txt { border: none; outline: none; color: #353535; /* 입력된 텍스트 색상 */ background: transparent; font-size: inhe..
HTML input 태그 커스텀 디자인 해보기 NO JavaScript!!!2024-01-02 1. HTML 2. CSS /* input태그디자인 참고*/ .search_wrap { display: flex; width: 100%; padding: 0.625rem; align-items: center; gap: 0.625rem; border-radius: 0.75rem; border: 1px solid #DBDBDB; background: #FFF; box-sizing: border-box; } .search_txt, /* 여기서 시작 */ input[type="text"].search_txt { border: none; outline: none; color: #353535; /* 입력된 텍스트 색상 */ background: transparent; font-size: inhe..
2024.03.04 -
2024-02-27 1. 준비 우선 자신의 개발 환경에 맞게 properties를 생성해 준다. 네이밍은 위와 같이 application-[개발환경].properties의 형식으로 만들어주어야 한다. 현재 프로파일이 어떤 건지 확인할 수 있게 아래와 같이 application-[개발환경].properties에 명시에 주었다. profile.now=dev_profile 2. 방법 아래는 application-[개발환경].properties 에 명시에 둔 키값을 맵핑할 enum이다. public enum ProfileKey { NAME; public String str() { return "profile.now"; } } 다음으로 현재 프로파일 정보를 편하게 사용하기 위한 enum을 하나 생성해 준다. (해..
Spring boot profile 설정 방법 [properties 기준]2024-02-27 1. 준비 우선 자신의 개발 환경에 맞게 properties를 생성해 준다. 네이밍은 위와 같이 application-[개발환경].properties의 형식으로 만들어주어야 한다. 현재 프로파일이 어떤 건지 확인할 수 있게 아래와 같이 application-[개발환경].properties에 명시에 주었다. profile.now=dev_profile 2. 방법 아래는 application-[개발환경].properties 에 명시에 둔 키값을 맵핑할 enum이다. public enum ProfileKey { NAME; public String str() { return "profile.now"; } } 다음으로 현재 프로파일 정보를 편하게 사용하기 위한 enum을 하나 생성해 준다. (해..
2024.02.27 -
2024-02-23 1. 방법 build.gradle ... configurations { configureEach { //기본 스프링의 로그백과의 충돌 방지를 위해 제외시킨다. exclude group: 'org.springframework.boot', module: 'spring-boot-starter-logging' } ... } ... dependencies { ... implementation "org.springframework.boot:spring-boot-starter-log4j2"; ... } ... application.properties ... #logging setting logging.config=classpath:log4j2/log4j2-local.xml ... log4j2-lo..
Spring boot log4j2 셋팅 방법 정리2024-02-23 1. 방법 build.gradle ... configurations { configureEach { //기본 스프링의 로그백과의 충돌 방지를 위해 제외시킨다. exclude group: 'org.springframework.boot', module: 'spring-boot-starter-logging' } ... } ... dependencies { ... implementation "org.springframework.boot:spring-boot-starter-log4j2"; ... } ... application.properties ... #logging setting logging.config=classpath:log4j2/log4j2-local.xml ... log4j2-lo..
2024.02.23 -
2024-02-21 1. 방법 application.properties 에 설정해 둔 경로 확인 # Thymeleaf spring.thymeleaf.enabled=true spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html spring.thymeleaf.mode=HTML spring.thymeleaf.encoding=UTF-8 #spring.thymeleaf.cache=false return 경로가 "/home/home" 이런식으로 되어 있으면 경로 못 찾음 spring.thymeleaf.prefix=classpath:/templates/ 에서 이미 / 를 붙여 주었으니 아래와 같이 되어 있는지 확인 @GetMapping..
jar 파일 배포시 Thymeleaf 리소스 못찾는 문제 해결 방법2024-02-21 1. 방법 application.properties 에 설정해 둔 경로 확인 # Thymeleaf spring.thymeleaf.enabled=true spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html spring.thymeleaf.mode=HTML spring.thymeleaf.encoding=UTF-8 #spring.thymeleaf.cache=false return 경로가 "/home/home" 이런식으로 되어 있으면 경로 못 찾음 spring.thymeleaf.prefix=classpath:/templates/ 에서 이미 / 를 붙여 주었으니 아래와 같이 되어 있는지 확인 @GetMapping..
2024.02.21 -
2024-02-19 1. 방법 자신의 프로파일에 맞는 application.properties 파일에 아래와 같이 설정값을 변경해주면 된다. spring.servlet.multipart.maxFileSize=10MB spring.servlet.multipart.maxRequestSize=10MB 메인 이미지 출처 : 사진: Unsplash의Daniel J. Schwarz
Spring Boot 파일 업로드(multipart) 용량제한 설정하기 Resolved [org.springframework.web.multipart.MaxUploadSizeExceededException: Maximum upload size exceeded]2024-02-19 1. 방법 자신의 프로파일에 맞는 application.properties 파일에 아래와 같이 설정값을 변경해주면 된다. spring.servlet.multipart.maxFileSize=10MB spring.servlet.multipart.maxRequestSize=10MB 메인 이미지 출처 : 사진: Unsplash의Daniel J. Schwarz
2024.02.19 -
2024-01-15 1. css 2. html Fixd AREA long~~~~~~~~ Main AREA 3. JavaScript 메인 이미지 출처 : 사진: Unsplash의Jason Hudson
html 스크롤 시 Fixed 영역 만들기 + resize 이벤트 대응 방법2024-01-15 1. css 2. html Fixd AREA long~~~~~~~~ Main AREA 3. JavaScript 메인 이미지 출처 : 사진: Unsplash의Jason Hudson
2024.01.15 -
2024-01-12 1. 방법 위의 dimensions 와 실제 element 의 최대 넓이가 다른 경우, 기존의 코드의 html 코드는 아래와 같은 형식으로 되어 있을 것이다. 해당 코드에서는 디바이스의 넓이와 페이지 로드시에 초기 줌 레벨에 대한 설정값이 없다. 해당 코드를 추가해 준다. 이 메타 태그는 모바일 브라우저에서 웹 페이지를 올바르게 렌더링한다. width=device-width: 뷰포트의 너비를 디바이스의 실제 너비와 일치시키라는 의미이며, 모바일 기기의 화면 크기에 맞게 웹 페이지가 조절된다. initial-scale=1.0: 페이지가 로드될 때 초기 줌 레벨을 1.0으로 설정한다. 이는 사용자가 페이지를 처음 방문했을 때 기본 확대/축소 레벨을 의미한다. 메인 이미지 출처 : 사진: ..
크롬 개발자 도구의 dimensions 와 html 실제 넓이 차이 해결 meta name="viewport" content="width=device-width, initial-scale=1.0"2024-01-12 1. 방법 위의 dimensions 와 실제 element 의 최대 넓이가 다른 경우, 기존의 코드의 html 코드는 아래와 같은 형식으로 되어 있을 것이다. 해당 코드에서는 디바이스의 넓이와 페이지 로드시에 초기 줌 레벨에 대한 설정값이 없다. 해당 코드를 추가해 준다. 이 메타 태그는 모바일 브라우저에서 웹 페이지를 올바르게 렌더링한다. width=device-width: 뷰포트의 너비를 디바이스의 실제 너비와 일치시키라는 의미이며, 모바일 기기의 화면 크기에 맞게 웹 페이지가 조절된다. initial-scale=1.0: 페이지가 로드될 때 초기 줌 레벨을 1.0으로 설정한다. 이는 사용자가 페이지를 처음 방문했을 때 기본 확대/축소 레벨을 의미한다. 메인 이미지 출처 : 사진: ..
2024.01.12 -
2024-01-11 1. 방법 /* (Chrome, Safari) 에서 제거하기 */ .your_tag_class_name::-webkit-scrollbar { width: 0 !important; } /* Firefox 에서 제거하기 */ .your_tag_class_name { scrollbar-width: none; } 메인 이미지 출처 : 사진: Unsplash의Thomas de LUZE
[CSS] css 에서 overflow: scroll ui 지우는 방법2024-01-11 1. 방법 /* (Chrome, Safari) 에서 제거하기 */ .your_tag_class_name::-webkit-scrollbar { width: 0 !important; } /* Firefox 에서 제거하기 */ .your_tag_class_name { scrollbar-width: none; } 메인 이미지 출처 : 사진: Unsplash의Thomas de LUZE
2024.01.11 -
2024-01-02 1. 방법 아래와 같이 div 안에 텍스트가 존재한다고 가정해 보자. 목표는 내부 텍스트는 그대로 유지하고 배경 또는이미지만 blur 처리를 해보는 것이다. html Hello world css .test_div { position: relative; width: 500px; /* 슬라이드를 100% 너비로 표시 */ height: 500px; } .test_div::before { content: ""; background-color: red; width: 375px; height: 500px; filter: blur(0px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .test_div:hove..
[CSS] hover 시 뒷 배경만 흐리게 하는 방법2024-01-02 1. 방법 아래와 같이 div 안에 텍스트가 존재한다고 가정해 보자. 목표는 내부 텍스트는 그대로 유지하고 배경 또는이미지만 blur 처리를 해보는 것이다. html Hello world css .test_div { position: relative; width: 500px; /* 슬라이드를 100% 너비로 표시 */ height: 500px; } .test_div::before { content: ""; background-color: red; width: 375px; height: 500px; filter: blur(0px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .test_div:hove..
2024.01.02 -
2023-12-29 1. 예제 Flex를 선언한 부모 태그에서 아래와 같은 align-tems: center를 선언하게 되면 자식 태그들의 위치는 가운데로 정렬 되게 된다. 하지만 자식 태그들 중 어떤 태그는 좌측 어떤 태그는 우측에 위치시키여 하는 경우가 생기는데 이를 해결하는 방법을 알아보자. align-items: center; 아래의 코드는 세로 방향으로 flex 를 선언한 태그이다. HTML CSS .test_main_div{ border: 1px solid #C9CACA; display: flex; width: 1000px; flex-direction: column; align-items: center; } .test_div1{ width: 100px; height: 100px; margin:..
[CSS] Flex 태그 자식별로 정렬 다르게 하는 방법2023-12-29 1. 예제 Flex를 선언한 부모 태그에서 아래와 같은 align-tems: center를 선언하게 되면 자식 태그들의 위치는 가운데로 정렬 되게 된다. 하지만 자식 태그들 중 어떤 태그는 좌측 어떤 태그는 우측에 위치시키여 하는 경우가 생기는데 이를 해결하는 방법을 알아보자. align-items: center; 아래의 코드는 세로 방향으로 flex 를 선언한 태그이다. HTML CSS .test_main_div{ border: 1px solid #C9CACA; display: flex; width: 1000px; flex-direction: column; align-items: center; } .test_div1{ width: 100px; height: 100px; margin:..
2023.12.29 -
2023-12-18 1. 방법 CDN 으로 자바스크립트 코드 소스를 불러온다. lottie-player 태그를 이용해 자신의 json 파일을 불러오면 된다. 아래는 참고용 위치이다. 전체코드 template 메인 이미지 출처 : 사진: Unsplash의Austin Schmid
[Thymeleaf] 타임리프 lottie json 형식으로 불러오기2023-12-18 1. 방법 CDN 으로 자바스크립트 코드 소스를 불러온다. lottie-player 태그를 이용해 자신의 json 파일을 불러오면 된다. 아래는 참고용 위치이다. 전체코드 template 메인 이미지 출처 : 사진: Unsplash의Austin Schmid
2023.12.18 -
2023-11-18 1. 원인 Spring를 빌드하다 보면 아래와 같은 WARN 이 뜨는 경우가 있다. JpaBaseConfiguration$JpaWebConfiguration : spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning 해당 부분을 살펴보자. OSIV(View의 Open Session)는 그림과 같이 View 계층이 프록시 초기화를 트리거할 수 있도록 지속성 콘텍스트를 열어두도록 강제한다. 쉽게 표현하자면 JPA의 영속..
[Spring] spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning 해결 방법2023-11-18 1. 원인 Spring를 빌드하다 보면 아래와 같은 WARN 이 뜨는 경우가 있다. JpaBaseConfiguration$JpaWebConfiguration : spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning 해당 부분을 살펴보자. OSIV(View의 Open Session)는 그림과 같이 View 계층이 프록시 초기화를 트리거할 수 있도록 지속성 콘텍스트를 열어두도록 강제한다. 쉽게 표현하자면 JPA의 영속..
2023.11.18