728x90
๋ฐ˜์‘ํ˜•
 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ HTML5 ์บ”๋ฒ„์Šค(Canvas)์— ๋ฐฑ๊ทธ๋ผ์šด๋“œ ๋ฐฐ๊ฒฝ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์บ”๋ฒ„์Šค์— ๋ฐฑ๊ทธ๋ผ์šด๋“œ ์ƒ‰์ƒ์„ ์ ์šฉํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ• ๊นŒ์š”? ๊ตฌํ˜„ํ•˜๋Š” ๊ณผ์ •์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์บ”๋ฒ„์Šค ํƒœ๊ทธ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ์บ”๋ฒ„์Šค ์ปจํ…์ŠคํŠธ(ctx) ๊ฐ์ฒด๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์บ”๋ฒ„์Šค ์ปจํ…์ŠคํŠธ์— ์ƒ‰์ƒ๊ณผ ์ƒ‰์ƒ์„ ์ฑ„์šธ ๋„ํ˜•์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ์˜ˆ์‹œ ์•„๋ž˜ ์˜ˆ์‹œ๋Š” ์บ”๋ฒ„์Šค๋ฅผ ์ƒ์„ฑํ•œ ํ›„ ์›ํ•˜๋Š” ๋ฐฑ๊ทธ๋ผ์šด๋“œ ์ƒ‰์ƒ์œผ๋กœ ์บ”๋ฒ„์Šค์— ์ ์šฉํ•˜๋Š” ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. // html ์—ฌ๊ธฐ์„œ ๋งŒ๋“ค ๋„ํ˜•์€ ์บ”๋ฒ„์Šค์— ๊ฝ‰์ฐฌ ์ •์‚ฌ๊ฐํ˜•์œผ๋กœ fillRect์˜ ๊ฐ€๋กœ, ์„ธ๋กœ ๊ฐ’์„ ์บ”๋ฒ„์Šค์˜ ๋„“์ด์™€ ๋†’์ด๋กœ ์„ค์ •ํ•œ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. // javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#009ac8'; ctx.f..

2021.01.06 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๋ธ”๋กœ๊ทธ/ํ‹ฐ์Šคํ† ๋ฆฌ ํŒ

Node.js ํ‹ฐ์Šคํ† ๋ฆฌ ํŒŒ์ผ ์—…๋กœ๋“œ API ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•(multipart/form-data ์ด๋†ˆ..)

Node.js๋ฅผ ํ™œ์šฉํ•ด์„œ ํ‹ฐ์Šคํ† ๋ฆฌ ํŒŒ์ผ ์ฒจ๋ถ€ API๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒฝํ—˜์— ๋Œ€ํ•ด์„œ ๊ณต์œ ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ํ•„์ž๋Š” Node.js + Puppeteer๋ฅผ ํ™œ์šฉํ•ด์„œ ํ‹ฐ์Šคํ† ๋ฆฌ ํŒŒ์ผ ์ฒจ๋ถ€ API๋ฅผ ๊ตฌํ˜„ํ•˜๋ ค๊ณ  ํ–ˆ์œผ๋‚˜ ๋ช‡ ๊ฐ€์ง€ ์‹œํ–‰์ฐฉ์˜ค๊ฐ€ ๋ฐœ์ƒํ–ˆ๊ณ , ๋งŽ์€ ์‚ฝ์งˆ์„ ํ†ตํ•ด ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์—ฌ ๊ธ€๋กœ ๋‚จ๊ฒจ๋‘ก๋‹ˆ๋‹ค. Node.js๋กœ ํ‹ฐ์Šคํ† ๋ฆฌ ํŒŒ์ผ ์ฒจ๋ถ€ API๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ ์šฐ์„  ํ•„์ž์˜ ๊ฒฝ์šฐ๋Š” ๋™์ ์œผ๋กœ ์ด๋ฏธ์ง€๋ฅผ ๋งŒ๋“ค๊ณ , ๋™์ ์œผ๋กœ ๋งŒ๋“  ์ด๋ฏธ์ง€๋ฅผ ์ž„์‹œ ํŒŒ์ผ ์ €์žฅ์†Œ์— ์ž„์˜์˜ ํŒŒ์ผ ์ด๋ฆ„์œผ๋กœ ๊ฒฝ๋กœ๋ฅผ ์ง€์ •ํ•˜๊ณ  ์ƒ์„ฑํ•œ ํ›„, ํ•ด๋‹น ํŒŒ์ผ์„ ํ‹ฐ์Šคํ† ๋ฆฌ ํŒŒ์ผ ์ฒจ๋ถ€ API๋ฅผ ํ™œ์šฉํ•ด ์—…๋กœ๋“œ๋ฅผ ํ•ฉ๋‹ˆ๋‹ค. ๋™์  ํŒŒ์ผ ์ƒ์„ฑ Node.js fs createWriteStream ๋ฉ”์„œ๋“œ๋ฅผ ํ™œ์šฉํ•ด์„œ ํ•„์ž๋Š” ์—…๋กœ๋“œ ํ•˜๊ณ ์žํ•˜๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋งŒ๋“  ํ›„ ์ž„์‹œ ํŒŒ์ผ ์ €์žฅ์†Œ์— ํŒŒ์ผ์„ ์ €์žฅํ•ฉ๋‹ˆ๋‹ค..

