๐Ÿ’ป ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘ ์งˆ๋ฌธ - JS #2

Chris Yangยท2019๋…„ 4์›” 25์ผ
11
post-thumbnail

์ด ๊ธ€์€ ํ”„๋ก ํŠธ์—”๋“œ ์ง๋ฌด ๋ฉด์ ‘ ์งˆ๋ฌธ๊ณผ ๊ด€๋ จ๋œ Github ์ €์žฅ์†Œ front-end-interview-handbook ๋ฒˆ์—ญ๋ณธ์œผ๋กœ, ์ €์žฅ์†Œ์— Translations ํด๋”์˜ ๋‚ด์šฉ๊ณผ ๋™์ผํ•ฉ๋‹ˆ๋‹ค.


JS ์งˆ๋ฌธ #2

ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘ ์งˆ๋ฌธ - JS ์งˆ๋ฌธ์— ๋Œ€ํ•œ ํ•ด์„ค์ž…๋‹ˆ๋‹ค.
Pull Request๋ฅผ ํ†ตํ•œ ์ œ์•ˆ, ์ˆ˜์ • ์š”์ฒญ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

Function.prototype.bind์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜์„ธ์š”.

MDN์—์„œ ์ธ์šฉ:

bind() ๋ฉ”์†Œ๋“œ๋Š” ํ˜ธ์ถœ๋  ๋•Œ, this ํ‚ค์›Œ๋“œ๊ฐ€ ์ฃผ์–ด์ง„ ์ธ์ž ๊ฐ’์œผ๋กœ ์„ค์ •๋˜๊ณ , ์ƒˆ๋กœ์šด ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ, ์•ž์ชฝ์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋„ ์ž์‹ ์˜ ์ธ์ž๋ฅผ ์‚ฌ์šฉํ•ด ๋ฏธ๋ฆฌ ์ˆœ์„œ๋Œ€๋กœ ์ฑ„์›Œ๋†“์€ ์ƒˆ๋กœ์šด ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

์ €์˜ ๊ฒฝํ—˜์ƒ, ๋‹ค๋ฅธ ํ•จ์ˆ˜๋กœ ์ „๋‹ฌํ•˜๊ณ ์ž ํ•˜๋Š” ํด๋ž˜์Šค์˜ ๋ฉ”์†Œ๋“œ์—์„œ this์˜ ๊ฐ’์„ ๋ฐ”์ธ๋”ฉํ•  ๋•Œ ๊ฐ€์žฅ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” React ์ปดํฌ๋„ŒํŠธ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

์–ธ์ œ document.write()๋ฅผ ์‚ฌ์šฉํ•˜๋‚˜์š”?

document.write()๋Š” document.open()์— ์˜ํ•ด ์—ด๋ฆฐ ๋ฌธ์„œ ์ŠคํŠธ๋ฆผ์— ํ…์ŠคํŠธ ๋ฌธ์ž์—ด์„ ์”๋‹ˆ๋‹ค. ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋“œ๋œ ํ›„์— document.write()๊ฐ€ ์‹คํ–‰๋˜๋ฉด document.open์„ ํ˜ธ์ถœํ•˜์—ฌ ๋ฌธ์„œ ์ „์ฒด๋ฅผ ์ง€์šฐ๊ณ  (<head>์™€ <body>๋ฅผ ์ง€์›๋‹ˆ๋‹ค!). ๋ฌธ์ž์—ด๋กœ ์ฃผ์–ด์ง„ ๋งค๊ฐœ ๋ณ€์ˆ˜ ๊ฐ’์œผ๋กœ ๋Œ€์ฒดํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ์ผ๋ฐ˜์ ์œผ๋กœ ์œ„ํ—˜ํ•˜๊ณ  ์˜ค์šฉ๋˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค.

