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

๊ฐœ๋ฐœ/Javascript

[Javascript] append vs appendChild ์ฐจ์ด์  (์ดˆ๊ฐ„๋‹จ)

append์™€ appendChild ๋ฉ”์„œ๋“œ๋Š” ๋ชจ๋‘ ๋ถ€๋ชจ ๋…ธ๋“œ์— ์ž์‹ ๋…ธ๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‘ ๋ฉ”์„œ๋“œ์—๋„ ๋ช‡ ๊ฐ€์ง€ ์ฐจ์ด์ ์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋‘ ๋ฉ”์„œ๋“œ์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด์„œ ์‰ฝ๊ณ  ๊ฐ„๋žตํ•˜๊ฒŒ ๋‹ค๋ค„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. append() ? append ๋ฉ”์„œ๋“œ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๋…ธ๋“œ ๊ฐ์ฒด(Node object)๋‚˜ DOMString(text)๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ํ•œ๋ฒˆ์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ž์‹ ์š”์†Œ๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Node object ์‚ฌ์šฉ ์˜ˆ์‹œ // Node object ์‚ฝ์ž… const parent = document.createElement('div'); const child = document.createElement('p'); parent.append(child); // ๊ฒฐ๊ณผ // ๋ฌธ์ž..

2021.01.19 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/Javascript

๋ถ€๋ชจ ๋…ธ๋“œ ๋งจ ์•ž์— ์š”์†Œ๋ฅผ ์‚ฝ์ž…ํ•˜๋Š” ๋ฐฉ๋ฒ• (appendChild ๋ง๊ณ ! prependChild Javascript)

appendChild? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋ฉด ํŠน์ • ๋…ธ๋“œ๋ฅผ ํŠน์ • ๋ถ€๋ชจ ๋…ธ๋“œ์˜ ์ž์‹ ๋…ธ๋“œ ๋ฆฌ์ŠคํŠธ ์ค‘ ๋งˆ์ง€๋ง‰ ์ž์‹์œผ๋กœ ๋ฐฐ์น˜ํ•˜๊ณ  ์‹ถ์„ ๋•Œ appendChild ๋ฉ”์„œ๋“œ๋ฅผ ๊ต‰์žฅํžˆ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š”๋ฐ์š”. ์•„๋ž˜ ์˜ˆ์‹œ์™€ ๊ฐ™์€ ๊ฒฝ์šฐ์— appendChild๋ฅผ ์‚ฌ์šฉํ•˜๊ณค ํ•œ๋‹ต๋‹ˆ๋‹ค. // html Javascript // javascript const el = document.createElement('li'); el.textContent = 'appendChild'; document.querySelector('.list').appendChild(el); // result Javascript appendChild prependChild? ํ•˜์ง€๋งŒ, ํŠน์ • ๋ถ€๋ชจ ๋…ธ๋“œ์˜ ์ž์‹ ๋…ธ๋“œ ๋ฆฌ์ŠคํŠธ ์ค‘ ์ฒซ๋ฒˆ ์งธ ์ž์‹์œผ๋กœ ๋ฐฐ์น˜ํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ๋„ ์ƒ..

2021.01.18 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/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 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/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 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/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

์ƒˆ์ฐฝ์œผ๋กœ form submitํ•˜๋Š” ๋ฐฉ๋ฒ• (How to open a new window on form submit)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript)์—์„œ ๋™์ ์œผ๋กœ html form ํƒœ๊ทธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ์ƒˆ์ฐฝ์œผ๋กœ submitํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. go ๋งŒ์•ฝ ํผ์œผ๋กœ ์ƒ์„ฑํ•œ ์ƒˆ์ฐฝ์˜ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด 3๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ƒˆ์ฐฝ์˜ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•˜๋Š” ์†์„ฑ๋“ค์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. // ์ƒˆ์ฐฝ์˜ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•˜๋Š” ๋ฐฉ๋ฒ• (window resize) window.open( 'about:blank', 'auth-form', 'width=' + parseInt(window.innerWidth) * 0.3 + ',height=' + parseInt(window.innerHeight) * 0.3 + ',toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=0,left=0,top=0' )

2020.10.24 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/HTML5

html img ํƒœ๊ทธ์— ๋””ํดํŠธ ์ด๋ฏธ์ง€ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• (show default image if image not found in HTML 5)