2021.01.05 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

[Javascript] for, while ๋ฐ˜๋ณต๋ฌธ์— async await๋ฅผ ํ™œ์šฉํ•ด delay ๊ฑฐ๋Š” ๋ฐฉ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ˜๋ณต๋ฌธ์— ๋”œ๋ ˆ์ด ๊ฑฐ๋Š” ๋ฐฉ๋ฒ•์—๋Š” ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•์ด ์กด์žฌํ•˜๊ฒ ์ง€๋งŒ, ES7 async/await ๊ตฌ๋ฌธ์„ ํ™œ์šฉํ•˜๋ฉด ๊ต‰์žฅํžˆ ๊น”๋”ํ•˜๊ฒŒ ์ด ๋ถ€๋ถ„์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” async/await์„ ํ™œ์šฉํ•ด์„œ for ๋ฐ˜๋ณต๋ฌธ, while ๋ฐ˜๋ณต๋ฌธ์—์„œ ๋”œ๋ ˆ์ด ๊ฑฐ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์†Œ๊ฐœํ•ด๋“œ๋ฆฌ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์‚ฌ์‹ค for๋ฌธ์—์„œ๋‚˜ while๋ฌธ์—์„œ๋‚˜ ๋”œ๋ ˆ์ด ๊ฑฐ๋Š” ๋ฐฉ๋ฒ•์€ ๋™์ผํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ณต๋ฌธ์— ๋”œ๋ ˆ์ด๋ฅผ ๊ฑธ๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋น„๋™๊ธฐ ํ•จ์ˆ˜๋กœ ๋ฐ˜๋ณต๋ฌธ์„ ๊ฐ์‹ผ ํ›„ ๋ฐ˜๋ณต๋ฌธ ๋‚ด๋ถ€์—์„œ ์ˆœํšŒ๋ฅผ ํ•  ๋•Œ๋งˆ๋‹ค await์„ ํ†ตํ•ด ๋”œ๋ ˆ์ด๋ฅผ ๊ฑธ์–ด์ฃผ๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. for๋ฌธ์—์„œ delay ๊ฑฐ๋Š” ๋ฐฉ๋ฒ• const timer = ms => new Promise(res => setTimeout(res, ms)) async function load () { for..

2020.11.29 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

GA clientId ๊น”๋”ํ•˜๊ฒŒ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ• (how to get the GA clientId)

์ด๋ฒˆ ํฌ์ŠคํŒ…์€ ์›น ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript) ํ™˜๊ฒฝ์—์„œ GA(Google Analytics) clientId๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์†Œ๊ฐœํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ์ € ๋˜ํ•œ Nuxt.js(Vue)์—์„œ GA ๊ด€๋ จ ๋กœ์ง์„ ์ž‘์„ฑํ•˜๋Š” ์ค‘์— ์ƒˆ๋กœ์šด ๋ฐฉ๋ฒ•์„ ์•Œ๊ฒŒ ๋˜์–ด ๊ณต์œ ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ์กด๋ฐฉ์‹ ๊ธฐ์กด์— GA clientId๋ฅผ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ–ˆ๋˜ ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ga ๊ฐ์ฒด์˜ getAll ๋ฉ”์„œ๋“œ๋ฅผ ํ™œ์šฉํ•ด์„œ ๋ชจ๋“  trackers๋ฅผ ๊ฐ€์ ธ์˜จ ํ›„ 0๋ฒˆ์งธ ์ธ๋ฑ์Šค์˜ tracker๋ฅผ ๊ฐ€์ ธ์˜จ ํ›„ clientId๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. ga.getAll()[0].get('clientId'); ๋ณ€๊ฒฝ ๊ฐœ์„ ๋œ ๋ฐฉ์‹์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. window.ga๊ฐ์ฒด๊ฐ€ loaded๋˜๋ฉด ์ฝœ๋ฐฑํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๊ณ , ์ฝœ๋ฐฑํ•จ์ˆ˜์˜ ์ธ์ž๊ฐ’์ด ๋ฐ”๋กœ t..

