Javascript - ynjch97/YNJCH_WIKI GitHub Wiki

โ–ท ์ •๊ทœ์‹์„ ์ด์šฉํ•œ ์ž…๋ ฅ ๋ฐฉ์ง€

  • [] ๋กœ ๊ฐ์‹ธ๋Š”๋ฐ [^] ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๋ฉด ํ•ด๋‹น ๋ฌธ์ž๋ฅผ ์ œ์™ธํ•œ๋‹ค๋Š” ๋œป์ด ๋จ
  • \ ๋’ค์— ํŠน์ˆ˜ ๋ฌธ์ž ์ž…๋ ฅํ•˜์—ฌ ์ •๊ทœ์‹ ๋ฌธ์ž์—ด์„ ๋งŒ๋“ ๋‹ค.
var inputTxt = /[\{\};|~!^\โ”ผ<>\#$\'\"\\]/gi;
$("body").on("keyup", 'input:not([type="password"]):not(".noChk"), textarea:not(".noChk")', function(){
	var txtVal = $(this).val();
	if(inputTxt.test(txtVal)){ // ํŠน์ˆ˜๋ฌธ์ž๊ฐ€ ํฌํ•จ๋˜๋ฉด ""์œผ๋กœ replace
		$(this).val(txtVal.replace(inputTxt,""));
	}
});
var numTxt = /[^0-9]+/;
$("body").on("keyup", 'input.number', function(){
	var txtVal = $(this).val();
	if(numTxt.test(txtVal)){ // ์ˆซ์ž๋ฅผ ์ œ์™ธํ•œ ๋ชจ๋“  ๋ฌธ์ž replace
		$(this).val(txtVal.replace(numExcept,""));
	}
});

โ–ท event.stopPropagation(), event.preventDefault()

  • event.stopPropagation() : ๋ถ€๋ชจ ๊ฐ์ฒด์˜ onclick ์ด๋ฒคํŠธ์™€ ์ž์‹ ๊ฐ์ฒด์˜ onclick ์ด๋ฒคํŠธ๊ฐ€ ์žˆ์„ ์‹œ
    ์ž์‹ ๊ฐ์ฒด ํด๋ฆญ ์ด๋ฒคํŠธ๋งŒ ์‹คํ–‰๋˜๊ณ  ๋ถ€๋ชจ๋กœ ์ „ํŒŒ๋˜์ง€ ์•Š๋„๋ก ํ•จ
  • event.preventDefault () : a ํƒœ๊ทธ์˜ ๊ฒฝ์šฐ href ์˜ ์ด๋ฒคํŠธ์™€ onclick ์ด๋ฒคํŠธ๊ฐ€ ์žˆ์„ ์‹œ
    ํด๋ฆญ ์ด๋ฒคํŠธ๋งŒ ์‹คํ–‰๋˜๊ณ  ๊ทธ ์™ธ์˜ ๊ฒƒ์€ ์‹คํ–‰๋˜์ง€ ์•Š๋„๋ก ํ•จ

โ–ท Formdata ๋ฉ”์†Œ๋“œ

  • append(key, value) : ๋ฐ์ดํ„ฐ ํ‚ค์™€ ๊ฐ’์„ ์ถ”๊ฐ€
  • delete(key) : ์ถ”๊ฐ€๋œ ๋ฐ์ดํ„ฐ ์‚ญ์ œ
  • has(key) : ํŠน์ • ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€ ํ™•์ธ
  • entries() : ํ˜„์žฌ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ฐ์ดํ„ฐ์˜ ๊ฐ’์„ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜
  • values() : ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฐ’์„ ๋ชจ๋‘ ๋ฐ˜ํ™˜
  • get(key) : ํ‚ค์™€ ๋งคํ•‘๋œ ๊ฐ’ ๋ฐ˜ํ™˜
  • set(key, value) : ๋ฐ์ดํ„ฐ์˜ ๊ฐ’์„ ์„ค์ •, ์„ค์ •๋œ ๊ฐ’์„ ๋ณ€๊ฒฝ
// infoForm ์˜ input ์ค‘ testVal ํด๋ž˜์Šค๋ฅผ ๊ฐ€์ง„ ๊ฒƒ๋งŒ ์ฝค๋งˆ(,)๋ฅผ '&#44;' ๋กœ ๋ณ€ํ™˜
var formData = new FormData($('#infoForm')[0]);
var valStr = "";
var keyStr = "";
for(var keys of formData.keys()) {
	keyStr = String(keys);
	var valArray = formData.getAll(keyStr);
	if (formData.has(keyStr)){ // formData ์— ์žˆ๋Š” ๊ฐ’ ์ค‘์—
		if ($("input[name='" + keyStr + "']").first().hasClass("testVal")) { // testVal ํด๋ž˜์Šค๋ฅผ ๊ฐ€์ง„ ๊ฒฝ์šฐ
			$.each(valArray, function(i, v) {
				valStr = v.replace(/,/g, '&#44;')
				valArray.splice(i, 1, valStr);
			});
			formData.set(keyStr, valArray);
		}
	}
}

โ–ท Enter ํ‚ค๋ฅผ ์ด์šฉํ•œ ๊ฒ€์ƒ‰

  • form ์•ˆ์— text ํƒ€์ž… input ๋ฐ•์Šค๊ฐ€ ํ•˜๋‚˜๋งŒ ์กด์žฌํ•  ๊ฒฝ์šฐ (hidden์ œ์™ธ) input ๋ฐ•์Šค์—์„œ Enter ๋ฅผ ์น˜๋ฉด ์ž๋™์œผ๋กœ form submit์ด ๋จ
  • input ๋ฐ•์Šค์—์„œ ์—”ํ„ฐ ๋ˆŒ๋ €์„ ๋•Œ ๊ฒ€์ƒ‰์ด ๋™์ž‘ํ•˜๊ฒŒ ํ•˜๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ค์ •
<input type="text" onkeypress="if( event.keyCode==13 ){searchList();}" />
  • ๋‹ค์Œ๊ณผ ๊ฐ™์ด JQuery ๋ฅผ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ์Œ
$("#searchKeyword").keyup(function(e){if(e.keyCode == 13)  searchList(); });

โ–ท <form> ํƒœ๊ทธ๋กœ ๊ฒ€์ƒ‰ ์‹คํ–‰

  • <form> ํƒœ๊ทธ ๋‚ด์— hidden ์†์„ฑ์œผ๋กœ ๋„ฃ์€ input ๊ฐ’์„ ๋„˜๊ธธ ๋•Œ
<form id="frm" name="frm">
	<input type="hidden" id="type" name="type" value="0"> (...์ƒ๋žต)
  • ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ•˜์—ฌ ์žฌํ™œ์šฉ ๊ฐ€๋Šฅ
function goDetail(){
	$("#frm").attr({action:'${pageContext.request.contextPath}/common/memberDetail.do', method:'post'});
	$("#frm").submit();
}

โ–ท onload ์™€ ready

  • window.onload : ํŽ˜์ด์ง€๊ฐ€ ๋ชจ๋‘ ๋กœ๋“œ๋œ ์‹œ์ ์— ํ•œ ํŽ˜์ด์ง€ ๋‹น ํ•˜๋‚˜๋งŒ ์ ์šฉ๋จ
window.onload = function () {
}
  • $(document).ready() : DOM์ด ๋ชจ๋‘ ๋กœ๋“œ๋œ ์‹œ์ ์— ์ค‘๋ณต ์‚ฌ์šฉํ•ด๋„ ์ˆœ์„œ๋Œ€๋กœ ๋ชจ๋‘ ์‹คํ–‰
$(document).ready(function(){ // ์ƒ๋žตํ•˜์—ฌ $().ready(function(){ ๋˜๋Š” $(function(){ ๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
});

โ–ท ์˜ต์…”๋„ ์ฒด์ด๋‹(Optional Chaining)

  • Optional chaining์€ ?. operator์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•จ
  • '?'๋ฅผ ๋ถ™์—ฌ ๊ทธ ์†์„ฑ์ด ์กด์žฌํ•˜๋Š” ๊ฒฝ์šฐ์—๋งŒ chaining์„ ๊ณ„์†ํ•˜๊ณ  ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉด undefined ๋ฆฌํ„ด
  • object์˜ prop๋ฟ๋งŒ ์•„๋‹ˆ๊ณ  ๋ฐฐ์—ด, ํ•จ์ˆ˜์—๋„ ์ ์šฉ ๊ฐ€๋Šฅ
  • obj?.prop / obj?.[expr] / arr?.[index] / func?.(args)
const person = {
	name: 'Alice',
	job: {
		companyName: 'abc',
		title: 'developer'
	}
};

console.log(person.job.companyName); // 'abc'
console.log(person.pet.name); // error
console.log(person.pet?.name); // undefined
โš ๏ธ **GitHub.com Fallback** โš ๏ธ