document.write()๊ฐ€ ์ฝ”๋“œ๋ถ„์„์ด๋‚˜ JavaScript๊ฐ€ ํ™œ์„ฑํ™”๋œ ๊ฒฝ์šฐ์—๋งŒ ์ž‘๋™ํ•˜๋Š” ์Šคํƒ€์ผ์„ ํฌํ•จํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ์šฐ๋ฅผ ์„ค๋ช…ํ•˜๋Š” ์˜จ๋ผ์ธ ๋‹ต๋ณ€์ด ๋ช‡ ๊ฐ€์ง€ ์žˆ์Šต๋‹ˆ๋‹ค. ์‹ฌ์ง€์–ด HTML5 ๋ณด์ผ๋Ÿฌ ํ”Œ๋ ˆ์ดํŠธ์—์„œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ณ‘๋ ฌ๋กœ ๋กœ๋“œํ•˜๊ณ  ์‹คํ–‰ ์ˆœ์„œ๋ฅผ ๋ณด์กดํ•  ๋•Œ๋„ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค! ๊ทธ๋Ÿฌ๋‚˜, ์ €๋Š” ๊ทธ ์ด์œ ๊ฐ€ ์‹œ๋Œ€์— ๋’ค๋–จ์–ด์ง„ ๊ฒƒ์œผ๋กœ ์ƒ๊ฐํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ํ˜„์žฌ๋Š” document.write()๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ ๋„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ํ‹€๋ ธ๋‹ค๋ฉด ๊ณ ์ณ์ฃผ์„ธ์š”.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

Feature detection, Feature inference, UA String์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

Feature Detection

Feature Detection์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํŠน์ • ์ฝ”๋“œ ๋ธ”๋ก์„ ์ง€์›ํ•˜๋Š”์ง€์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋„๋ก ํ•˜์—ฌ, ์ผ๋ถ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ•ญ์ƒ ์˜ค๋ฅ˜ ๋Œ€์‹  ๋ฌด์–ธ๊ฐ€ ์ž‘๋™ํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ:

if ('geolocation' in navigator) {
  // navigator.geolocation๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค
} else {
  // ๋ถ€์กฑํ•œ ๊ธฐ๋Šฅ ํ•ธ๋“ค๋ง
}

Modernizr๋Š” Feature detection์„ ์ฒ˜๋ฆฌ โ€‹โ€‹ํ•  ์ˆ˜ ์žˆ๋Š” ํ›Œ๋ฅญํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

Feature Inference

Feature inference๋Š” Feature detection๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๊ธฐ๋Šฅ์„ ํ™•์ธํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ํ•จ์ˆ˜๋„ ์กด์žฌํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ณ  ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ:

if (document.getElementsByTagName) {
  element = document.getElementById(id)
}

์ด๊ฒƒ์€ ๊ถŒ์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Feature detection์ด ๋” ํ™•์‹คํ•ฉ๋‹ˆ๋‹ค.

UA String

๋„คํŠธ์›Œํฌ ํ”„๋กœํ† ์ฝœ ํ”ผ์–ด๊ฐ€ ์š”์ฒญํ•˜๋Š” ์†Œํ”„ํŠธ์›จ์–ด ์œ ์ € ์—์ด์ „ํŠธ์˜ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ์œ ํ˜•, ์šด์˜ ์ฒด์ œ, ์†Œํ”„ํŠธ์›จ์–ด ๊ณต๊ธ‰ ์—…์ฒด ๋˜๋Š” ์†Œํ”„ํŠธ์›จ์–ด ๋ฒ„์ „์„ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” browser-reported String์ž…๋‹ˆ๋‹ค. navigator.userAgent ๋ฅผ ํ†ตํ•ด ์ ‘๊ทผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ฌธ์ž์—ด์€ ๊ตฌ๋ฌธ ๋ถ„์„ํ•˜๊ธฐ ๊นŒ๋‹ค๋กœ์šฐ๋ฉฐ ์Šคํ‘ธํ•‘๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, Chrome์€ Chrome๊ณผ Safari๋กœ ๋ชจ๋‘ ๋ณด๊ณ ๋ฉ๋‹ˆ๋‹ค. Safari๋ฅผ ๊ฐ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” Safari ๋ฌธ์ž์—ด์ด ์žˆ๋Š”์ง€์™€ Chrome ๋ฌธ์ž์—ด์ด ์—†๋Š”์ง€ ํ™•์ธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฐฉ๋ฒ•์€ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

Ajax์— ๋Œ€ํ•ด ๊ฐ€๋Šฅํ•œํ•œ ์ž์„ธํžˆ ์„ค๋ช…ํ•˜์„ธ์š”.

