사이트에서 css파일이 갱신이 안된다면 어떻게 해야 할까?대부분 이러한 문제는 브라우저 캐시 때문에 생기는 문제이다.오늘은 이 글을 통해 어떤 브라우저, 어떤 기기에서건 항상 캐시를 갱신시키려면 어떠한 방법이 있는지 정리해 보았다. 캐시가 갱신되지 않는 이유?웹 브라우저는 css, js와 같은 정적인 파일은 브라우저 캐시에 저장해 두고 사용한다.파일의 변경 내용이 없다면 브라운저는 기존에 저장해 둔 캐시의 내용을 보여주게 된다.이 때문에 로딩 속도는 빨라지지만 가끔씩 파일이 바뀌어도 반영이 안 되는 일이 발생하기도 한다.그럼 해결 방법에는 어떠한 것들이 있는지 알아보자. 1. 쿼리스트링으로 버전 붙이기가장 추천할만한 방식이다.HTML이나 JSP에서 css나 js파일에 ?v=버전 형태로 쿼리스트링을 추가하..
Base64는 이미지 업로드, 프론트 백엔드 통신, 파일 임베드를 할 때 필수적인 기술이다.오늘 정리한 코드를 활용하면 java로 쉽게 base64 이미지를 내가 원하는 폴더에 저장할 수 있다. Base64란?base64는 이진 데이터를 텍스트로 바꾸는 인코딩 방식이다.네트워크나 텍스트 기반 시스템(json,xml) 등에서는 순수 이진 데이터 전송이 어려운데 base64는 이진 데이터를 문자열 형태로 안전하게 변환해 준다.단점으로는 원래 크기보다 약 33프로 정도 데이터 크기가 증가하며 바이너리 처리보다 성능은 떨어지는 편이다. data:image/png;base64,iVBORw0KGgoAAAANRTYDDA...image/png;base64, 는 메타정보는 의미하며 콤마 뒤에 값은 인코딩 된 이미지 데이..
스프링 애플리케이션 내에서 특정 작업(Job)을 백그라운드에서 반복하거나 단 한 번만 실행하고 싶을 때가 있을 것이다!이번 포스트에서는 간단한 Job 인터페이스와 JobScheduler 클래스를 이용해 유연하게 실행되는 잡 시스템을 구현하는 방법을 정리했다. 📌 구조 요약 CustomJob: 각 Job이 따라야 할 인터페이스JobScheduler: 스프링 빈 초기화 시점에 Job을 별도 스레드로 실행GoogleToDataJob: 실제 실행할 Job 구현체 예시 1. CustomJob 인터페이스public interface CustomJob { String getJobName(); // Job 이름 long getSleepMillis(); // 반복 시 대기 시간(..
GA4의 데이터를 API로 받아 페이지별 조회수를 확인하고 싶다면 Google의 Analytics Data API를 사용할 수 있다.이 글에서는 Java를 이용해 GA4에서 페이지뷰 상위 데이터를 조회하고,List> 형식으로 반환하는 전체 프로세스를 정리했다. ✅ 준비물Google Cloud Platform(GCP) 프로젝트Google Analytics 4 (GA4) 속성서비스 계정 및 JSON 키 파일Java 코드 및 의존성 설정1️⃣ 서비스 계정 JSON 만들기 (SERVICE_ACCOUNT_JSON)https://console.cloud.google.com/ 사이트 접속하기좌측 메뉴에서 IAM 및 관리자 > 서비스 계정 클릭한다.새 서비스 계정을 생성한다이름: {원하는 서비스 계정 이름}역할: A..
java에서 문자열을 처리할때 null 체크와 공백 처리등의 반복작업을 더 간편하게 처리할수 있는 클래스가 있다.String value = "난문자열";if (StringUtils.isNotEmpty(value)) { System.out.println("문자열이 비어있지 않습니다.");}isNotEmpty 를 사용하면 기존의 널체크와 값이 비어있음을 체크하는 노고를 조금 덜어낼수 있다. StringUtils란?Apache Commons Lang 에서 제공하는 문자열 처리 특화 클래스이다.null 값의 안정적인 처리를 도우며 가독성 높은 코드 작성을 가능하게 한다.또한 다양한 문자열 처리 기능도 제공하는데 정규식 표현이 없이도 다양한 문자열을 비교할수 있다.가장 자주 사용하는 메소드 중의 하나가 ..
웹사이트나 앱을 만들다 보면 썸네일, 미리보기, 상세보기 등에 사용되는 다양한 크기의 이미지를 자동 변환해야 할 때가 많다.오늘은 이미지 변환 도구중 대표적인 몇개의 프로그램 사용방법을 정리했다. 1. ImageMagick ImageMagick은 가장 유명한 이미지 처리 툴이다.다양한 포맷과 효과를 지원하며, CLI 또는 API로 이미지 리사이징, 포맷 변환 등이 가능하다.복잡한 이미지 처리작업이 많을 때 사용하는것을 추천하며 자동차 처리를 할 경우 매우 유용하다. 설치 방법Ubuntusudo apt install imagemagickmacOSbrew install imagemagickWindows공식 홈페이지 바로가기 사용 예제public void convertWithImageMagick(String..
HTML 코드 파일첨부 찾아보기 위 코드는 사용자가 파일을 업로드할 수 있는 UI이다.파일을 선택하면 onchange="validateFile(this)"가 실행되어 유효성 검사를 하게 된다.옆에 있는 텍스트 박스는 선택한 파일명을 보여주기 위한 용도다. JavaScript 코드 코드 설명input.files[0]: 사용자가 업로드한 파일 객체를 가져온다.file.name.split('.').pop().toLowerCase(): 확장자를 추출하고 소문자로 변환한다.allowedExtensions.includes(fileExt): 내가 설정한 허용된 확장자인지 확인한다.확장자가 다를 경우..
먼저 [File] -> [New] -> Project from Existiong Sources를 클릭한다.import 할 프로젝트의 폴더를 선택한다.해당 프로젝트의 성격에 따라 Eclipse, Gradle, Maven을 선택한 후 Create 버튼을 클릭한다.[File] -> Project Structure를 클릭한다.Project Settings에서 사용할 SDK 버전과 현재 프로젝트의 버전을 맞춰준다.Artifacts 탭을 눌러 www:war와 www:war exploded 설정이 안 되어 있다면 + 버튼을 눌러 추가한다. 톰캣설정[Run] - Edit Configurations 메뉴를 클릭하고 + 버튼을 누른다.TomcatServer -> local을 클릭한다.이미 application server..
youtube id 추출하기 적용 해제적용 버튼 클릭후 미리 동영상 플레이를 해보시고 꼭 외부에서 플레이가 가능한 상태인지 확인하세요.우선 유튜브 주소를 입력받을 타입이 text 인 input을 하나 만들고 적용버튼과 해제버튼도 만들어 주었다. 적용버튼을 누르면 유튜브 주소를 가져와 정규식으로 고유 id값을 추출한다.추출한 id값은 iframe 요소로 만든후 저장할 input 값에 넣어준다.그리고 사용자가 유튜브 주소값을 수정하지 못하도록 input 창은 readonly 속성을 true 상태로 바꿔준다.마지막으로 적용 버튼은 가려주고 해제버튼은 나타나게 한다.해제 버튼을 누르면 input 창의 readonly 속성을 false 상태로 바꾼 후 미리 보기 했던 div는 empt..
티스토리 주소(URL)는 과거에는 url 변경이 가능 했지만 2021년 이후로 변경이 불가능하게 됐다. 그래서 하나의 블로그만 운영하고 싶다면 현재 사용중인 블로그를 폐쇄한 후 다시 만들어야 한다.단 새로운 블로그를 추가하지 않고 운영중인 블로그가 1개인 경우 블로그 폐쇄와 동시에 회원 탈퇴가 이루어진다.자동 탈퇴가 되지 않게 하려면 블로그를 하나 더 만든 후 탈퇴를 진행해야 한다. 블로그 이름, 닉네임, 설명 바꾸는 방법블로그의 이름, 닉네임, 설명은 관리->블로그->블로그 설정메뉴에서 수정이 가능하다.변경사항을 기입하고 변경사항 저장버튼을 누르면 수정된 내용이 내 블로그에 반영된다.블로그 설정메뉴에서는 아이콘과 파비콘도 수정가능하니 참고하기 바란다. 폐쇄 및 백업하기관리->블로그->데이터관리->..
웹사이트의 페이지가 길어질경우 사용자는 마우스 스크롤을 여러 번 해야만 페이지 상단으로 올라갈 수 있다.그래서 굉장히 번거러울수 있는데 스크롤 이동 버튼을 페이지 하단에 만들어 놓으면 사용자는 클릭 한 번으로 페이지 상단으로 이동가능하게 된다.javascript를 이용한 top 버튼 예제Top 이동 버튼Top Jquery를 이용한 top 버튼 예제 let topBtn = $('#topBtn')$(window).scroll(function(){ if ($(this).scrollTop() > 100){ topBtn.show(); } else{ topBtn.hide(); }})function topMove() { $('html, body').animate..
Dropzone.js란드래그 앤 드롭 이벤트가 가능한 javascript 라이브러리이다.완전한 오픈소스이며 웹사이트에서 서버에 파일을 쉽게 올릴 수 있는 것이 장점이다.또한 다중 멀티 업로드도 지원한다. Dropzone.js 기본사용법 Jquery를 이용해 드랍존을 생성했다.우선 드랍존을 생성할 태그에 id 값을 선언해 주고. dropzone 클래스를 추가해 준다.그리고 내가 필요한 옵션을 추가한다. 주요 옵션 옵션설명url업로드 urlmethodrequest 메소드 선택headers요청 헤더 설정autoProcessQueue자동으로 보내기clickable클릭 가능 여부autoQueue바로 서버에 전송할지 설정createImageThumbnails파일 업로드시 썸네일 생성 여부thumbnailHeig..