MINYA

자바스크립트에서 반복문(loop) 은 기본적으로 동기적으로 실행됩니다. 하지만 비동기 코드(setTimeout, fetch, await)가 포함되면 비동기적으로 실행될 수 있습니다. 이 글에서는 동기적으로 실행되는 루프문과, 비동기 코드가 포함된 경우 동기적으로 실행하는 방법을 정리하겠습니다. ✅ 동기적으로 실행되는 루프문다음의 루프문은 순차적으로 실행되며 동기적입니다.1️⃣ for 문 (동기 실행)console.log("Start");for (let i = 0; i  출력 결과Start012End 📌 for 문은 순차적으로 실행되므로 완전히 동기적입니다. 2️⃣ while 문 (동기 실행) console.log("Start");let i = 0;while (i 출력 결과Start012End 📌 wh..

function isAdult(year, month, day) { const today = new Date(); const birthday = new Date(year, month - 1, day); const diffYear = today.getFullYear() - birthday.getFullYear(); const diffMonth = today.getMonth() - birthday.getMonth(); const diffDay = today.getDate() - birthday.getDate(); // 년도 차이가 19이면 월과 일 차이도 체크 if (diffYear === 19) { // 월 차이가 마이너스면 아직 생일이 지나지 않은 상태 if (diffMonth < 0) { return t..

return의 용도 MDN의 설명에 따르면 'return 명령문은 함수 실행을 종료하고 주어진 값을 함수 호출 지점으로 반환합니다.'라고 되어있다. 함수 중단 주어진 값을 함수 호출 지점으로 반환 함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고, 값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환하는데, 이때 값을 명시하지 않으면 undefined를 반환한다. 아래와 같은 명령문은 모두 함수 실행을 중단한다. return; return true; return false; return x; return x + y / 3; return; 만 있는 경우 if 문의 조건이 충족하는 경우 해당 함수를 실행을 중단하고 함수 자체에서 빠져나가라는 의미. Stack.prototype.pop..

Ajax에서 JSON배열을 컨트롤러 전송. Ajax에서 데이터를 컨트롤러로 전송하는 방법중 배열(array) 데이터를 컨트롤러로 보내서 처리해야할 때가 자주 있습니다. 단 일 데이터가 아닌 JSON형태의 그것도 배열이 담겨있다면 컨트롤러에서 데이터를 받을 때 좀 삽질할 수도 있는데 삽질을 최대한 줄여보도록 하겠습니다. 데이터 전달하기 (Ajax -> controller) 아래와 같이 여러멤버의 정보가 담겨있는 JSON 배열을 JSON.stringify 을 이용하여 넘겨주시면 됩니다. 배열을 전송할 때는 Ajax 옵션중 "traditional: true" 로 꼭 설정해두고 넘겨야 합니다. function insertMemberInfo() { let getMemberInfo = [ { memberNo: 1,..

input 태그에 에 JSON으로 데이터 전달 input 태그를 사용하다 보면 value 값으로 데이터를 한 번에 여러개를 전달하는 일이 생깁니다. 그냥 일차원 적으로 value="값1, 값2, 값3" 이렇게 생각을 할 수도 있는데, 이렇게 코딩을 하면 value 값을 자바스크립트로 뽑아낼 수는 있으나.. 비효율적인 코딩 입니다. 한 번에 여러 데이터를 전달하고 싶다면, Key : Value 로 이루어진 오브젝트 형인 JSON 형태로 전달을 하는게 깔끔합니다. JSON JSON은 Key : Value 로 구성하여 만듭니다. { key1 : value1, key2 : value2, key3 : value3, key4 : value4, key5 : value5 } JSON 데이터 전달하기 let jsonTe..

.not() .not()은 제이쿼리로 선택한 선택자(요소)들 중에서, 특정 선택자(요소)만을 제외하는 함수입니다. 자주 사용되는 함수는 아니지만 종종 필요한 경우가 있더라구요. html 클릭해보아요 1 2 3 4 5 6 7 8 9 10 SCRIPT $('button').click( function() { $('li').not('li.none').css('color', 'red'); });

JSTL을 사용하여 select box 값 고정하기 뷰 페이지 (jsp 페이지)를 개발하다 보면 셀렉트박스(select box)를 자주 사용합니다. 셀렉트박스(select box)를 선택하여 화면 이동시 리로딩(새로고침) 되는 페이지를 개발하다보면 리로딩 되어도 선택한 셀렉트박스(select box)의 값(value)이 고정되게 만들어야 할 때가 있습니다. 위의 이미지 처럼 선택한 값이 다시 고정되게 만드려면 뷰 -> 컨트롤러 -> 뷰 (view -> controller -> view) 로 선택한 값을 넘겨주고, 컨트롤러로 부터 뷰 페이지로 넘겨받은 값을 다시 자바스크립트,제이쿼리 또는 JSTL을 사용하여 고정시켜주면 됩니다. HTML 해지 진행 완료 jQuery 뷰에서 보낸 test 값을 컨트롤러에서 ..

자동으로 콤마(,) 입력 input 태그에 숫자를 입력시에 천 단위마다 자동으로 콤마를 찍어주는 팁입니다. "common.js" 라는 파일을 만들어 이렇게 전역적으로 사용되는 파일들을 작성하고 사용하시면 더 깔끔하게 사용하실 수 있어요. HTML 작성 위의 input 태그처럼 작성해주고 onkeyup 속성으로 스크립트를 호출합니다. script (common.js) function inputNumberFormat(obj) { obj.value = comma(uncomma(obj.value)); } function comma(str) { str = String(str); return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'); } function uncomma(s..

onchange() 함수 활용 간단히 onchange 함수를 활용해볼 수 있다. html 1월 2월 3월 4월 5월 script // 제이쿼리를 이용한 방법 $("#month").change(function(){ let month1 = $(this).val(); let month2 = $("#month > option:selected").val(); console.log(month1); console.log(month2); }); // 함수를 만들어 호출하는 방법 function getMonth() { let month3 = $("#month > option:selected").val(); console.log(month3); } 셀렉트박스(SelectBox) 값(value) 고정시키기 // value값..

Math() Math.ceil() : 소수점 올림, 정수 반환 Math.floor() : 소수점 버림, 정수 반환 Math.round() : 소수점 반올림, 정수 반환 올림 let testNum = 99.11; console.log(Math.ceil(testNum)); // 100 출력, 올림 적용 버림 let testNum = 99.11; console.log(Math.floor(testNum)); // 99 출력, 버림 적용 반올림 let testNum = 99.5; console.log(Math.round(testNum)); // 100 출력, 반올림 적용 toFixed(), toExponential(), toPrecision() toFixed(), toExponential(), toPrecisio..