연관글2025.04.18 - [Programing/javascript] - 💰 숫자를 한글로 금액 단위로 표현2025.05.27 - [Programing/javascript] - JavaScript로 구현하는 금액의 영어 단위 변환 (Number to Words)2025.05.27 - [Programing/javascript] - JavaScript로 구현하는 금액 단축 표기 (K / M / B 표기법)2025.05.27 - [Programing/javascript] - JavaScript로 구현하는 게임 데미지 단위 축약 (A ~ ZZZZ)2025.06.11 - [Programing] - 엑셀/스프레디시트에서 숫자를 한글로 표기하는 방법 총정리 (Excel to Hangul Conversion)일반적..

연관글2025.04.18 - [Programing/javascript] - 💻 숫자를 한글 숫자 표기로 변환2025.05.27 - [Programing/javascript] - JavaScript로 구현하는 금액의 영어 단위 변환 (Number to Words)2025.05.27 - [Programing/javascript] - JavaScript로 구현하는 금액 단축 표기 (K / M / B 표기법)2025.05.27 - [Programing/javascript] - JavaScript로 구현하는 게임 데미지 단위 축약 (A ~ ZZZZ)2025.06.11 - [Programing] - 엑셀/스프레디시트에서 숫자를 한글로 표기하는 방법 총정리 (Excel to Hangul Conversion)금액 정..

웹에서 이미지를 업로드할 때, 용량이 큰 이미지를 서버에 바로 전송하면 속도도 느리고 서버 부담도 커지기 마련입니다.그래서 프론트엔드에서 미리 이미지 사이즈를 줄이고(base64 또는 Blob 등으로) PHP 서버로 전송하면 효율적으로 처리할 수 있습니다.이번 글에서는 JavaScript로 이미지 리사이징을 수행하고, PHP로 업로드하는 전체 과정을 예제와 함께 정리해보겠습니다.✅ 전체 흐름 요약사용자가 파일 선택JavaScript에서 이미지 리사이징 (canvas 사용)리사이징된 이미지를 Blob 또는 Base64로 변환FormData에 담아 서버에 전송 (AJAX)PHP에서 업로드 처리🧪 1. HTML - 파일 입력 필드 만들기업로드🧪 2. JavaScript - 이미지 리사이징 코드functio..

웹 개발을 하다 보면 사용자의 생년월일로 나이를 계산해야 하는 경우가 자주 생깁니다. 예를 들어 회원가입 시 나이 제한을 두거나, 생일을 기준으로 혜택을 주는 이벤트 등을 만들 때 꼭 필요한 기능이죠.이 글에서는 자바스크립트를 사용해서 생년월일로 나이를 계산하는 3가지 방법을 소개하고, 만 나이 계산 팁까지 함께 알려드립니다.✅ 방법 1: 기본적인 연도 차이 계산function getAge(birthYear) { const currentYear = new Date().getFullYear(); return currentYear - birthYear;}console.log(getAge(2000)); // 출력: 25 (2025년 기준)🔸 단점: 생일이 지나지 않은 경우까지 포함해서 정확한 만 나이는 ..

웹 애플리케이션을 개발하다 보면 URL의 파라미터(query string)를 추가하거나 변경해야 하는 상황이 자주 발생합니다. 예를 들어, 필터링 조건을 URL에 반영하거나, 특정 상태를 공유 가능한 URL로 만들고 싶을 때죠.이번 포스팅에서는 JavaScript를 사용해서 URL 파라미터를 동적으로 업데이트하는 방법을 실전 예제와 함께 알아보겠습니다. 📌 URL 파라미터란?URL 파라미터는 ? 뒤에 붙는 쿼리 스트링을 의미합니다.https://example.com/page?category=books&page=2 위 URL에서 category=books, page=2는 URL 파라미터입니다. 🛠️ URL 파라미터 업데이트 방법1. URLSearchParams 사용하기 (추천)현대적인 브라우저에서는 U..

var user_list = { '김': 16, '이': 32, '박': 5 }; var sort_user_list = {}; Object.keys(user_list).sort(function(_a, _b){ return user_list[_b] - user_list[_a]; // DESC // return user_list[_a] - user_list[_b]; // ASC }).forEach(function(_key){ sort_user_list[_key] = user_list[_key]; });

1 2 3 4 5 // 기본, class요소 값이 'name'과 정확히 일하는 class를 선택한다. $('div[class="name"]').html('change'); // change: 1 // class요소의 값이 'name'으로 시작하는 모든 class를 선택한다. $('div[class^="name"]').html('change'); // change: 1, 2, 3 // class요소의 값이 'name'이 포함된 모든 class를 선택한다. $('div[class*="name"]').html('change'); // change: all // class요소의 값이 'name'으로 끝나는 모든 class를 선택한다. $('div[class$="name"]').html('change'); // ..

$(document).on('DOMSubtreeModified', 'div', function(e){ $(this).removeClass('animation'); // offsetWidth을 사용해서 요소의 상태를 초기화 처리 e.currentTarget.offsetWidth; $(this).show().addClass('animation'); }); remoClass와 addClass를 반복하면 .animation의 애니메이션효과는 반복되지 않는 현상이 있다. 이럴 때 e.currentTarget.offsetWidth; 를 사용하여 요소의 상태를 초기화를 해주면 애니메이션을 반복하여 실행시킬 수 있다.

$(document).on('DOMSubtreeModified', 'div', function(e){ console.log('내용 변경됨'); }); 위 코드를 이용하요 DOM의 내용 및 구조가 바뀌었을때 감지 가능하다.

윤년이란? 지구가 태양 한 바퀴 도는 데에 365일 5시간 48분 46초가 걸리며, 365일이 초과되는 시간을 보정하기 위해 만들어진게 윤년이다. 윤년은 4년 마다 한번 2월 29일을 둔다. 해당 년도가 윤년인지 아닌지 확인하는 방법은 아래와 같다 연수가 4로 나누어 떨어지는 해는 윤년 100으로 나누어 떨어지는 해는 평년 400으로 나누어 떨어지는 해는 윤년 위 방법으로 만든 코드는 아래와 같다. function leapYear(year) { return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0); } console.log(leapYear(2019)); // false console.log(leapYear(2020)); // true co..