html img ํƒœ๊ทธ src ์†์„ฑ์— ๊นจ์ง„ ์ด๋ฏธ์ง€ ๊ฒฝ๋กœ๋ฅผ ๋„ฃ์œผ๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์•„๋ฌด ์ด๋ฏธ์ง€๋„ ์•ˆ๋‚˜์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋•Œ ๊นจ์ง„ ์ด๋ฏธ์ง€ ๊ฒฝ๋กœ์ผ ๊ฒฝ์šฐ ๋””ํดํŠธ ์ด๋ฏธ์ง€๋กœ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. onerror ์ด๋ฒคํŠธ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. img ํƒœ๊ทธ ๋””ํดํŠธ ์ด๋ฏธ์ง€ ์„ค์ • ์˜ˆ์‹œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. // onerror ์‚ฌ์šฉ ์˜ˆ์‹œ // or // ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ vue์—์„œ๋Š” @error๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ฒ˜๋ฆฌํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. // vue์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

2020.09.08 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/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 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/Vue

์—‘์‹ฌ๋ฒ ์ด(Eximbay)์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript)๋กœ FGKEY ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

ํšŒ์‚ฌ์—์„œ ์—‘์‹ฌ๋ฒ ์ด(Eximbay) ๊ฒฐ์ œ ๋ชจ๋“ˆ์„ ์—ฐ๋™ํ•  ์ผ์ด ์ƒ๊ฒจ์„œ Nuxt.js์— ์—‘์‹ฌ๋ฒ ์ด FGKEY๋ฅผ ์„ค์ •ํ–ˆ์„ ๋•Œ ์‚ฌ์šฉํ•œ ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ์—‘์‹ฌ๋ฒ ์ด์—์„œ FRKEY๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ๊ฐ€๋งน์ ๊ณผ Eximbay ์‚ฌ์ด์— ์ „์†ก๋˜๋Š” ํŒŒ๋ผ๋ฏธํ„ฐ์˜ ์œ ํšจ์„ฑ์„ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. Eximbay์— ๋ชจ๋“  ๊ฑฐ๋ž˜ ์š”์ฒญ ์‹œ, ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ SHA-256์œผ๋กœ Hashing ํ•˜์—ฌ fgkey ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ „๋‹ฌํ•˜๋ฉฐ, ์ด ๊ฐ’์€ Eximbay์—์„œ ์ƒ์„ฑ๋œ Hashing ๊ฐ’๊ณผ ๋น„๊ตํ•˜์—ฌ ๊ฑฐ๋ž˜์˜ ์œ ํšจ์„ฑ์„ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. ์‘๋‹ต ํŒŒ๋ผ๋ฏธํ„ฐ์˜ fgkey๋Š” Eximbay์—์„œ ์ƒ์„ฑํ•˜๋ฉฐ, ๋™์ผํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ๊ฐ€๋งน์ ์—์„œ ๊ฑฐ๋ž˜์˜ ์œ ํšจ์„ฑ์„ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. fgkey์ƒ์„ฑ์„ ์œ„ํ•ด์„œ๋Š” ์Šน์ธ๋œ key๊ฐ€ ํ•„์š”ํ•˜๋ฉฐ, ํ•ด๋‹น key๋Š” Eximbay๋กœ๋ถ€ํ„ฐ ํ• ๋‹น๋ฐ›์Šต๋‹ˆ๋‹ค...

2020.07.31 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/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 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/Vue

vue.js ์‚ฌ์šฉ์ž ์ง€์ • ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ํ™œ์šฉํ•ด์„œ ์ฝ”๋“œ๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ• (vue custom directive)

๐Ÿคš ๋“ค์–ด๊ฐ€๊ธฐ ์ „์— Vue์—๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋‚ด์žฅ๋œ ๋””๋ ‰ํ‹ฐ๋ธŒ๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. v-model๊ณผ v-show๊ฐ€ ๋Œ€ํ‘œ์ ์ธ ์˜ˆ์‹œ์ฃ . ํ•˜์ง€๋งŒ ์ด์™ธ์—๋„ ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ๋งŒ๋“ค๊ณ  ๋“ฑ๋กํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์ž˜ ๋งŒ๋“ค์–ด ๋†“์œผ๋ฉด ๊ต‰์žฅํžˆ ์œ ์šฉํ•˜๊ฒŒ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ’ป ๋””๋ ‰ํ‹ฐ๋ธŒ ๋“ฑ๋ก ๋ฐฉ๋ฒ• ์‚ฌ์šฉ์ž ์ง€์ • ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ๋“ฑ๋กํ•˜๋Š” ๋ฐฉ๋ฒ•์—๋Š” 2๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ „์—ญ์œผ๋กœ ๋“ฑ๋กํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๋กœ์ปฌ ์ปดํฌ๋„ŒํŠธ์— ๋“ฑ๋กํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ „์—ญ ์„ ์–ธ Vue ์ธ์Šคํ„ด์Šค ์„ ์–ธํ•˜๊ธฐ ์ „์— Vue.directive ์ „์—ญ ๋“ฑ๋ก์„ ์‹œ์ผœ์ค๋‹ˆ๋‹ค. ์ง€์—ญ ์„ ์–ธ ๋กœ์ปฌ ์ปดํฌ๋„ŒํŠธ์— directives๋กœ ๋“ฑ๋กํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด ์ง€์—ญ์ ์œผ๋กœ directives๋ฅผ ๋“ฑ๋กํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๐Ÿ’ป ํ›… ํ•จ์ˆ˜ ๋””๋ ‰ํ‹ฐ๋ธŒ์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๋‹ค์–‘ํ•œ ํ›… ํ•จ์ˆ˜๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. bind ๋””..

