초급 개발자 mylee 개발 노트

1. 컨트롤러로 값이 안 넘어가는 문제처음 시도했던 코드:function search() { var params = { title: $("#title").val(), content: $("#content").val(), writer: $("#writer").val(), fromDate: $("#fromDate").val(), toDate: $("#toDate").val() }; $("#grid").jqGrid('setGridParam', { url: "/board/search", postData: params, page: 1 }).trigger("reloadGrid");}   ajax..

⚠️ 오늘 발생한 문제들1. 데이터가 안 나오고 자꾸 "게시물이 없습니다" 뜸개발자도구 보니까 500 에러 발생원인: 컨트롤러에서 @RequestBody 때문이었음jqGrid는 form 데이터로 보내는데, 컨트롤러는 JSON만 받으려고 해서 충돌// 이렇게 했다가 실패@RequestBody BoardVO boardVO // JSON만 받으려고 함// 이렇게 수정하니까 됨BoardVO boardVO // 그냥 일반 파라미터로 받기   2. 데이터는 오는데 화면에 안 보임서버 로그 찍어보니 데이터는 잘 나오는데 화면에서 안 보임원인: jqGrid는 rows라는 키로 데이터를 찾는데, 서버는 list로 보내고 있었음// 서버에서 보내는 데이터{ "list": [ { "..

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 ..

오늘 개발하다가 input에서 숫자만 입력받는 부분에서 한참 삽질했다.평소엔 별거 아닌 것 같은데 보통 이런 게 더 귀찮... 😩다음에 또 삽질하기 싫어서 정리해둠! 1. 기본: 숫자만 입력처음에는 단순하게 했다:function onlyNumber(input) { input.value = input.value.replace(/[^0-9]/g, '');} 근데 이러면 안 되는 것들:소수점(.) 입력 불가능음수(-) 입력 불가능콤마(,) 입력 불가능maxlength 걸어도 복붙하면 통과됨 😱   2. 실전에서 쓸만한 버전 function controlNumber(input, options = {}) { let value = input.value; // 1. 옵션 설정 cons..

오늘은 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. 기본적인 날짜 체크 시작일/종료일 관련해서 제일 기본적으로 체크해야 하는 것들:function validateDateRange() { // 1. 날짜 포맷 변환 (2024-01-01 형태로) const startDate = formatDate($('#startDate').val()); const endDate = formatDate($('#endDate').val()); // 2. 필수값 체크 if(!$.trim($("#startDate").val()) || !..

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(); }); // 그리드 반..