2020.11.21 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

์•Œ๊ณ ๋ฆฌ์ฆ˜/์ •๋ ฌ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„ํ•œ ์„ ํƒ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜ (Selection sort in Javascript)

์„ ํƒ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜์€ ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ๊ณต๋ถ€ํ•˜๋‹ค๋ณด๋ฉด ๋ฒ„๋ธ”์ •๋ ฌ๋งŒํผ ์ต์ˆ™ํ•˜๊ฒŒ ๋“ค์–ด๋ณธ ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์ค‘ ํ•˜๋‚˜์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฒ„๋ธ”์ •๋ ฌ ๋งŒํผ ๊ตฌํ˜„ํ•˜๊ธฐ ์‰ฝ๊ณ , ๊ธฐ์—… ์ฝ”๋”ฉํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๋‹ค๋ณด๋ฉด ํ•œ๋ฒˆ์”ฉ ๋ฌธ์ œ๋กœ ๋‚˜์˜ค๊ณค ํ•˜๋Š” ์„ ํƒ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜! ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์„ ํƒ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜์˜ ํŠน์ง•๊ณผ ๊ตฌํ˜„ ์˜ˆ์‹œ์— ๋Œ€ํ•ด์„œ ์†Œ๊ฐœํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์„ ํƒ ์ •๋ ฌ์ด๋ž€? ์„ ํƒ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜์˜ ์ปจ์…‰์€ ์š”์†Œ๋“ค์ด ๋“ค์–ด๊ฐˆ ์œ„์น˜๋Š” ์ด๋ฏธ ์ •ํ•ด์ ธ์žˆ๋‹ค๋Š” ๊ฒƒ์— ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฐฐ์—ด์˜ ์ฒซ ๋ฒˆ์งธ ์ž๋ฆฌ์—๋Š” ๋ฐฐ์—ด ์š”์†Œ๋“ค ์ค‘ ๊ฐ€์žฅ ์ž‘์€ ์š”์†Œ๊ฐ€ ๋“ค์–ด๊ฐ€๋ฉด ๋˜๊ฒ ์ฃ ? ๊ทธ๋ฆฌ๊ณ  ๋‘ ๋ฒˆ์งธ ์ž๋ฆฌ์—๋Š” ๊ทธ ๋‹ค์Œ ๊ฐ€์žฅ ์ž‘์€ ์š”์†Œ๋ฅผ ์„ ํƒํ•ด์„œ ๊ทธ ์ž๋ฆฌ์— ๋„ฃ์œผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋ฐฐ์—ด์ด ๋๋‚  ๋•Œ๊นŒ์ง€ ์ด ๋‹จ๊ณ„๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์„ ํƒ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์˜ˆ์‹œ ์„ ํƒ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์ข€ ๋” ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด ์ฝ”๋“œ๋ฅผ..

2020.11.19 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ replaceAll ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

์˜ˆ์ „์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript)์—์„œ ํŠน์ • ๋ฌธ์ž๋ฅผ ๋ชจ๋‘ ๋ฐ”๊พธ๊ธฐ(์น˜ํ™˜) ์œ„ํ•ด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ์ž์—ด ๊ฐ์ฒด์˜ replace ๋ฉ”์„œ๋“œ์™€ ์ •๊ทœํ‘œํ˜„์‹ ์กฐํ•ฉ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณค ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ตฌํ˜„ ์˜ˆ์‹œ replace + ์ •๊ทœํ‘œํ˜„์‹ replace + ์ •๊ทœํ‘œํ˜„์‹ ์กฐํ•ฉ์œผ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ์˜ˆ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ •๊ทœํ‘œํ˜„์‹์—์„œ gi๋Š” g(๋ชจ๋“  ๊ฐ’์— ๋Œ€ํ•œ ๊ฒ€์‚ฌ), i(๋Œ€/์†Œ๋ฌธ์ž ๊ตฌ๋ถ„ ์•ˆํ•จ)์„ ๋œปํ•ฉ๋‹ˆ๋‹ค. const str = 'dog dog test dog hello hi'; str.replace(/dog/gi, 'monkey'); // "monkey monkey test monkey hello hi" ํ•˜์ง€๋งŒ ์ตœ๊ทผ์— ecma262 ๊ณต์‹๋ฌธ์„œ๋ฅผ ๋ณด๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript)์—์„œ ๊ณต์‹์ ์œผ๋กœ replaceAll ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ณตํ•ด์ฃผ๋Š” ๊ฒƒ์„..

2020.11.05 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

