728x90
반응형

Front 538

[HTML] autocomplete="off"를 사용하는 이유

민감한 정보 : 민감한 데이터(예: 비밀번호, 신용카드 번호, 개인 정보)를 처리하는 필드의 경우 보안을 강화하기 위해 브라우저가 값을 저장하고 자동으로 채우는 것을 방지할 수 있습니다. input type="password" autocomplete="off"> 동적 양식에서 자동 채우기 방지 : 동적 또는 반복 양식(단일 페이지 애플리케이션 또는 동적으로 추가된 필드가 있는 양식)으로 작업하는 경우 브라우저가 의도치 않은 곳에 잘못된 데이터를 자동 채우기하면 문제가 될 수 있습니다. 설정 autocomplete="off"하면 브라우저가 이전 양식 항목의 값을 자동 제안하지 않도록 할 수 있습니다.양식 동작 사용자 정의 : 사용자 정의 자동 완성 시스템이나 양식 필드 검증과 같은 일부 UX 시나리오의 경..

Front/HTML 2024.10.15

[jQuery][Datatables] scrollCollapse

scrollCollapse: false는 DataTables 옵션 중 하나로, 테이블 내에 세로 스크롤이 활성화되어 있을 때테이블의 크기에 따라 스크롤 영역이 자동으로 축소되지 않도록 설정하는 역할을 합니다.구체적인 설명은 다음과 같습니다:scrollCollapse: false:테이블에 데이터가 적어도 스크롤 영역이 고정된 크기를 유지합니다.세로 스크롤이 활성화된 상태에서도 테이블의 높이를 조정하지 않으며, 스크롤바가 항상 나타날 수 있습니다.빈 데이터나 적은 데이터로 인해 테이블의 높이가 작아지더라도 스크롤 영역이 그대로 유지되기 때문에, 스크롤바의 유무에 상관없이 테이블이 일정한 높이를 유지합니다. 반대로 scrollCollapse: true로 설정하면, 데이터의 양에 맞춰 테이블 높이가 자동으로 줄..

Front/JS & jQuery 2024.09.13

[HTML] rel="noopener noreferrer"

rel="noopener noreferrer"는 보안과 성능 측면에서 새 창을 열 때 사용하는 target="_blank" 속성의 단점을 보완하기 위한 속성입니다. 이 속성들은 주로 두 가지 역할을 합니다:1. noopener목적: 새 창이 부모 창에 접근할 수 없도록 만듭니다.설명: target="_blank"를 사용하면 새 창(또는 새 탭)이 열리는데, 이때 새로 열린 창이 window.opener 객체를 통해 부모 창에 접근할 수 있습니다. 악의적인 페이지가 이 기능을 악용하여 부모 창의 내용을 조작하거나 스크립트를 실행할 수 있습니다. rel="noopener"는 이런 상호작용을 방지하여 새 창이 부모 창에 접근할 수 없도록 막아줍니다.새 창에서 열기이렇게 설정하면 새 창은 참조 페이지에 대한 정..

Front/HTML 2024.09.12

[CSS] 상위요소 너비 이상이면 스크롤 생성

table이 상위 요소의 너비를 넘어갈 때 스크롤이 생기도록 하려면,table을 감싸는 컨테이너에 CSS 속성을 추가하여 해결할 수 있습니다.  html 코드  css 코드.table-container { width: 100%; /* 원하는 너비를 지정할 수 있음 */ overflow-x: auto; /* 가로 스크롤이 필요할 때만 생성 */}table { width: 100%; /* 테이블 크기 조절을 위해 width 사용 */ min-width: 600px; /* 테이블의 최소 너비를 설정 (옵션) */ border-collapse: collapse;} overflow-x: auto 속성은 테이블이 컨테이너 너비를 넘어갈 경우 가로 스크롤을 생성해 줍니다.min-width..

Front/JS & jQuery 2024.09.08

[js] Promise 객체 처리

Promise 객체를 처리하려면 then() 또는 async/await 구문을 사용하여 Promise의 결과를 처리해야 합니다.  1. then()을 사용하는 방법: this.rsltData .then(response => { // Promise가 성공적으로 이행된 경우 if (response.status === '000') { console.log({ status: response.status, msg: response.msg, result: response.result.data // data 배열만 출력 }); } else { console.log('오류 발생:', response.msg); } }) .catc..

Front/JS & jQuery 2024.09.07

[jQuery] 이벤트 핸들러 이해하기

1. 오류상황function onChangeTab() { console.log("Tab changed!");}$container.on('click', '.subheader > .sub-nav > .btn', onChangeTab());// "Tab changed!"는 이벤트가 발생하기 전에 이미 실행됨// 이후, 이벤트 발생 시 아무 일도 일어나지 않음 설명: 이 코드에서는 onChangeTab() 함수를 즉시 실행하고, 그 결과 값을 on() 메서드에 전달하려고 합니다.결과: onChangeTab()이 실행된 후, 그 함수의 반환값이 on() 메서드에 전달됩니다.                                                                 만약 onChange..

Front/JS & jQuery 2024.08.27

[jQuery][datepicker] minViewMode

날짜 선택기 라이브러리의 옵션 minViewMode을 사용하면 날짜 선택기가 표시할 수 있는 최소 뷰 레벨을 제어할 수 있습니다. 이는 사용자가 월이나 년과 같이 일별 레벨이 아닌 날짜 범위를 선택하도록 하려는 경우에 특히 유용합니다.예를 들어:minViewMode: 0(기본값): 선택기는 일별 보기로 시작합니다.minViewMode: 1: 선택기는 월별 보기로 시작합니다.minViewMode: 2: 선택기는 연도별 보기로 시작합니다.$('#datepicker').datepicker({ minViewMode: 1, // This will display only months and years. format: 'mm/yyyy' // Format to display only month and yea..

Front/JS & jQuery 2024.08.25

[js] moment.js 라이브러리의 utc() 함수

moment.js 라이브러리의 utc() 함수는 날짜와 시간을 UTC(Coordinated Universal Time, 협정 세계시) 기준으로 설정하거나 변환할 때 사용됩니다. 이 함수는 여러 상황에서 유용하며, 시간대를 처리할 때 특히 중요합니다.주요 기능현재 시간을 UTC로 설정:moment.utc()를 호출하면, 현재 시간을 UTC로 설정한 moment 객체를 반환합니다.var nowUtc = moment.utc();console.log(nowUtc.format()); // 예: "2024-08-09T12:00:00Z" 기존 날짜를 UTC로 변환:기존에 생성된 moment 객체를 utc() 함수를 사용해 UTC 시간으로 변환할 수 있습니다.var localTime = moment('2024-08-..

Front/JS & jQuery 2024.08.16
728x90
반응형