초급 개발자 mylee 개발 노트

e.switch는 jQuery 이벤트 객체(e)에서 어떤 키가 눌렸는지 확인할 때 쓰는거! 1. 기본 사용법키보드 이벤트 처리할 때 이렇게 씀:$(document).on('keydown', function(e) { switch (e.which) { // e.keyCode도 됐었는데 이제 deprecated 됐다고 함 case 13: // Enter key submitForm(); break; case 27: // ESC key closeModal(); break; }});  2. 자주 쓰는 키 코드값들이거 자주 까먹어서 정리해둠:Enter: 13ESC: 27Space: 32Left Ar..

1. Spring message 처리 alert("저장되었습니다."); // 하드코딩된 메시지alert('');alert(''); 실수한 것들:jsp 파일에서 스크립트 분리할 때 message 처리// 방법 1: 변수로 먼저 선언// 방법 2: 데이터 속성 활용'> 저장$('button').click(function() { alert($(this).data('msg'));});  2. Form Submit 처리처음에는 순수하게 했다가 실수함:// ❌ 이러면 validation 무시됨$("#searchFrm").submit();// ⭕ 이렇게 하자if($("#searchFrm")[0].checkValidity()) { // 1. action 설정 $("#searchFrm").attr..

1. 기본 문법   2. 실수했던 것들1. empty() 안하고 append 했다가 데이터 쌓임...// ❌ 잘못된 방법$("#dataList").append($("#myTemplate").tmpl(data));// ⭕ 올바른 방법$("#dataList").empty(); // 먼저 비우고$("#myTemplate").tmpl(data).appendTo("#dataList");   2. 변수명 오타\${name} \${userName}   3. 조건문에서 실수{{if status == "Y"}} // 작은따옴표로 해야함{{if status === 'Y'}}   4. null 체크 깜빡함\${obj.value} {{if obj}}\${obj.value}{{/if}}\${obj ? obj.value ..

오늘 업무에서 데이터 입력 받는 팝업창 하나 만들었다.이거 자주 만드는데 매번 찾아보는 것 같아서 정리해둬야겠다 😅 기본 구조 데이터 입력    CSS는 늘 쓰는 거:/* position: fixed 안하면 스크롤 할 때 팝업이 같이 움직여서 불편함 */.popup_layer { position: fixed; top: 20%; left: 25%; width: 800px; z-index: 1000; /* dimLayer보다 위에 있어야 함 */}/* 버튼 간격 flex로 주니까 편하다 */.button_area { display: flex; justify-content: center; gap: 10px;}#..

오늘은 Ajax로 데이터 처리하면서 배운 내용들을 정리해본다.단순히 데이터를 주고받는 게 전부가 아니라는 걸 알게 됐다. 1. 기본적인 Ajax 호출가장 기본적인 형태의 Ajax 호출:$.ajax({ contentType: 'application/json; charset=utf-8', type: 'post', dataType: 'json', url: '/api/endpoint', data: JSON.stringify(requestData), success: function(response) { // 성공 처리 }, error: function(xhr, status, error) { // 에러 처리 }});   2. 데이터 가공해서 ..

오늘은 체크박스 이벤트 처리하면서 배운 내용들을 정리해본다.처음에는 단순하게 생각했다가 여러 엣지케이스를 만나면서 꽤 많이 고생했다... 1. 전체 선택 구현가장 기본적인 전체 선택/해제 로직:// HTML// JavaScript$('#checkAll').change(function(){ // true/false 상태 가져오기 var checkState = $(this).prop("checked"); // 모든 개별 체크박스에 상태 적용 $('input:checkbox[name="chkConfirm"]').prop("checked", checkState); // 버튼 상태도 같이 제어 $('#btnSave').prop('disabled', !checkStat..

1. 페이지 로드 시 초기 이벤트 설정$(document).ready(function ($) { // 날짜 선택기 초기화 $("#startDate").datepicker(); $("#endDate").datepicker(); // 버튼 초기 상태 설정 $('#editBtn').prop("disabled", true); $('#printBtn').prop("disabled", true); // 검색 버튼 클릭 이벤트 $('#searchBtn').click(function (e) { $("#currentPage").val(1); searchData(); e.preventDefault(); }); // 그리드 반..

행 데이터 가져오기// 선택된 행의 데이터 가져오기const rowId = $("#grid").jqGrid('getGridParam', 'selrow');const rowData = $("#grid").jqGrid('getRowData', rowId);// 특정 행의 모든 데이터const specificRowData = $("#grid").jqGrid('getRowData', '행_ID');  셀 값 가져오기// 특정 셀의 값 가져오기const cellValue = $("#grid").jqGrid('getCell', rowId, 'columnName');// getCellValue 사용const value = $("#grid").jqGrid('getCellValue', rowId, 'columnName'..

HTML 요소에서 값 가져오기// id로 접근해서 값 가져오기 const value1 = document.getElementById('elementId').value;// jQuery로 값 가져오기 const value2 = $('#elementId').val();// name으로 접근해서 값 가져오기const value3 = document.getElementsByName('elementName')[0].value;  HTML 요소에 값 설정하기// id로 접근해서 값 설정document.getElementById('elementId').value = '새로운 값';// jQuery로 값 설정$('#elementId').val('새로운 값');// name으로 접근해서 값 설정 document.getE..

오늘은 jqGrid에서 SubGrid 설정하면서 배웠던 내용들을 정리해본다.처음에는 단순히 옵션만 설정하면 되는 줄 알았는데, 실제로 해보니 신경 쓸 게 은근 많았다.  1. 기본 설정 먼저 SubGrid를 활성화하고 기본적인 모양을 잡아주는 설정:$("#mainGrid").jqGrid({ // ... 다른 설정들 ... subGrid: true, // SubGrid 사용 subGridOptions: { plusicon: "ui-icon-triangle-1-e", // 접힌 상태 minusicon: "ui-icon-triangle-1-s", // 펼쳐진 상태 openicon: "ui-icon-arrowreturn-1-e", // 화살표 ..