๋™์ ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ถ”๊ฐ€ํ•œ ํ›„ ์ฝœ๋ฐฑ๋ฐ›๋Š” ๋ฐฉ๋ฒ• (How to import the external JS with callback function)

์™ธ๋ถ€์—์„œ ๊ฐ€์ ธ์˜จ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript)๋ฅผ ๋ชจ๋‘ ๋ฐ›์•„์˜จ ํ›„ ์ฝœ๋ฐฑ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•œ ์˜ˆ๋กœ ๋น„๋™๊ธฐ๋กœ ์›น ํŽ˜์ด์ง€์— ์นด์นด์˜ค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript) SDK๋ฅผ ์ถ”๊ฐ€ํ•œ ํ›„, ํŠน์ • ๋™์ž‘์„ ์‹คํ–‰ํ•˜๋Š” ๊ฒฝ์šฐ์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ๋ฐฉ๋ฒ• // ๋™์ ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฝ์ž…ํ•˜๋Š” ํ•จ์ˆ˜ // ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋ชจ๋‘ ๋กœ๋“œ(load)๋˜์—ˆ์„ ๋•Œ, // callback ํ•จ์ˆ˜ ์‹คํ–‰ const injectScript = (url, callback) => { const s = document.createElement('script') s.src = url; s.type = 'text/javascript' s.addEventListener('load', callback) document.head.appendChild(s) ..

2020.10.31 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ…์ŠคํŠธ ์•”ํ˜ธํ™” ๋ณตํ˜ธํ™” ํ•˜๋Š” ๋ฐฉ๋ฒ• (JavaScript string encryption and decryption)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ฐœ๋ฐœ์„ ํ•˜๋‹ค๋ณด๋ฉด ํ…์ŠคํŠธ๋ฅผ ์•”ํ˜ธํ™”ํ•ด์•ผ๋˜๋Š” ์ˆœ๊ฐ„์ด ์ฐพ์•„์˜ฌ ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊น๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ…์ŠคํŠธ๋ฅผ ์•”ํ˜ธํ™”, ๋ณตํ˜ธํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์†Œ๊ฐœํ•ด๋“œ๋ฆฌ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜ ์•”ํ˜ธํ™”, ๋ณตํ˜ธํ™” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ crypto-js๋ฅผ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค. ์ œ๊ฐ€ ๊ฐœ์ธ์ ์œผ๋กœ ํ…์ŠคํŠธ๋ฅผ ์•”ํ˜ธํ™”ํ•  ๋•Œ ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•œ ๊ฒฝํ—˜์ด ์žˆ์–ด์„œ ์ €๋Š” crypto-js๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. npm install crypto-js // or yarn add crypto-js ์•”ํ˜ธํ™” ๋ณตํ˜ธํ™” ํ—ฌํผํ•จ์ˆ˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. encrypt, decrypt ํ—ฌํผํ•จ์ˆ˜์˜ key๋Š” process.env.PRIVATE_KEY์ฒ˜๋Ÿผ ํ™˜๊ฒฝ๋ณ€์ˆ˜๋กœ ์ฒ˜๋ฆฌํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. import CryptoJS from "crypto-js"; export const encry..

2020.09.14 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ SCSS ๋ณ€์ˆ˜ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•(Share SCSS Variables with Javascript)

์‚ฌ์ „ ์š”๊ตฌ ์‚ฌํ•ญ ํ”„๋กœ์ ํŠธ์— ๊ตฌ์„ฑ๋˜์–ด์žˆ๋Š” webpack์—์„œ sass๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๊ตฌ์„ฑํ•ด์•ผ ๋ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ๋ฐฉ๋ฒ• ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ SASS(SCSS) ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ SCSS์˜ export๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. SCSS์˜ ๋ณ€์ˆ˜๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” variables.scss์— ํ•˜๋‹จ์— export ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” SCSS ๋ณ€์ˆ˜๋“ค์„ ๊ทธ ๋‚ด๋ถ€์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. // variables.scss $white-color: #fcf5ed; $dark-color: #402f2b; $light-color: #e6d5c3; $medium-color: #977978; $alert-color: #cb492a; $light-black-color: #706e72; $black-color: #414042; :export { ..

2020.08.30 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ CSS ๋ฏธ๋””์–ด์ฟผ๋ฆฌ(Media Queries)๋ฅผ ํ™œ์šฉํ•ด๋ณด์ž (How To Use Media Queries in JavaScript) - matchMedia

๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ฐœ๋ฐœํ•  ๋•Œ CSS ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋ฅผ ํ™œ์šฉํ•ด์„œ ์‚ฌ์šฉ์ž์˜ ํ™”๋ฉด ํฌ๊ธฐ์— ๋”ฐ๋ผ์„œ ์Šคํƒ€์ผ์„ ์ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ข…์ข… ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋„ ์ด๋Ÿฌํ•œ ๋ฐ˜์‘ํ˜•์— ๋”ฐ๋ฅธ ๋ถ„๊ธฐ์ฒ˜๋ฆฌ๋  ๋กœ์ง์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ๊ทธ์— ๋”ฐ๋ผ์„œ ๋งค๋ฒˆ ์Šคํƒ€์ผ ๋”ฐ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋กœ์ง ๋”ฐ๋กœ ๋ถ„๊ธฐ์ฒ˜๋ฆฌ๋ฅผ ํ•ด๊ฐ€๋ฉด์„œ ์ž‘์—…์„ ํ•˜๊ธฐ์—๋Š” ๊ต‰์žฅํžˆ ๋ฒˆ๊ฑฐ๋กญ๊ณ  ๊นŒ๋‹ค๋กญ์Šต๋‹ˆ๋‹ค. CSS์—์„œ ๋ฐ˜์‘ํ˜• ์›น์„ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•ด ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์ธ ๋ฏธ๋””์–ด์ฟผ๋ฆฌ(Media Queries)! ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ ์•Œ๊ณ  ๊ณ„์…จ๋‚˜์š”? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(JavaScript)์—๋„ CSS์˜ ๋ฏธ๋””์–ด์ฟผ๋ฆฌ(Media Queries)์™€ ๊ฐ™์€ matchMedia ๋ฉ”์„œ๋“œ๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ CSS ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋ฅผ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ตฌ๋ฌธ mqList = win..

2020.08.13 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript)๋กœ ์ •๋ง ์‰ฝ๊ฒŒ ํด๋ฆฝ๋ณด๋“œ ๋ณต์‚ฌํ•˜๊ธฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•

๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ์ดํŠธ์—์„œ URL์„ ๊ณต์œ ํ•˜๊ธฐ ์œ„ํ•ด ํ…์ŠคํŠธ ํด๋ฆฝ๋ณด๋“œ ์นดํ”ผ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์˜ˆ์‹œ๋กœ ๋“  Ant Design ๋ง๊ณ ๋„ ์ •๋ง ๋งŽ์€ ์„œ๋น„์Šค์—์„œ ์ด๋ ‡๊ฒŒ ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ํŽธ๋ฆฌํ•จ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ํด๋ฆฝ๋ณด๋“œ ๋ณต์‚ฌ๋ฅผ ์• ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๊ฐ„ํŽธํ•œ ํด๋ฆฝ๋ณด๋“œ ๊ธฐ๋Šฅ์€ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๊ณ  clipboard.js๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•ด์„œ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ๊ต‰์žฅํžˆ ๊ฐ„๋‹จํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ตณ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•˜์ง€ ์•Š๊ณ  ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ค‘์š”ํ•œ ์ ์€ ClipboardAPI๋Š” WEB API ์ตœ์‹  ์ŠคํŽ™์„ ๊ธฐ์ค€์œผ๋กœ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์œผ๋ฏ€๋กœ, ์•„์ง ์ง€์›๋˜์ง€ ์•Š๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋งŽ์€ ์ ์€ ์œ ์˜ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ WEB API ์ตœ์‹  ์ŠคํŽ™์„ ๊ธฐ์ค€์œผ๋กœ ์‚ฌ์šฉ๋˜..

2020.08.08 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript, Node.js)์—์„œ ๋žœ๋ค ๋ฌธ์ž์—ด ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•(Generate random string/characters in JavaScript)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript, Node)์—์„œ ๋žœ๋ค ๋ฌธ์ž์—ด์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์€ uuid ๋ชจ๋“ˆ์„ ํ™œ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. uuid ๋ชจ๋“ˆ์˜ v4ํ™œ์šฉํ•˜๋ฉด ๊ฐ„๋‹จํ•˜๊ฒŒ ๋žœ๋ค ๋ฌธ์ž์—ด์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์—ฌ๊ธฐ์—์„œ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”. // ES6 module syntax import { v4 as uuidv4 } from 'uuid'; var id = uuidv4(); // "110ec58a-a0f2-4ac4-8393-c866d813b8d1" // CommonJS syntax const { v4: uuidv4 } = require('uuid'); uuidv4(); // โ‡จ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed' ๋งŒ์•ฝ ์˜์กด์„ฑ์—†์ด ์ฝ”๋“œ๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์œผ์‹œ๋‹ค๋ฉด, ์•„๋ž˜์™€ ๊ฐ™์ด ์ง..

2020.08.04 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Vue