Ajax(asynchronous JavaScript and XML)๋Š” ๋น„๋™๊ธฐ ์›น ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์›น ๊ฐœ๋ฐœ ๊ธฐ์ˆ ์˜ ์ง‘ํ•ฉ์ž…๋‹ˆ๋‹ค. Ajax๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ๊ธฐ์กด ํŽ˜์ด์ง€์˜ ํ™”๋ฉด ๋ฐ ๋™์ž‘์„ ๋ฐฉํ•ดํ•˜์ง€ ์•Š์œผ๋ฉด์„œ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์„œ๋ฒ„๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๊ณ  ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Ajax๋Š” ํ”„๋ฆฌ์  ํ…Œ์ด์…˜ ๋ ˆ์ด์–ด์—์„œ ๋ฐ์ดํ„ฐ ๊ตํ™˜ ๋ ˆ์ด์–ด๋ฅผ ๋ถ„๋ฆฌํ•จ์œผ๋กœ์จ, ์›นํŽ˜์ด์ง€ ๋ฐ ํ™•์žฅ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋กœ๋“œ ํ•  ํ•„์š” ์—†์ด ๋™์ ์œผ๋กœ ์ปจํ…์ธ ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ์ตœ๊ทผ์—๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ๋„ค์ดํ‹ฐ๋ธŒ JavaScript์˜ ์žฅ์  ๋•Œ๋ฌธ์— XML๋Œ€์‹  JSON์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

XMLHttpRequest API๋Š” ๋น„๋™๊ธฐ ํ†ต์‹ ์— ์ž์ฃผ ์‚ฌ์šฉ๋˜๋ฉฐ, ์ตœ๊ทผ์—๋Š” fetch API๊ฐ€ ์ž์ฃผ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

Ajax๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์˜ ์žฅ๋‹จ์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

์žฅ์ 

  • ์ƒํ˜ธ์ž‘์šฉ์„ฑ์ด ์ข‹์•„์ง‘๋‹ˆ๋‹ค. ์„œ๋ฒ„์˜ ์ƒˆ๋กœ์šด ์ปจํ…์ธ ๋ฅผ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ๋กœ๋“œํ•  ํ•„์š” ์—†์ด ๋™์ ์œผ๋กœ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์Šคํฌ๋ฆฝํŠธ๋‚˜ ์Šคํƒ€์ผ ์‹œํŠธ๋Š” ํ•œ ๋ฒˆ๋งŒ ์š”์ฒญํ•˜๋ฉด ๋˜๋ฏ€๋กœ ์„œ๋ฒ„์— ๋Œ€ํ•œ ์—ฐ๊ฒฐ์„ ์ค„์—ฌ์ค๋‹ˆ๋‹ค.
  • ์ƒํƒœ๋ฅผ ํŽ˜์ด์ง€์—์„œ ๊ด€๋ฆฌ ํ•  ์ˆ˜ โ€‹โ€‹์žˆ์Šต๋‹ˆ๋‹ค. ๋ฉ”์ธ ์ปจํ…Œ์ด๋„ˆ ํŽ˜์ด์ง€๊ฐ€ ๋‹ค์‹œ ๋กœ๋“œ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— JavaScript์˜ ๋ณ€์ˆ˜์™€ DOM์˜ ์ƒํƒœ๊ฐ€ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.
  • ๊ธฐ๋ณธ์ ์œผ๋กœ SPA์˜ ๋Œ€๋ถ€๋ถ„์˜ ์žฅ์ ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‹จ์ 

  • ๋™์  ์›น ํŽ˜์ด์ง€๋Š” ๋ถ๋งˆํฌํ•˜๊ธฐ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.
  • ๋ธŒ๋ผ์šฐ์ €์—์„œ JavaScript๊ฐ€ ๋น„ํ™œ์„ฑํ™”๋œ ๊ฒฝ์šฐ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • ์ผ๋ถ€ ์›น ํฌ๋กค๋Ÿฌ๋Š” JavaScript๋ฅผ ์‹คํ–‰ํ•˜์ง€ ์•Š์œผ๋ฉฐ JavaScript์— ์˜ํ•ด ๋กœ๋“œ๋œ ์ฝ˜ํ…์ธ ๋ฅผ ๋ณผ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
  • SPA์˜ ๋Œ€๋ถ€๋ถ„์˜ ๋‹จ์ ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

