Banner

My Tech Blog (ํ…œํ”Œ๋ฆฟ)

์˜ค๋Š˜์˜ ๋ช…์–ธ
# ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด(Template Literal)ES6๋ถ€ํ„ฐ ์ƒˆ๋กœ ๋„์ž…๋œ ๋ฌธ์ž์—ด ํ‘œ๊ธฐ๋ฒ•๋ฌธ์ž์—ด ์ƒ์„ฑ์‹œ ๋”ฐ์˜ดํ‘œ ๋Œ€์‹ , ๋ฐฑํ‹ฑ(`)์„ ์‚ฌ์šฉvar str_01 = `hello world`;//๋ฐฑํ‹ฑ ์‚ฌ์šฉconst x='x';const y='y';const z='z';console.log(`${x}๋Š” x, ${y}๋Š” y, ${z}๋Š” z์ด๋‹ค. `); //x๋Š” x, y๋Š” y, z๋Š” z์ด๋‹ค. โ–ถ๏ธŽ ๋ฐฑํ‹ฑ(`)์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ JS ES6(ECMAScript 2015)๋ถ€ํ„ฐ ๋„์ž…๋˜์—ˆ๋‹ค.โ–ถ๏ธŽ ๊ฐœํ–‰ ๋ฌธ์ž(\n)๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„๋„ ์ž๋™ ์ค„๋ฐ”๊ฟˆ โ–ถ๏ธŽ ์ƒ๊น€์ƒˆ๊ฐ€ ์ž‘์€๋”ฐ์›€ํ‘œ(')์™€ ๋น„์Šทํ•˜๋‹ˆ ํ—ท๊ฐˆ๋ฆฌ์ง€ ์•Š๋„๋ก ์ฃผ์˜# ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด - ๋ฐฑํ‹ฑ(`)์˜ ๊ธฐ๋Šฅ ์ค„๋ฐ”๊ฟˆ(๊ฐœํ–‰: Multi-line strings)  โ–ถ๏ธŽ ๋ฐฑํ‹ฑ(`)์œผ๋กœ ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์„ ์‚ฌ์šฉํ•˜๋ฉด..
์—ฌ๋Ÿฌ๋ถ„๋“ค ์˜ค๋Š˜์€ ๋ช‡ ๊ฐ€์ง€ ์œ ์šฉํ•œ ํ”„๋กœ๊ทธ๋žจ ์†Œ๊ฐœ ํ•ด ๋“œ๋ฆฌ๋ ค๊ณ  ํ•ด์š”๊ทธ ์ค‘ ์ฝ”๋”ฉ ์—ฐ์Šตํ•  ๋•Œ๋‚˜ ํฌํŠธํด๋ฆฌ์˜ค ๋งŒ๋“ค ๋•Œ ์ฐธ๊ณ ํ•˜๊ธฐ ์ข‹์€ ์‚ฌ์ดํŠธ ํ•˜๋‚˜ ๊ฐ€์ ธ์™”์–ด์š”.  CodePenAn online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.codepen.io  CodePen์€ ์›น ๊ฐœ๋ฐœ์ž์™€ ๋””์ž์ด๋„ˆ๋“ค์ด HTML, CSS, JavaScript ์ฝ”๋“œ๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ž‘์„ฑํ•˜๊ณ  ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š”์˜จ๋ผ์ธ ์ฝ”๋“œ ํŽธ์ง‘๊ธฐ์ž…๋‹ˆ๋‹ค.    ๋ฌด๋ฃŒ ์š”๊ธˆ์ œ๋กœ๋„ ๊ธฐ๋ณธ์ ์ธ ์ฝ”๋”ฉ ์ž‘์—…์ด ๊ฐ€๋Šฅํ•˜์ง€๋งŒ, ํ˜‘์—…๊ณผ ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ์„ ์›ํ•  ๊ฒฝ์šฐ..
1. ์—‘์…€์—๋Š” ํ‘œ๊ฐ€ ์žˆ๊ณ  ๋…ธ์…˜์—๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๊ฐ€ ์žˆ๋‹ค.   ์ผ์ • ๊ด€๋ฆฌ, ๊ธฐ์–ต์— ๋‚จ๋Š” ์˜ํ™”๋‚˜ ์ฑ…์— ๊ด€ํ•œ ๊ธฐ๋ก, ํ”„๋กœ์ ํŠธ ๊ด€๋ฆฌ์— ๊ผญ ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์ด ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์ž…๋‹ˆ๋‹ค. ์—‘์…€์—์„œ ํ‘œ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ๊ณผ ๋น„์Šทํ•œ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ๋นˆ ํŽ˜์ด์ง€์—์„œ ๋ธ”๋ก ์ถ”๊ฐ€ ๋‹จ์ถ•ํ‚ค / ๋ฅผ ๋ˆ„๋ฅด๊ณ  ์•„๋ž˜๋กœ ๋‚ด๋ ค๋ณด๋ฉด [๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค] ํ•ญ๋ชฉ์ด ์žˆ์–ด์š”. /data ๋ฅผ ์ž…๋ ฅํ•ด๋„ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ์ด์šฉ ํ•  ์ˆ˜ ์žˆ์–ด์š”. ๋…ธ์…˜์—์„œ ์ง€์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์˜ ์ข…๋ฅ˜๋Š” 6๊ฐ€์ง€์˜ˆ์š”.  1-1. [ํ‘œ ๋ณด๊ธฐ]๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ํ‘œ ํ˜•ํƒœ์ž…๋‹ˆ๋‹ค.    1. [ + ์ƒˆ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์ƒ์„ฑ]   2. ํƒœ๊ทธ ์˜† + ์•„์ด์ฝ˜ ๋ˆŒ๋Ÿฌ์„œ ์—ด ์ถ”๊ฐ€ ํ›„ [+ ์ƒˆ๋กœ ๋งŒ๋“ค๊ธฐ] ๋ˆŒ๋Ÿฌ์„œ ํ–‰ ์ถ”๊ฐ€   3. ์ œ๋ชฉ ์ž…๋ ฅ (์˜ˆ์‹œ - ์ด๋ฒˆ ๋‹ฌ ์ผ์ •)   4. ํ‘œ ํ•ญ๋ชฉ์—๋Š” ํ•  ์ผ, ๋ถ„๋ฅ˜,๋งˆ๊ฐ์ผ ๋“ฑ ์ถ”๊ฐ€ ๊ฐ€๋Šฅ   5. ํ‘œ ํ•ญ๋ชฉ ..
์ƒ๋‹จ์œผ๋กœ