Frontend 3

[HTML] 브라우저 자동완성 문제 해결: autocomplete="off" + 뒤로가기 잔상?

ADMIN 개발을 진행하다, 뒤로가기 액션에서 select박스의 잔상이 남아있는 현상이 있었습니다!분명 소스는 option 1이 selected 되었지만, 잔상은 이전 타입 그대로라 왜 캐시가 남아있지 하고 고민하던 중 자동완성 기능이라는 것을 깨달았습니다 :) 웹 개발 중 자주 마주치는 문제 중 하나는 브라우저의 자동 완성 기능으로 인한 불편함입니다.특히, 사용자가 폼 필드를 작성할 때 브라우저가 이전 입력 값을 자동으로 제안하거나 채워 넣는 기능이 원하지 않는 동작을 초래할 수 있습니다. 이 문제를 해결하기 위해 autocomplete="off" 속성을 사용하는 방법에 대해 소개하겠습니다.문제 발생자동 완성 기능은 일반적으로 사용자 경험을 향상시키기 위해 설계되었지만, 특정 상황에서는 문제가 될 수 ..

Frontend 2024.08.23

jQuery | AJAX 요청시 실행되는 이벤트 핸들러 정리

이번에 회사에서 AJAX 요청시 이벤트 핸들러를 사용해서, 클라이언트에서 Exception및 인증로직을 추가해보았는데요! 유용한 함수인 것 같아서, 정리해보려합니다! ajaxSend() AJAX 요청이 발생하기 직전에 실행되는 이벤트 핸들러를 등록합니다. 이 함수를 사용하여 모든 AJAX 요청에 대한 공통된 전처리 작업을 수행할 수 있습니다. EX) 모든 요청에 인증 헤더 추가, 로딩 표시기 표시 등의 작업 수행 ajaxStart() AJAX 요청이 시작될 때 실행되는 이벤트 핸들러를 등록합니다. 이 함수를 사용하여 AJAX 요청이 시작될 때 특정 작업을 수행할 수 있습니다. EX) 페이지 로딩 표시기 활성화 등 작업 수행 ajaxStop() AJAX 요청이 모두 완료되었을 대 실행되는 이벤트 핸들러를 ..

Frontend 2024.03.21

jQuery | 문서 객체가 완전히 로드되었을 때 실행되게 하는 방법.

회사에서 프론트쪽 ajax 전체 핸들링을 하다가, $(function() {...}) 구문이 있는 것과 없는 것의 차이를 깨닫게 되어 기록하려고 합니다. 아직 jQuery와 친해지지 않아, 이런 사소한 차이들에서 코드가 달라지는 게 아직 신기하네요 :) $(function() { ... }) 구문과 $(document).ready(function() { ... }) 구문 두 구문 모두 jQuery에서 문서가 모두 준비되었을 때 실행되는 코드를 정의하는 방법입니다. 두 가지 방법 모두 문서 객체가 완전히 로드된 후에 코드를 실행합니다. 1. 표현방식의 차이 $(function() { ... }) 은 축약된 형태로, 문서 객체가 준비되었을 때 실행되는 코드 블록을 정의합니다. 이는 더 간결한 형태이기 때문에..

Frontend 2024.03.21