[โ†‘] Back to top

JSONP๊ฐ€ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€(๊ทธ๋ฆฌ๊ณ  Ajax์™€ ์–ด๋–ป๊ฒŒ ๋‹ค๋ฅธ์ง€)๋ฅผ ์„ค๋ช…ํ•˜์„ธ์š”.

JSONP(JSON with Padding)๋Š” ํ˜„์žฌ ํŽ˜์ด์ง€์—์„œ cross-origin ๋„๋ฉ”์ธ์œผ๋กœ์˜ Ajax ์š”์ฒญ์ด ํ—ˆ์šฉ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ cross-domain ์ •์ฑ…์„ ์šฐํšŒํ•˜๋Š” ๋ฐ ์ผ๋ฐ˜์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

JSONP๋Š” <script>ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด cross-origin ๋„๋ฉ”์ธ์— ์š”์ฒญํ•˜๊ณ  ๋ณดํ†ต callback์ฟผ๋ฆฌ ๋งค๊ฐœ ๋ณ€์ˆ˜(์˜ˆ: https://example.com?callback=printData)๋กœ ์š”์ฒญํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์„œ๋ฒ„๋Š” printData๋ผ๋Š” ํ•จ์ˆ˜ ์•ˆ์— ๋ฐ์ดํ„ฐ๋ฅผ ๋ž˜ํ•‘ํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

<!-- https://mydomain.com -->
<script>
function printData(data) {
  console.log(`My name is ${data.name}!`)
}
</script>

<script src="https://example.com?callback=printData"></script>
// https://example.com?callback=printData ์—์„œ ๋กœ๋“œ๋œ ํŒŒ์ผ
printData({ name: 'Yang Shun' })

ํด๋ผ์ด์–ธํŠธ๋Š” ์ „์—ญ ๋ฒ”์œ„์— ์žˆ๋Š” printData ํ•จ์ˆ˜๋ฅผ ๊ฐ€์ ธ์•ผ๋งŒ ํ•˜๊ณ , cross-origin domain์œผ๋กœ๋ถ€ํ„ฐ์˜ ์‘๋‹ต์ด ์ˆ˜์‹ ๋  ๋•Œ ํ•จ์ˆ˜๊ฐ€ ํด๋ผ์ด์–ธํŠธ์— ์˜ํ•ด ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.

JSONP๋Š” ์•ˆ์ „ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋ณด์•ˆ ๊ด€๋ จ ์ด์Šˆ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. JSONP๋Š” ์‹ค์ œ JavaScript๊ณ , JavaScript๊ฐ€ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ JSONP ๋ฐ์ดํ„ฐ ๊ณต๊ธ‰์ž๋ฅผ ์‹ ๋ขฐํ•ด์•ผ๋งŒ ํ•ฉ๋‹ˆ๋‹ค.

์š”์ฆ˜์—๋Š” CORS๊ฐ€ ๊ถŒ์žฅ๋˜๋Š” ์ ‘๊ทผ ๋ฐฉ์‹์ด๋ฉฐ JSONP๋Š” ํ•ดํ‚น์œผ๋กœ ๊ฐ„์ฃผ๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

JavaScript ํ…œํ”Œ๋ฆฟ์„ ์‚ฌ์šฉํ•œ ์ ์ด ์žˆ๋‚˜์š”? ์‚ฌ์šฉํ•ด๋ดค๋‹ค๋ฉด, ์–ด๋–ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ–ˆ๋‚˜์š”?

๋„ค. Handlebars, Underscore, Lodash, AngularJS, JSX. ์ €๋Š” AngularJS์—์„œ์˜ ํ…œํ”Œ๋ฆฟ์„ ์ข‹์•„ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ง€์‹œ์ž์—์„œ ๋ฌธ์ž์—ด์„ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉฐ ์˜คํƒ€๊ฐ€ ๊ฐ์ง€๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. JSX๋Š” JavaScript์— ๊ฐ€๊น๊ณ  ๋ฐฐ์›Œ์•ผ ํ•˜๋Š” ์ƒˆ๋กœ์šด ๋ฌธ๋ฒ•์ด ๊ฑฐ์˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋” ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ์š”์ฆ˜์—๋Š”, Third-party ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ์˜์กดํ•˜์ง€ ์•Š๊ณ  ํ…œํ”Œ๋ฆฟ์„ ๋งŒ๋“œ๋Š” ๋น ๋ฅธ ๋ฐฉ๋ฒ•์œผ๋กœ ES2015 ํ…œํ”Œ๋ฆฟ ๋ฌธ์ž์—ด ๋ฆฌํ„ฐ๋Ÿด์„ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

const template = `<div>My name is: ${name}</div>`

๊ทธ๋Ÿฌ๋‚˜ ํ…œํ”Œ๋ฆฟ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๋‹ฌ๋ฆฌ ์ปจํ…์ธ ๊ฐ€ ์ด์Šค์ผ€์ดํ”„๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์œ„์˜ ์ ‘๊ทผ ๋ฐฉ์‹์—์„œ ์ž ์žฌ์  XSS๋ฅผ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

[โ†‘] Back to top

ํ˜ธ์ด์ŠคํŒ…์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜์„ธ์š”.

ํ˜ธ์ด์ŠคํŒ…์€ ์ฝ”๋“œ์—์„œ ๋ณ€์ˆ˜ ์„ ์–ธ์˜ ๋™์ž‘์„ ์„ค๋ช…ํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋˜๋Š” ์šฉ์–ด์ž…๋‹ˆ๋‹ค. var ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธ๋˜๊ฑฐ๋‚˜ ์ดˆ๊ธฐํ™”๋œ ๋ณ€์ˆ˜๋Š” ํ˜„์žฌ ์Šค์ฝ”ํ”„์˜ ์ตœ์ƒ์œ„๊นŒ์ง€ ์˜ฎ๊ฒจ์ง‘๋‹ˆ๋‹ค. ์ด๊ฒƒ์„ ํ˜ธ์ด์ŠคํŒ…์ด๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์„ ์–ธ๋ฌธ๋งŒ ํ˜ธ์ด์ŠคํŒ…๋˜๋ฉฐ ํ• ๋‹น(์žˆ๋Š” ๊ฒฝ์šฐ)์€ ๊ทธ๋Œ€๋กœ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์‚ฌ์‹ค ์„ ์–ธ์€ ์‹ค์ œ๋กœ ์ด๋™๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค - JavaScript ์—”์ง„์€ ์ปดํŒŒ์ผ ์ค‘์— ์„ ์–ธ์„ ํŒŒ์‹ฑํ•˜๊ณ  ์„ ์–ธ๊ณผ ํ•ด๋‹น ์Šค์ฝ”ํ”„๋ฅผ ์ธ์‹ํ•ฉ๋‹ˆ๋‹ค. ์„ ์–ธ์„ ํ•ด๋‹น ์Šค์ฝ”ํ”„์˜ ๋งจ ์œ„๋กœ ์˜ฎ๊ฒจ์ง€๋Š” ๊ฒƒ์œผ๋กœ ์ƒ๊ฐํ•˜์—ฌ ๋™์ž‘์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ๋” ์‰ฌ์šธ ๋ฟ์ž…๋‹ˆ๋‹ค. ๋ช‡ ๊ฐ€์ง€ ์˜ˆ๋ฅผ ๋“ค์–ด ์„ค๋ช…ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

// var ์„ ์–ธ์ด ํ˜ธ์ด์ŠคํŒ…๋ฉ๋‹ˆ๋‹ค
console.log(foo) // undefined
var foo = 1
console.log(foo) // 1

// let/const ์„ ์–ธ์€ ํ˜ธ์ด์ŠคํŒ…๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
console.log(bar) // ReferenceError: bar is not defined
let bar = 2
console.log(bar) // 2

ํ•จ์ˆ˜ ์„ ์–ธ์€ ํ•จ์ˆ˜๋ชธ์ฒด๊ฐ€ ํ˜ธ์ด์ŠคํŒ…๋˜๋Š” ๋ฐ˜๋ฉด, ๋ณ€์ˆ˜ ์„ ์–ธ ํ˜•ํƒœ๋กœ ์ž‘์„ฑ๋œ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ๋ณ€์ˆ˜ ์„ ์–ธ๋งŒ ํ˜ธ์ด์ŠคํŒ…๋ฉ๋‹ˆ๋‹ค.

// ํ•จ์ˆ˜ ์„ ์–ธ
console.log(foo) // [Function: foo]
foo() // 'FOOOOO'
function foo() {
  console.log('FOOOOO')
}
console.log(foo) // [Function: foo]

// ํ•จ์ˆ˜ ํ‘œํ˜„์‹
console.log(bar) // undefined
bar() // Uncaught TypeError: bar is not a function
var bar = function() {
  console.log('BARRRR')
}
console.log(bar) // [Function: bar]

[โ†‘] Back to top

event bubbling์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜์„ธ์š”.

DOM ์š”์†Œ์—์„œ ์ด๋ฒคํŠธ๊ฐ€ ํŠธ๋ฆฌ๊ฑฐ๋˜๋ฉด ๋ฆฌ์Šค๋„ˆ๊ฐ€ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ๋Š” ๊ฒฝ์šฐ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๋ฅผ ์‹œ๋„ํ•œ ๋‹ค์Œ, ํ•ด๋‹น ์ด๋ฒคํŠธ๊ฐ€ ๋ถ€๋ชจ์—๊ฒŒ bubbling๋˜๊ณ  ๋ถ€๋ชจ์—์„œ ๊ฐ™์€ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด bubbling์€ ์š”์†Œ์˜ ์ตœ์ƒ๋‹จ ๋ถ€๋ชจ์š”์†Œ์ธ document๊นŒ์ง€ ๊ณ„์†์ ์œผ๋กœ ๋ฐœ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ bubbling์€ ์ด๋ฒคํŠธ ์œ„์ž„์˜ ์ž‘๋™ ๋ฉ”์ปค๋‹ˆ์ฆ˜์ž…๋‹ˆ๋‹ค.

[โ†‘] Back to top

"attribute"์™€ "property"์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

attribute๋Š” HTML ๋งˆํฌ์—…์— ์ •์˜๋˜์ง€๋งŒ property๋Š” DOM์— ์ •์˜๋ฉ๋‹ˆ๋‹ค. ์ฐจ์ด์ ์„ ์„ค๋ช…ํ•˜๊ธฐ ์œ„ํ•ด HTML์— ๋‹ค์Œ ํ…์ŠคํŠธ ํ•„๋“œ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด ๋ด…์‹œ๋‹ค: <input type="text" value="Hello">.

const input = document.querySelector('input')
console.log(input.getAttribute('value')) // Hello
console.log(input.value) // Hello

๊ทธ๋Ÿฌ๋‚˜ ํ…์ŠคํŠธ ํ•„๋“œ์— "World!"๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ์ด๋ ‡๊ฒŒ ๋ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

console.log(input.getAttribute('value')) // Hello
console.log(input.value) // Hello World!
์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

๋‚ด์žฅ JavaScript ๊ฐ์ฒด๋ฅผ ํ™•์žฅํ•˜๋Š” ๊ฒƒ์ด ์ข‹์€ ์ƒ๊ฐ์ด ์•„๋‹Œ ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?

๋‚ด์žฅ/๋„ค์ดํ‹ฐ๋ธŒ JavaScript ๊ฐ์ฒด๋ฅผ ํ™•์žฅํ•œ๋‹ค๋Š” ๊ฒƒ์€ prototype์— ์†์„ฑ/ํ•จ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์ฒ˜์Œ์—๋Š” ์ข‹์€ ์ƒ๊ฐ์ฒ˜๋Ÿผ ๋ณด์ผ ์ˆ˜ ์žˆ์ง€๋งŒ ์‹ค์ œ๋กœ๋Š” ์œ„ํ—˜ํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์˜ ์ฝ”๋“œ๊ฐ€ ๋™์ผํ•œ contains ๋ฉ”์†Œ๋“œ๋ฅผ ์ถ”๊ฐ€ํ•จ์œผ๋กœ์จ Array.prototype์„ ํ™•์žฅํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ์ƒ์ƒํ•ด๋ณด์‹ญ์‹œ์˜ค. ์ด๋Ÿฌํ•œ ๊ตฌํ˜„์€ ๋ฉ”์†Œ๋“œ๋ฅผ ์„œ๋กœ ๋ฎ์–ด์“ฐ๊ฒŒ ๋˜๋ฉฐ, ์ด ๋‘ ๋ฉ”์†Œ๋“œ์˜ ๋™์ž‘์ด ๋™์ผํ•˜์ง€ ์•Š์œผ๋ฉด ์ฝ”๋“œ๊ฐ€ ๋ง๊ฐ€์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋„ค์ดํ‹ฐ๋ธŒ ๊ฐ์ฒด๋ฅผ ํ™•์žฅํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์ผํ•œ ๊ฒฝ์šฐ๋Š” polyfill์„ ๋งŒ๋“ค ๋•Œ์ž…๋‹ˆ๋‹ค. JavaScript ์‚ฌ์–‘์˜ ์ผ๋ถ€์ด์ง€๋งŒ, ์˜ค๋ž˜๋œ ๋ธŒ๋ผ์šฐ์ €์ด๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž ๋ธŒ๋ผ์šฐ์ €์— ์—†์„ ์ˆ˜๋„ ์žˆ๋Š” ๋ฉ”์„œ๋“œ์— ๋Œ€ํ•œ ๊ณ ์œ ํ•œ ๊ตฌํ˜„์„ ์ œ๊ณตํ•ด์•ผํ•  ๊ฒฝ์šฐ ๋ฟ์ž…๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

document load ์ด๋ฒคํŠธ์™€ document DOMContentLoaded ์ด๋ฒคํŠธ์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

DOMContentLoaded ์ด๋ฒคํŠธ๋Š” ์Šคํƒ€์ผ์‹œํŠธ, ์ด๋ฏธ์ง€, ์„œ๋ธŒํ”„๋ ˆ์ž„ ๋กœ๋”ฉ์„ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๊ณ , ์ดˆ๊ธฐ HTML ๋ฌธ์„œ๊ฐ€ ์™„์ „ํžˆ ๋กœ๋“œ๋˜๊ณ  ํŒŒ์‹ฑ๋˜๋ฉด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

window์˜ load ์ด๋ฒคํŠธ๋Š” DOM๊ณผ ๋ชจ๋“  ์ข…์† ๋ฆฌ์†Œ์Šค์™€ ์—์…‹๋“ค์ด ๋กœ๋“œ๋œ ํ›„์— โ€‹โ€‹๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

==์™€ ===์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

==๋Š” ์ถ”์ƒ ๋™๋“ฑ ์—ฐ์‚ฐ์ž์ด๊ณ  ===๋Š” ์™„์ „ ๋™๋“ฑ ์—ฐ์‚ฐ์ž์ž…๋‹ˆ๋‹ค. ==์—ฐ์‚ฐ์ž๋Š” ํƒ€์ž… ๋ณ€ํ™˜์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ํƒ€์ž… ๋ณ€ํ™˜์„ ํ•œ ํ›„์— ๋™๋“ฑํ•œ์ง€ ๋น„๊ตํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ===์—ฐ์‚ฐ์ž๋Š” ํƒ€์ž… ๋ณ€ํ™˜์„ ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋‘ ๊ฐ’์ด ๊ฐ™์€ ํƒ€์ž…์ด ์•„๋‹Œ ๊ฒฝ์šฐ ===๋Š” false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ==๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฌด์„œ์šด ์ผ์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

1 == '1' // true
1 == [1] // true
1 == true // true
0 == '' // true
0 == '0' // true
0 == false // true

์ €์˜ ์กฐ์–ธ์€ ํŽธ์˜์ƒ null๊ณผ undefined๋ฅผ ๋น„๊ตํ•  ๋•Œ๋ฅผ ์ œ์™ธํ•˜๊ณ , ==์—ฐ์‚ฐ์ž๋ฅผ ์ ˆ๋Œ€ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. a == null์€ a๊ฐ€ null ๋˜๋Š” undefined์ด๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

var a = null
console.log(a == null) // true
console.log(a == undefined) // true
์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top


0๊ฐœ์˜ ๋Œ“๊ธ€