눈뜬감자의 웹개발

hover()는 간편하고 자주 쓰는 방식이다바로 사용법 알려드림✅ 예시 1: hover() 사용$("#listForm tr").hover( function () { // 마우스 진입 시 $(this).css("background-color", "#f5f5f5"); }, function () { // 마우스 이탈 시 $(this).css("background-color", ""); }); ✅ 예시 2: mouseenter + mouseleave 별도로 사용$("#listForm tr").on("mouseenter", function () { $(this).css("background-color", "#f5f5f5");});$("#..

선결론!!!📌 핵심 요약함수 타입this가 가리키는 대상function () {}호출한 주체 (ex. 이벤트 발생한 tr 요소)() => {}선언된 위치의 this (렉시컬 스코프)1. function () {} (전통적인 함수)$("tr").hover(function () { console.log(this); // 👉 현재 이벤트가 발생한 tr}); 이 경우 this는 이벤트가 붙은 DOM 요소를 자동으로 가리켜요.즉, 마우스를 올린 그 tr 태그 하나.jQuery는 이 전통적인 방식에 최적화되어 있어서 이렇게 쓰는 게 일반적이에요. 2. () => {} (화살표 함수)$("tr").hover(() => { console.log(this); // 👉 이건 tr이 아니라 바깥의 this}..

뮻선결론!결론- 가장 쉬운 해결책: will-change: transform; 추가- 추가 해결책: backface-visibility: hidden; 또는 transform: translateZ(0); 적용- 완벽한 해결책이 없을 경우: overflow-x: auto;로 변경해서 브라우저가 자동으로 최적화하도록 유도  오늘 갑자기 작업중에 overflow-x :scroll; 할일이 있어서 적용했는데흐릿해지더군요..!  overflow-x: scroll;을 적용했더니 폰트와 이미지가 흐릿해지는 현상은 브라우저의 서브픽셀 렌더링 문제 때문입니다.원인 서브픽셀 위치 문제 overflow-x: scroll;을 사용하면 브라우저가 정확한 정수 단위의 픽셀 위치가 아닌 "서브픽셀" 단위로 요소를 배치할 수 있음...

1. document readydocument ready는 문서가 DOM(Document Object Model)을 모두 로드했을 때 실행되는 이벤트입니다. 즉, DOM이 준비된 시점에 JavaScript 코드를 실행할 수 있도록 합니다.예시:jQuery를 사용한 방식javascript코드 복사$(document).ready(function() { console.log("DOM이 준비되었습니다!"); });Vanilla JavaScript를 사용한 방식javascript코드 복사document.addEventListener("DOMContentLoaded", function() { console.log("DOM이 준비되었습니다!"); });// jQuery$(document).ready(function(..

회사에서 업무하다가 가끔 기사를 읽고 싶을 때가 있다그럴땐 기사를 몰래 보곤하는데 이미지가 나와서 당황스럽다그래서 이미지를 없애버리고 싶단 생각을 하게 됨 $("img").remove(); 이 코드만 쓰더라도 모든 img가 사라진다 하지만,jQuery는 이미 로드된 DOM 요소를 대상으로 하기 때문에동적으로 추가된 이미지 요소 또는 Shadow DOM 내부의 이미지 요소를 삭제하는 데문제가 있을 수 있음 이럴 땐document.querySelectorAll('img').forEach(i => i.remove()) js로 바꿔서 써주면 된다... 한번에 날아가버리는 img들!아래를 봐보자 JavaScript의 querySelectorAll은 실제 DOM의 모든 요소를 순회하므로,jQuery로 인식되지 않는..

requestAnimationFrame은 브라우저의 애니메이션 루프에 최적화된 방식으로 작업을 실행하기 위해 사용애니메이션이나 화면에서 자주 업데이트해야 하는 요소들을 더 효율적으로 처리할 수 있게 도와줌주요 특징 및 사용법프레임 동기화: requestAnimationFrame은 브라우저의 디스플레이 주기와 동기화하여 콜백 함수를 실행함이는 보통 60fps(초당 60프레임)를 목표로 하며, 모니터의 주사율에 따라 조정됨CPU 효율성: setInterval이나 setTimeout과는 달리 비활성 탭에서는 실행이 멈춤, 따라서 리소스를 아낌콜백 전달: requestAnimationFrame은 콜백 함수를 매개변수로 받음. 이 콜백은 애니메이션 프레임이 준비될 때마다 실행됨.기본 사용 예제function an..

선 결론!function alert_false(msg, target){ alert(msg); $(target).focus(); return false;} 웹개발자가 코드를 짜다보면 form 구조를 많이 접하는데,submit에서 빈칸이 발생하였을 경우 해당 target으로 이동시키면서return false 시키는 코드를 계속 짜다가 귀찮아서 그냥 함수를 만들었다 그러다 보니 매우 편리함 포인트는 div에 tabindex=0을 꼭 넣어주는 것이다 tabindex란? div는 기본적으로 포커스가 불가, tabindex를 추가하면 해당 div가 포커스 가능해짐!그 후 키보드 및 마우스 이벤트에 반응되므로 사용자 상호작용이나 접근성 측면에서 중요함  예시코드는 이러하다별점 @for($i=0; $..

선결론!const loadImg = () => { const preLoadImgSrc = [ "/img/images/1.png", "/img/images/2.png", "/img/images/3.png", ]; preLoadImgSrc.forEach((arr) => { const img = new Image(); img.src = arr; });}; 이미지 프리로딩이란?이미지가 필요해지는 시점보다 미리 로드해 두어 페이지 로딩 중의 딜레이를 줄이는 데 사용됨. 특히 애니메이션이나 인터랙티브한 웹 게임에서 이미지가 자주 등장할 때 성능을 개선할 수 있음.   loadImg 함수의 장점이미지 로딩 지연 방지: 브라우저가 해당 이미지가 실제로 화면에 렌더링되기 전에 이미 다운..

결론부터 말하자면,  본론시작!나는 기존에이렇게만 코드를 작성하여 blade 및 html에서 스크립트 파일을 참조하고 있었다그런데 브라우저의 입장에서는 파일 이름과 경로가 같으면 해당 파일을 이미 읽었으므로 캐시에서 가져오려 한다그래서 location.js 파일을 한 번 읽은 다음부터는 수정을 해도 반영 안되는 현상이 생겼음..!  근데 캐시가 뭔가요?자주 쓰는 데이터를 미리 복사해 놓는 임시 장소로써,웹 로드할때마다 모든 리소스를 읽으면 느려지니 캐시를 읽음으로서 로딩 시간 단축시킴 감자는 생각했다- 스크립트 파일을 수정을 했을 때, 버전명을 추가한다면 새롭게 읽어오므로 수정사항이 반영 되어 있겠지!- 그래서 이렇게 짰다. 이렇게 코드를 짠다면 date('his')는 php함수에서 현재의 시간과 분 초..

깔끔하게 날짜를 SELECT 하는 방법!datepicker.js 라이브러리를 이용하여 간단하게 날짜 셀렉트를 구현해보자!DATEPICKER 란?달력처럼 날짜를 구현해주는 예쁜 UI 바로 코드 고고링!$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", // 날짜 형식 지정 (예: 2023-12-18) showOtherMonths: true, // 이전/다음 달의 날짜도 표시 selectOtherMonths: true, // 이전/다음 달의 날짜도 선택 가능 minDate : 0, beforeShowDay: function(date) { // 주말 (토요일: 6, 일요일: 0)이면 선택 불가능하도록 설정 var day = date..