[javascript] object ๋‚ด์— json string์„ object๋กœ ๋ณ€ํ™˜
ยท
Languages/JavaScript
toJson(target :any) { Object.keys(target).forEach(function (key: string) { try { target[key] = JSON.parse(target[key]); } catch (e) { target[key] = target[key]; } }); return target; }
[Nodejs] NPM ์„ค์น˜๋œ ํŒจํ‚ค์ง€ ๋ฆฌ์ŠคํŠธ ํ™•์ธ
ยท
Languages/JavaScript
npm list -g --depth=0 npm: ๋…ธ๋“œ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ ํ•ด์ฃผ๋Š” ํˆด ์ž…๋‹ˆ๋‹ค. list -g: ์„ค์น˜๋œ ํŒจํ‚ค์ง€๋ฅผ ํŠธ๋ฆฌํ˜•ํƒœ๋กœ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ( -g ์˜ต์…˜์ด ์—†์œผ๋ฉด ํ˜„์žฌ ํด๋”์— ์„ค์น˜๋œ ํŒจํ‚ค์ง€๋งŒ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.) depth 0 / — depth=0: ํŒจํ‚ค์ง€์— ์˜์กด์„ฑ์ด ๊ฑธ๋ฆฐ ๋ชจ๋“  ํŒจํ‚ค์ง€๋ฅผ ๋ณด์—ฌ์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ณ ๋กœ ์ตœ์ƒ๋‹จ ํŠธ๋ฆฌ์˜ ํŒจํ‚ค์ง€๋งŒ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.
[Webpack] ๊ธฐ๋ณธ ๊ตฌ์„ฑ ๋ฐฉ๋ฒ•(๋ฒˆ๋“ค๋ง ํŠœํ† ๋ฆฌ์–ผ)
ยท
Languages/JavaScript
์›นํŒฉ์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. 2020/06/30 - [์–ธ์–ด/JavaScript] - webpack ์ด๋ž€ webpack ์ด๋ž€ webpack์ด๋ž€, ๋ชจ๋“ˆํ™”ํ•œ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํŒŒ์ผ์„ ๋ชจ์•„ ์ฃผ๋Š” ๋ฒˆ๋“ค๋Ÿฌ์ž…๋‹ˆ๋‹ค. ๋ฒˆ๋“ค๋Ÿฌ๋Š” ์ด ์™ธ์—๋„ 'Rollup'๊ณผ 'Parcel'์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“ˆํ™”ํ•œ ํŒŒ์ผ ๊ฒฐํ•ฉ์€ ๋‹จ์ˆœํ•˜๊ฒŒ ํŒŒ์ผ์„ ๊ฒฐํ•ฉํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ฉฐ, ๋ชจ๋“ˆ์˜ ์˜์กด ์ƒ๏ฟฝ codeparadise.tistory.com ๊ฐœ๋ฐœ์— ์‚ฌ์šฉ๋œ ๊ฐœ๋ฐœ ๋„๊ตฌ๋Š” vsCode์ž…๋‹ˆ๋‹ค. vsCode์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. 2020/06/21 - [Tool/vsCode] - [vsCode] vsCode๋ž€? [vsCode] vsCode๋ž€? Visual Studio Code๋Š” ๊ฐ€๋ณ๊ณ  ๊ฐ•๋ ฅํ•œ ์†Œ์Šค ์ฝ”๋“œ ํŽธ์ง‘๊ธฐ๋กœ ๋ฐ์Šคํฌํ†ฑ์—์„œ ์‹คํ–‰๋˜๋ฉฐ W..
[vue.js] v-if์™€ v-show์˜ ์ฐจ์ด์™€ ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ๊ตฌ๋ถ„
ยท
Languages/JavaScript
v-if ์กฐ๊ฑด์œผ๋กœ ๋ Œ๋”๋งํ•˜๊ธฐ ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜์ง€ ๋ชปํ•œ ๊ฒฝ์šฐ์— ์š”์†Œ๋Š” DOM ๋ ˆ๋ฒจ์—์„œ ์ œ๊ฑฐ๋˜๋ฉฐ, ๋ชจ๋“  ๊ฐ์‹œ๋„ ์ œ๊ฑฐ ๋ฉ๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋ผ๋ฉด ์ธ์Šคํ„ด์Šค๊ฐ€ ์ œ๊ฑฐ๋˜๋ฉฐ, ์ดํ›„์— ๋ Œ๋”๋ง ๋  ๋•Œ ๋ชจ๋“  ์ƒํƒœ๊ฐ€ ์ดˆ๊ธฐํ™” ๋˜์–ด๋ฒ„๋ฆฝ๋‹ˆ๋‹ค. ๋‚ด๋ถ€์—์„œ ๋””๋ ‰ํ‹ฐ๋ธŒ ๋˜๋Š” ์ปดํฌ๋„ˆ๋Š”๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, ํŠน์ •ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋”ฐ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š๋‹ค๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ v-if๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. v-show ์กฐ๊ฑด์œผ๋กœ ์ถœ๋ ฅํ•˜๊ธฐ ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ, ๋‹จ์ˆœํ•˜๊ฒŒ display:none; ์Šคํƒ€์ผ์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ˆˆ์— ๋ณด์ด์ง€ ์•Š๋”๋ผ๋„ ๋ชจ๋“  ๋ฆฌ์•กํ‹ฐ๋ธŒ ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ๋‚ด๋ถ€์ ์ธ ๊ฐ์‹œ๊ฐ€ ์ผ์–ด๋‚˜๋ฏ€๋กœ ์ฃผ์˜ํ•ด ์ฃผ์„ธ์š”. ๋‚ด๋ถ€์— ๋””๋ ‰ํ‹ฐ๋ธŒ ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—†๊ณ , ๋ณ€๊ฒฝ ๋นˆ๋„๊ฐ€ ๋†’์€ ๊ฒฝ์šฐ์—๋Š” v-show๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์„ฑ๋Šฅ ๋ฉด์—์„œ ์ข‹์Šต๋‹ˆ๋‹ค.
ECMAScript/ES ์ด๋ž€?
ยท
Languages/JavaScript
๊ตญ์ œ ํ‘œ์ค€ํ™” ๋‹จ์ฒด์ธ Ecma International์—์„œ ์ฑ…์ •ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ‘œ์ค€ ์‚ฌ์–‘์ž…๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ํ™˜๊ฒฝ์€ ์ด๋Ÿฌํ•œ ์‚ฌ์–‘์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌํ˜„๋œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ˜„์žฌ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €๋Š” 'ES5'๋ฅผ ์ง€์›ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ๋ธŒ๋ผ์šฐ์ €์— ๋”ฐ๋ผ์„œ๋Š” 'ES2015(ES6)' ์ดํ›„์˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด์„œ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š” ๊ฒฝ์šฐ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ES2015๋ถ€ํ„ฐ๋Š” ์‚ฌ์–‘์„ ๋งค๋…„ ๊ฐœ์ •ํ•˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์›๋ž˜ ECMAScript4, ECMAScript5, ECMAScript6์ฒ˜๋Ÿผ ์ˆซ์ž๋ฅผ๋ถ™์ด์ง€ ์•Š๊ณ , ECMAScript2015, ECMAScript2017 ์ฒ˜๋Ÿผ ์—ฐ๋„๋ฅผ ๋ถ™์—ฌ์„œ ๋ถ€๋ฅด๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
webpack ์ด๋ž€
ยท
Languages/JavaScript
webpack์ด๋ž€, ๋ชจ๋“ˆํ™”ํ•œ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํŒŒ์ผ์„ ๋ชจ์•„ ์ฃผ๋Š” ๋ฒˆ๋“ค๋Ÿฌ์ž…๋‹ˆ๋‹ค. ๋ฒˆ๋“ค๋Ÿฌ๋Š” ์ด ์™ธ์—๋„ 'Rollup'๊ณผ 'Parcel'์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“ˆํ™”ํ•œ ํŒŒ์ผ ๊ฒฐํ•ฉ์€ ๋‹จ์ˆœํ•˜๊ฒŒ ํŒŒ์ผ์„ ๊ฒฐํ•ฉํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ฉฐ, ๋ชจ๋“ˆ์˜ ์˜์กด ์ƒํƒœ๋ฅผ ํ•ด๊ฒฐํ•˜๋ฉด์„œ ๋ฒˆ๋“คํ•ฉ๋‹ˆ๋‹ค. webpack์€ '.js' ํŒŒ์ผ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ. css์™€ ์ด๋ฏธ์ง€ ๊ฐ™์€ ๋ฆฌ์†Œ์Šค๋ฅผ ๋ฒˆ๋“คํ•ด ์ฃผ๋Š” ๊ธฐ๋Šฅ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ Loader๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ๋‹จ์ผ ํŒŒ์ผ ์ปดํฌ๋„ŒํŠธ vue, Pug์™€ Sass ๊ฐ™์€ ๋‹ค์–‘ํ•œ ํ˜•์‹์˜ ํŒŒ์ผ๋„ ์ฝ์–ด ๋“ค์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฒ˜์Œ ์ฝ์–ด ๋“ค์ด๋Š” ํŒŒ์ผ(์—”ํŠธ๋ฆฌ ํฌ์ธํŠธ)์„ ์‹œ์ž‘์œผ๋กœ ์—ฐ๊ฒฐ๋œ ๋ฆฌ์†Œ์Šค๋ฅผ ๋ชจ๋‘ ๋ฒˆ๋“คํ•˜๋ฏ€๋กœ, ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋ถˆํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋Š” ์•Œ์•„์„œ ์ œ์™ธ๋œ๋‹ค๋Š” ์žฅ์ ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฝ”์–ด ์ปจ์…‰์œผ๋กœ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. Entry Output Loaders Plugi..
javascript XMLHttpRequest Object ์˜ˆ์ œ
ยท
Languages/JavaScript
XMLHttpRequest ๊ฐ์ฒด๋Š” IE6, IE5์—์„œ๋งŒ ๋‹ค๋ฅด๊ฒŒ ์„ ์–ธํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ƒํƒœ์ฝ”๋“œ๋กœ ์„ฑ๊ณต ์œ ๋ฌด๋ฅผ ํ™•์ธ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. form ํƒœ๊ทธ์—์„œ enctype application/json ๋ฐฉ์‹์„ ์ง€์›ํ•ด์ฃผ์ง€ ์•Š์„๋•Œ ์•„๋ž˜์™€๊ฐ™์ด XMLHttpRequest๋ฅผ ์ด์šฉํ•ด์ฃผ์‹œ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค. var parameterVal = '{"id":"'+id+'","passwd":"'+passwd+'"}'; var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Micros..
[javascript] select box ๋…„์›”์ผ selected
ยท
Languages/JavaScript
var d = new Date(); window.onload = function(){ selectedDateOpt(document.getElementsByName("_year"), d.getFullYear()); selectedDateOpt(document.getElementsByName("_month"),(d.getMonth() + 1)); selectedDateOpt(document.getElementsByName("_date"), d.getDate()); selectedDateOpt(document.getElementsByName("_day"), d.getDay()); }; function selectedDateOpt(seleObj, date){ for(var i=0;i
[jquery] ๋””๋ฐ”์ด์Šค ์ •๋ณด๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•œ swipe
ยท
Languages/JavaScript
[javascript] select box์˜ value selected
ยท
Languages/JavaScript
var RowSel = document.docForm.year.options.length; for(var i=1; i