[Vue] vue.js Mixin์„ ํ™œ์šฉํ•ด์„œ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋Š˜๋ฆฌ์ž! (Understanding Mixins in Vue JS)

์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ ์›์น™์—๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์žˆ๋Š”๋ฐ ๊ทธ์ค‘ ํ•˜๋‚˜ DRY(Do not Repeat Yourself) ์›์น™์ด ์žˆ์Šต๋‹ˆ๋‹ค. "๊ฐ™์€ ๋™์ž‘์„ ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๋ฐ˜๋ณต์ ์œผ๋กœ ์ž‘์„ฑํ•˜์ง€ ๋งˆ๋ผ" ๋ผ๋Š” ๋œป์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ Vue์—์„œ๋Š” ์ค‘๋ณต ์ฝ”๋“œ๋ฅผ ์ œ๊ฑฐํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ ์žฌ์‚ฌ์šฉ ํ…Œํฌ๋‹‰์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ๋ฏน์Šค์ธ, ์‚ฌ์šฉ์ž ์ง€์ • ๋””๋ ‰ํ‹ฐ๋ธŒ, ํ”Œ๋Ÿฌ๊ทธ์ธ, ํ•„ํ„ฐ๊ฐ€ ๊ทธ ๊ธฐ์ˆ ์— ์†ํ•ด์žˆ์ฃ . ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ฏน์Šค์ธ์„ ํ™œ์šฉํ•ด์„œ ๊ธฐ๋Šฅ์„ ์žฌ์‚ฌ์šฉํ•˜์—ฌ ์ค‘๋ณต ์ฝ”๋“œ๋ฅผ ์ œ๊ฑฐํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. โœ๏ธ Mixin(๋ฏน์Šค์ธ) ์ด๋ž€? Mixin์€ ๊ธฐ๋Šฅ์„ ๋”ฐ๋กœ ์ •์˜ํ•ด๋‘๊ณ  ํ•„์š”ํ•  ๋•Œ ๋งˆ๋‹ค ํ•ด๋‹น ๋ฏน์Šค์ธ ํŒŒ์ผ์„ Vue ์ปดํฌ๋„ŒํŠธ์— ๊ฒฐํ•ฉํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ Vue ์ปดํฌ๋„ŒํŠธ์— ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. SASS๋ผ๋Š” CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ..

2020.07.10 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

Computer science/์•Œ๊ณ ๋ฆฌ์ฆ˜

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ”ผ๋ณด๋‚˜์น˜ ์ˆ˜์—ด ๊ตฌํ˜„ (fibonacci in javascript)

ํ”ผ๋ณด๋‚˜์น˜ ์ˆ˜์—ด์ด๋ž€? 0ํ•ญ์„ 0, 1ํ•ญ์„ 1๋กœ ๋‘๊ณ , ๋‘๋ฒˆ ์งธ ํ•ญ๋ถ€ํ„ฐ๋Š” ๋ฐ”๋กœ ์•ž์˜ ๋‘ ์ˆ˜๋ฅผ ๋”ํ•œ ์ˆ˜๋กœ ๋†“๋Š” ๊ฒƒ์ด ํ”ผ๋ณด๋‚˜์น˜ ์ˆ˜์—ด์ด๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์€ ์ ํ™”์‹์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. F0 = 0; F1 = 1; Fn+2 = Fn+1 + Fn;์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„ ์ž„์˜์˜ ์ˆซ์ž๋ฅผ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋ฐ›์•„์„œ ๊ทธ ์ˆซ์ž๋งŒํผ ํ”ผ๋ณด๋‚˜์น˜ ์ˆ˜์—ด์˜ ๊ฐ’์„ ๋‚˜์—ดํ•˜๋Š” ๋กœ์ง์„ ๊ตฌํ˜„ํ•ด๋ณด์ž. // ํ”ผ๋ณด๋‚˜์น˜ ๊ตฌํ˜„ ํ•จ์ˆ˜ export function getFibonacci(num) { let i = 0; let value1 = 0; let value2 = 1; let result = []; while (i < num) { let newValue = value1 + value2; result.push(newValue); value1 = value2; value2 =..

2020.06.25 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

์ •๊ทœํ‘œํ˜„์‹์œผ๋กœ ๋ฌธ์ž์—ด ๋„์–ด์“ฐ๊ธฐ์™€ ๊ณต๋ฐฑ ๋ชจ๋‘ ์ œ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ• (replace all line breaks javascript)

์•„๋ž˜ ์ฝ”๋“œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ฌธ์ž์—ด ๋‚ด์— ์žˆ๋Š” ๋ชจ๋“  ๋„์–ด์“ฐ๊ธฐ์™€ ๊ณต๋ฐฑ์„ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. const str = ` hello hello2 hellb helloc `; const replacedStr = str.replace(/\r|\n/g, '');

