전체 글
이모저모 방방곡곡 두루두루 개발지식 저장소
-
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 이후 자신의 프로젝트를 재실행하면 파비콘이 적용된 것을 확인할 수 있다.메인 이미지 출처..
Spring boot 파비콘 적용 방법 favicon.ico2024-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 이후 자신의 프로젝트를 재실행하면 파비콘이 적용된 것을 확인할 수 있다.메인 이미지 출처..
2024.05.08 -
2024-04-30 1. 방법 간단히 심볼릭 링크를 걸어주면 해결된다. sudo ln -s /usr/bin/vim /usr/bin/vi메인 이미지 출처 : 사진: Unsplash의Vidar Nordli-Mathisen
vim은 되는 vi 안될때 해결방법 [vi : command not found]2024-04-30 1. 방법 간단히 심볼릭 링크를 걸어주면 해결된다. sudo ln -s /usr/bin/vim /usr/bin/vi메인 이미지 출처 : 사진: Unsplash의Vidar Nordli-Mathisen
2024.04.30 -
2024-04-251. 방법 timedatectl 을 이용해서 타임존을 Asia/Seoul 으로 변경한다. timedatectl set-timezone Asia/Seoul이후 날짜를 확인하면 한국시간으로 설정 된 것을 확인 할 수 있다. bash-5.2# dateWed Apr 24 14:46:12 KST 2024메인 이미지 출처 : 사진: Unsplash의set.sj
리눅스 타임존 한국으로 변경하는 방법 timedatectl2024-04-251. 방법 timedatectl 을 이용해서 타임존을 Asia/Seoul 으로 변경한다. timedatectl set-timezone Asia/Seoul이후 날짜를 확인하면 한국시간으로 설정 된 것을 확인 할 수 있다. bash-5.2# dateWed Apr 24 14:46:12 KST 2024메인 이미지 출처 : 사진: Unsplash의set.sj
2024.04.25 -
2024-04-16 1. 방법 Authentication > 설정 > 사용자 작업 > 이메일 열거 보호(권장) 체크박스 해제를 해주면 된다. 해당 부분은 2023년 9월 15일 이후에 프로젝트를 만든 경우 이메일 열거 보호가 기본적으로 사용 설정이 되는데 이는 이메일 열거는 악의적인 행위자가 API에 이메일 주소를 전달하고 응답을 확인하여 시스템의 사용자를 추측하거나 확인하는 무차별 대입 공격의 한 유형을 방지하기 위해 설정이 된다고 한다. 2. 참고 https://stackoverflow.com/questions/77147854/firebase-please-verify-the-new-email-before-changing-email-auth-operation-not firebase: please ver..
firebase: please verify the new email before changing email. 해결방법2024-04-16 1. 방법 Authentication > 설정 > 사용자 작업 > 이메일 열거 보호(권장) 체크박스 해제를 해주면 된다. 해당 부분은 2023년 9월 15일 이후에 프로젝트를 만든 경우 이메일 열거 보호가 기본적으로 사용 설정이 되는데 이는 이메일 열거는 악의적인 행위자가 API에 이메일 주소를 전달하고 응답을 확인하여 시스템의 사용자를 추측하거나 확인하는 무차별 대입 공격의 한 유형을 방지하기 위해 설정이 된다고 한다. 2. 참고 https://stackoverflow.com/questions/77147854/firebase-please-verify-the-new-email-before-changing-email-auth-operation-not firebase: please ver..
2024.04.16 -
2024-04-12 1. 방법 Preferences -> Settings 클릭 Code 스타일 자동 줄 바꿈 방지 Word Wrap 검색 후 -> off 처리 Debug Console 스타일 자동 줄 바꿈 방지 Debug console 검색 후 아래로 조금 스크롤하다 보면 아래 설정 보임 체크박스 unCheck 메인 이미지 출처 : 사진: Unsplash의Jack White
Vscode 자동 줄바꿈 끄기 (코드 콘솔 둘다)2024-04-12 1. 방법 Preferences -> Settings 클릭 Code 스타일 자동 줄 바꿈 방지 Word Wrap 검색 후 -> off 처리 Debug Console 스타일 자동 줄 바꿈 방지 Debug console 검색 후 아래로 조금 스크롤하다 보면 아래 설정 보임 체크박스 unCheck 메인 이미지 출처 : 사진: Unsplash의Jack White
2024.04.12 -
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-29 1. 방법 import java.awt.*; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; public class ImageResizer { public static final int MAX_WIDTH = 1920; public static final int MAX_HEIGHT = 1080; // 이미지 크기 조정 private BufferedImage resizeImage(BufferedImage originalImage) { int width = originalImage.getWidth(); int height = originalImage.getHeight(); // 이미지 크기가 최대 크기보다..
자바 이미지 리사이징 및 비율 변경 하는 방법 알아보기2024-03-29 1. 방법 import java.awt.*; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; public class ImageResizer { public static final int MAX_WIDTH = 1920; public static final int MAX_HEIGHT = 1080; // 이미지 크기 조정 private BufferedImage resizeImage(BufferedImage originalImage) { int width = originalImage.getWidth(); int height = originalImage.getHeight(); // 이미지 크기가 최대 크기보다..
2024.03.29 -
2024-03-27 1. 로딩 속도 향상 WOFF2는 TTF 또는 OTF보다 평균 파일의 크기가 30% 더 작다. 이로인해 페이지 로딩 속도를 높여 사용자 경험을 향상 시키고, 모바일 장치에서 데이터 사용량 감소에 도움이 된다. 2. 향상된 텍스트 품질 WOFF2는 텍스트 렌더링을 위한 최적화 기능을 제공함으로써 더 선명하고 깨끗한 글꼴 표시를 제공한다. 특히 작은 글꼴 크기에서 더욱 눈에 띄는 차이를 경험할 수 있다. 3. 브라우저 호환성 WOFF2는 모든 주요 웹 브라우저에서 지원된다. 사실상 모든 웹 사용자에게 최적의 텍스트 표시 경험을 제공할 수 있으며, TTF 또는 OTF와 달리 별도의 웹폰트 형식을 사용할 필요가 없다. 4. 출처 https://heyakash.medium.com/underst..
왜 woff2 를 써야하는가? otf / ttf 와의 차이2024-03-27 1. 로딩 속도 향상 WOFF2는 TTF 또는 OTF보다 평균 파일의 크기가 30% 더 작다. 이로인해 페이지 로딩 속도를 높여 사용자 경험을 향상 시키고, 모바일 장치에서 데이터 사용량 감소에 도움이 된다. 2. 향상된 텍스트 품질 WOFF2는 텍스트 렌더링을 위한 최적화 기능을 제공함으로써 더 선명하고 깨끗한 글꼴 표시를 제공한다. 특히 작은 글꼴 크기에서 더욱 눈에 띄는 차이를 경험할 수 있다. 3. 브라우저 호환성 WOFF2는 모든 주요 웹 브라우저에서 지원된다. 사실상 모든 웹 사용자에게 최적의 텍스트 표시 경험을 제공할 수 있으며, TTF 또는 OTF와 달리 별도의 웹폰트 형식을 사용할 필요가 없다. 4. 출처 https://heyakash.medium.com/underst..
2024.03.27 -
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-20 1. 방법 pubspec.yml의 아래와 같이 의존관계 추가 dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter intl: any main.dart 에 아래와 같이 localizations 설정 정보를 작성 return const MaterialApp( title: 'Localizations Sample App', localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: [ Loca..
Flutter internationalized 설정 하는 법 Flutter_localizations2024-03-20 1. 방법 pubspec.yml의 아래와 같이 의존관계 추가 dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter intl: any main.dart 에 아래와 같이 localizations 설정 정보를 작성 return const MaterialApp( title: 'Localizations Sample App', localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: [ Loca..
2024.03.20 -
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-08 1. 원인 이미 프로젝트 중 동일한 SHA 인증서 지문을 사용하여 생기는 문제이다. /.android/debug.keystore 를 이미 dev 또는 test라는 명목으로 사용하여 생기는 문제일 가능성이 높다. 2. 해결 방법 해결 방법은 크게 어렵지 않다. 아래의 명령어로 새로운 키를 만들어 SHA 인증서를 추출하면 된다. ~/upload-keystore.jks : 자신 저장할 위치와 파일명으로 변환 -alias upload : 별칭 역시 자신이 원하는 내용으로 변환 keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA \ -keysize 2048 -validity 10000 -alias upload 위의 명령어를 사용하면 ..
firebase "다른 프로젝트에 이미 패키지 이름과 SHA-1이 동일한 OAuth2 클라이언트가 있습니다. " 해결방법 SHA 인증서 지문 생성2024-03-08 1. 원인 이미 프로젝트 중 동일한 SHA 인증서 지문을 사용하여 생기는 문제이다. /.android/debug.keystore 를 이미 dev 또는 test라는 명목으로 사용하여 생기는 문제일 가능성이 높다. 2. 해결 방법 해결 방법은 크게 어렵지 않다. 아래의 명령어로 새로운 키를 만들어 SHA 인증서를 추출하면 된다. ~/upload-keystore.jks : 자신 저장할 위치와 파일명으로 변환 -alias upload : 별칭 역시 자신이 원하는 내용으로 변환 keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA \ -keysize 2048 -validity 10000 -alias upload 위의 명령어를 사용하면 ..
2024.03.08 -
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