2020.07.06 ๊ฒŒ์‹œ๋จ

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

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

[Javascript] URL QueryString ๊ฐ’์„ Object(key-value)๋กœ ์†์‰ฝ๊ฒŒ ๋ฐ›์•„์˜ค๋Š” ๋ฐฉ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ URL์˜ QueryString ๊ฐ’์„ ์‰ฝ๊ฒŒ ํŒŒ์‹ฑํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ํ•จ์ˆ˜์˜ ๋ฆฌํ„ด ํ˜•ํƒœ๋Š” Object(key-value)์ด๋ฏ€๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์šฉ์ดํ•ฉ๋‹ˆ๋‹ค. /** * URL queryString ๊ฐ’์„ (key-value) ํ˜•์‹์œผ๋กœ ๊ฐ€์ ธ์˜ค๋Š” ํ•จ์ˆ˜ */ export const getURLParameters = () => { const params = {} location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) { params[key] = value }) return params } ์•„๋ž˜๋Š” ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•œ ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค์ž…๋‹ˆ๋‹ค. // before https://www.google.com/search?q=%..

2020.04.08 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/Javascript

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

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

2020.02.27 ๊ฒŒ์‹œ๋จ

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

์นดํ…Œ๊ณ ๋ฆฌ ์—†์Œ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•˜๋Š” ๋ฐฉ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•˜๋Š” ๋ฐฉ๋ฒ•์—๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํŽ˜์ด์ง€๋ฅผ ๊ฐฑ์‹ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. location.reload(); location.reload(true); location.href = location.href; history.go(0);

2020.02.24 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/Google Cloud Platform

Google Cloud Functions์™€ Puppeteer ๊ทธ๋ฆฌ๊ณ  Cloud Scheduler๋ฅผ ํ™œ์šฉํ•ด์„œ ์ž๋™ํ™” ํฌ๋กค๋Ÿฌ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ๋ฒ• (Node.js)

Google Cloud Functions์™€ Puppeteer์„ ํ™œ์šฉํ•ด์„œ ํฌ๋กค๋งํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ตํ˜€๋ณด๊ณ  ๋” ๋‚˜์•„๊ฐ€ Google Cloud Scheduler๋ฅผ ํ™œ์šฉํ•ด์„œ ํฌ๋กค๋ง ์ž๋™ํ™”๊นŒ์ง€ ๊ตฌํ˜„ํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ํฌ์ŠคํŒ…์—์„œ๋Š” Google Cloud Functions, Puppeteer ๊ทธ๋ฆฌ๊ณ  Google Cloud Scheduler๋ฅผ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ˆ™์ง€ํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๊ฐ€์ •ํ•˜์— ์ง„ํ–‰ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฐ„๋žตํ•˜๊ฒŒ ์งš๊ณ  ๋„˜์–ด๊ฐ€๋ฉด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. Google Cloud Functions Google Cloud Functions๋Š” ํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค๋ฅผ ๋นŒ๋“œ ๋ฐ ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ์„œ๋ฒ„๋ฆฌ์Šค ์‹คํ–‰ ํ™˜๊ฒฝ์ž…๋‹ˆ๋‹ค. Cloud Functions๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํด๋ผ์šฐ๋“œ ์ธํ”„๋ผ์™€ ์„œ๋น„์Šค์—์„œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ์— ์—ฐ๊ฒฐ๋˜๋Š” ๋‹จ์ผ ๋ชฉ์ ์˜ ๊ฐ„๋‹จํ•œ ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ• ..

2020.02.20 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•