2020.02.27 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋™๋“ฑ์—ฐ์‚ฐ์ž(==)์™€ ์ผ์น˜์—ฐ์‚ฐ์ž(===) ์ฐจ์ด

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—๋Š” ์ถ”์ƒ์  ๊ฐ™์Œ ๋น„๊ต(์ด์ค‘ ๋“ฑํ˜ธ, ๋™๋“ฑ ์—ฐ์‚ฐ์ž)์™€ ์—„๊ฒฉํ•œ ๊ฐ™์Œ ๋น„๊ต(์‚ผ์ค‘ ๋“ฑํ˜ธ, ์ผ์น˜ ์—ฐ์‚ฐ์ž)๊ฐ€ ์žˆ๋‹ค. ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ ์ด์ค‘ ๋“ฑํ˜ธ๋Š” ๋‘ ๊ฐ’์„ ๋น„๊ตํ•  ๋•Œ ์ž๋™์œผ๋กœ ํ˜•๋ณ€ํ™˜ํ•˜์—ฌ ๊ฐ™์Œ์„ ๋น„๊ตํ•˜์ง€๋งŒ, ์‚ผ์ค‘ ๋“ฑํ˜ธ๋Š” ํ˜•๋ณ€ํ™˜์„ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š๊ณ  ๋น„๊ตํ•œ๋‹ค. ์ด์ค‘ ๋“ฑํ˜ธ ์—ฐ์‚ฐ์ž์˜ ์˜ˆ์‹œ๋ฅผ ๋ณด์ž. 0 == false //true "" == false //true "" == 0 //true "0" == 0 //true [1,2] == "1,2" //true new String(&#39;hello&#39;) == &#39;hello&#39; //true null == undefined //true์ด์ค‘ ๋“ฑํ˜ธ ์—ฐ์‚ฐ์ž๋Š” ์ž๋™์œผ๋กœ ํ˜•๋ณ€ํ™˜์„ ํ•˜๊ณ  ๋น„๊ตํ•˜๋ฏ€๋กœ ์œ„ ์˜ˆ์‹œ๋Š” ๋ชจ๋‘ true๋ฅผ returnํ•œ๋‹ค. ํ•˜์ง€๋งŒ, ์‚ผ์ค‘ ๋“ฑํ˜ธ ์—ฐ์‚ฐ์ž์ผ..

2020.02.19 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

Web Storage API(localStorage, sessionStorage)๊ทธ๋ฆฌ๊ณ  Cookie

์›น ์Šคํ† ๋ฆฌ์ง€ API (Web Storage API) ์›น ์Šคํ† ๋ฆฌ์ง€ API(Web Storage API)๋Š” ์„œ๋ฒ„๊ฐ€ ์•„๋‹Œ, ํด๋ผ์ด์–ธํŠธ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•˜๋Š” HTML5์˜ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ์›น ์Šคํ† ๋ฆฌ์ง€ API์™€ ์ฟ ํ‚ค์˜ ๊ธฐ๋Šฅ ์ž์ฒด๋Š” ๊ฐ™์ง€๋งŒ(๋ฐ์ดํ„ฐ ์ €์žฅ), ์ฟ ํ‚ค๋Š” ์•ฝ 4KB(4096bytes)๊นŒ์ง€ ๋ฐ–์— ์ €์žฅ ๊ณต๊ฐ„์„ ์ด์šฉํ•˜์ง€ ๋ชปํ•˜๋Š” ๋ฐ˜๋ฉด์— ์›น ์Šคํ† ๋ฆฌ์ง€๋Š” ์•ฝ 5MB๊นŒ์ง€ ์ €์žฅ ๊ณต๊ฐ„์„ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์›น ์Šคํ† ๋ฆฌ์ง€ API ์ตœ์‹  ์ŠคํŽ™ ํ™•์ธ Web Storage (Second Edition) This specification defines an API for persistent data storage of key-value pair data in Web clients. This section describ..

2020.02.18 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ˜ธ์ด์ŠคํŒ… (Javascript hoisting)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์€ ํ˜ธ์ด์ŠคํŒ…์ด๋ผ๋Š” ์šฉ์–ด๋ฅผ ์ ‘ํ•ด๋ณธ ๊ฒฝํ—˜์ด ์žˆ์„ ๊ฒƒ์ด๋‹ค. ์ •์˜๋ฅผ ๋‚ด๋ ค๋ณด๊ธฐ ์ „์—, ์•„๋ž˜์˜ ์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ์‚ดํŽด๋ณด๋„๋ก ํ•˜์ž. function greeting() { console.log(&#39;hello&#39;); } greeting();greeting ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœ ํ•  ๋•Œ, ์˜ˆ์ƒ๋Œ€๋กœ hello ๋ฌธ์ž์—ด์ด console์— ๊ธฐ๋ก์ด ๋  ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ธฐ ์ „์— ์‹คํ–‰ํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ? greeting(); function greeting() { console.log(&#39;hello&#39;); }์œ„ ์˜ˆ์‹œ๋Š” ์‹ ๊ธฐํ•˜๊ฒŒ๋„ ์ฒ˜์Œ ์˜ˆ์‹œ์™€ ๋™์ผํ•˜๊ฒŒ hello ๋ฌธ์ž์—ด์„ ์ฝ˜์†”์ฐฝ์— ๊ธฐ๋กํ•œ๋‹ค. ์ด๊ฒƒ์ด ๋ฐ”๋กœ ํ˜ธ์ด์ŠคํŒ…์ด ๋™์ž‘ํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค. ๋Œ€๋ถ€๋ถ„ ์ด ํ˜ธ์ด์ŠคํŒ… ๋™์ž‘ ๋ฐฉ์‹์„ ์„ค๋ช…ํ•  ๋•Œ, ์„ ์–ธํ•œ ๋ณ€์ˆ˜์™€..

2020.02.17 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

Computer science/์•Œ๊ณ ๋ฆฌ์ฆ˜

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์†Œ์ˆ˜ ๊ตฌํ•˜๋Š” ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ตฌํ˜„(prime number in javascript)

์†Œ์ˆ˜๋ž€? 1๊ณผ ์ž์‹ ์„ ์ œ์™ธํ•œ ์–ด๋– ํ•œ ์ •์ˆ˜๋กœ๋„ ๋‚˜๋ˆ„์–ด์ง€์ง€ ์•Š๋Š” ์ˆ˜๊ฐ€ ์†Œ์ˆ˜์ด๋‹ค. 1 ~ 1000 ์‚ฌ์ด์˜ ์ˆซ์ž ์ค‘์— ์†Œ์ˆ˜๋งŒ์„ ๊ตฌํ•˜๋Š” ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ๊ตฌํ˜„ํ•ด๋ณด์ž. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„ function getPrimeNumber() { let results = []; // 1๊ณผ 1000์‚ฌ์ด์˜ ์ˆซ์ž ์ค‘์— ์†Œ์ˆ˜๋ฅผ ๊ตฌํ•˜๊ธฐ ์œ„ํ•œ ๋ฐ˜๋ณต๋ฌธ for (let i = 1; i

2020.02.11 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐœ๋ฐœ/Javascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ - ์ฝœ๋ฐฑํ•จ์ˆ˜(callback function)

์ฝœ๋ฐฑํ•จ์ˆ˜(Callback Function)? ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ •์˜ํ•˜๋ฉด ์–ด๋–ค ํŠน์ • ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰์„ ๋งˆ์นœ ํ›„์— ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์กฐ๊ธˆ ๋” ์„ธ๋ถ€์ ์œผ๋กœ ์„ค๋ช…๋“œ๋ฆฌ๋ฉด, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ•จ์ˆ˜๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํŠน์ง•๋•๋ถ„์— ํ•จ์ˆ˜๋Š” ์ธ์ž๋กœ์จ ํ•จ์ˆ˜๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ๊ณ , ๋‹ค๋ฅธ ํ•จ์ˆ˜๋ฅผ ๋ฆฌํ„ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํŠน์ง•์„ ๊ฐ€์ง€๋Š” ํ•จ์ˆ˜๋ฅผ ๊ณ ์ฐจํ•จ์ˆ˜(higher-order functions)๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค. ์ธ์ž๋กœ ์ „๋‹ฌ๋œ ํ•จ์ˆ˜๋ฅผ ์ฝœ๋ฐฑํ•จ์ˆ˜(callback function)์ด๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๊ฑฐ๊ตฌ์š”. ๊ณ ์ฐจํ•จ์ˆ˜(higher-order functions) ์กฐ๊ฑด ํ•จ์ˆ˜๋ฅผ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ „๋‹ฌ๋ฐ›๋Š” ํ•จ์ˆ˜ ํ•จ์ˆ˜๋ฅผ ๋ฆฌํ„ดํ•˜๋Š” ํ•จ์ˆ˜ ์ฝœ๋ฐฑํ•จ์ˆ˜๊ฐ€ ํ•„์š”ํ•œ ์ด์œ  ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ€์žฅ ํฐ ์ด์œ  ์ค‘ ํ•˜๋‚˜๋Š” ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ..

2020.02.11 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•