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


JS ์งˆ๋ฌธ #3

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

JavaScript์™€ ๊ด€๋ จํ•˜์—ฌ same-origin ์ •์ฑ…์„ ์„ค๋ช…ํ•˜์„ธ์š”.

same-origin ์ •์ฑ…์€ JavaScript๊ฐ€ ๋„๋ฉ”์ธ ๊ฒฝ๊ณ„๋ฅผ ๋„˜์–ด์„œ ์š”์ฒญํ•˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค. origin์€ URI ์ฒด๊ณ„, ํ˜ธ์ŠคํŠธ ์ด๋ฆ„, ํฌํŠธ ๋ฒˆํ˜ธ์˜ ์กฐํ•ฉ์œผ๋กœ ์ •์˜๋ฉ๋‹ˆ๋‹ค. ์ด ์ •์ฑ…์€ ํ•œ ํŽ˜์ด์ง€์˜ ์•…์˜์ ์ธ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํ•ด๋‹น ํŽ˜์ด์ง€์˜ DOM์„ ํ†ตํ•ด ๋‹ค๋ฅธ ์›น ํŽ˜์ด์ง€์˜ ์ค‘์š”ํ•œ ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผํ•˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

๋‹ค์Œ์ด ์ž‘๋™ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”.

duplicate([1, 2, 3, 4, 5]) // [1,2,3,4,5,1,2,3,4,5]
function duplicate(arr) {
  return arr.concat(arr)
}

duplicate([1, 2, 3, 4, 5]) // [1,2,3,4,5,1,2,3,4,5]

[โ†‘] Back to top

์™œ Ternary expresstion์ด๋ผ๊ณ  ๋ถ€๋ฅด๊ณ , "Ternary"๋ผ๋Š” ๋‹จ์–ด๋Š” ๋ฌด์—‡์„ ๋‚˜ํƒ€๋‚ด๋‚˜์š”?

"Ternary"๋Š” "์‚ผํ•ญ"์„ ๋‚˜ํƒ€๋‚ด๊ณ  ์‚ผํ•ญ ํ‘œํ˜„์‹์€ ์„ธ๊ฐ€์ง€ ํ”ผ์—ฐ์‚ฐ์ž, ํ…Œ์ŠคํŠธ ์กฐ๊ฑด๋ฌธ, "then"ํ‘œํ˜„์‹, "else"ํ‘œํ˜„์‹์„ ๋ฐ›์Šต๋‹ˆ๋‹ค. ์‚ผํ•ญ ํ‘œํ˜„์‹์€ JavaScript์—๋งŒ ํ•ด๋‹น๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ฉฐ ์™œ ์ด ๋ชฉ๋ก์— ์žˆ๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

"use strict"; ์ด ๋ฌด์—‡์ธ๊ฐ€์š”? ์‚ฌ์šฉ์‹œ ์žฅ๋‹จ์ ์ด ๋ฌด์—‡์ธ๊ฐ€์š”?

'use strict'๋Š” ์ „์ฒด ์Šคํฌ๋ฆฝํŠธ๋‚˜ ๊ฐœ๋ณ„ ํ•จ์ˆ˜์— ์—„๊ฒฉ ๋ชจ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋˜๋Š” ๋ช…๋ น๋ฌธ์ž…๋‹ˆ๋‹ค. Strict ๋ชจ๋“œ๋Š” JavaScript ๋‹ค์–‘ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ œํ•œํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

์žฅ์ :

  • ์‹ค์ˆ˜๋กœ ์ „์—ญ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  • ์•”๋ฌต์ ์œผ๋กœ ์‹คํŒจํ•œ ์˜ˆ์™ธ๋ฅผ throwํ•˜์ง€ ๋ชปํ•˜๋Š” ํ• ๋‹น์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
  • ์‚ญ์ œํ•  ์ˆ˜ ์—†๋Š” ์†์„ฑ์„ ์‚ญ์ œํ•˜๋ ค๊ณ  ์‹œ๋„ํ•ฉ๋‹ˆ๋‹ค. (์‹œ๋„ ํšจ๊ณผ๊ฐ€ ์—†์„ ๋•Œ๊นŒ์ง€)
  • ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜ ์ด๋ฆ„์€ ๊ณ ์œ ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.
  • this๋Š” ์ „์—ญ ์ปจํ…์ŠคํŠธ์—์„œ undefined์ž…๋‹ˆ๋‹ค.
  • ์˜ˆ์™ธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ๋ช‡ ๊ฐ€์ง€ ์ผ๋ฐ˜์ ์ธ ์ฝ”๋”ฉ์„ ์žก์•„๋ƒ…๋‹ˆ๋‹ค.
  • ํ—ท๊ฐˆ๋ฆฌ๊ฑฐ๋‚˜ ์ž˜ ๋ชจ๋ฅด๋Š” ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

๋‹จ์ :

  • ์ผ๋ถ€ ๊ฐœ๋ฐœ์ž๋Š” ์ต์ˆ™ํ•˜์ง€ ์•Š์€ ๊ธฐ๋Šฅ์ด ๋งŽ์Šต๋‹ˆ๋‹ค.
  • function.caller์™€ function.arguments์— ๋” ์ด์ƒ ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
  • ์„œ๋กœ ๋‹ค๋ฅธ ์—„๊ฒฉํ•œ ๋ชจ๋“œ๋กœ ์ž‘์„ฑ๋œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ณ‘ํ•ฉํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ „๋ฐ˜์ ์œผ๋กœ ์žฅ์ ์ด ๋‹จ์ ๋ณด๋‹ค ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์—„๊ฒฉ ๋ชจ๋“œ๊ฐ€ ์ฐจ๋‹จํ•˜๋Š” ๊ธฐ๋Šฅ์— ์˜์กดํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค. ์—„๊ฒฉํ•œ ๋ชจ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

100๊นŒ์ง€ ์ฆ๊ฐ€ํ•˜๋ฉด์„œ 3์˜ ๋ฐฐ์ˆ˜์—๋Š” fizz๋ฅผ ์ถœ๋ ฅํ•˜๊ณ , 5์˜ ๋ฐฐ์ˆ˜์—๋Š” buzz๋ฅผ ์ถœ๋ ฅํ•˜๊ณ , 3๊ณผ 5์˜ ๋ฐฐ์ˆ˜์—๋Š” fizzbuzz๋ฅผ ์ถœ๋ ฅํ•˜๋Š” for loop๋ฅผ ๋งŒ๋“œ์„ธ์š”.

Paul Irish์˜ FizzBuzz๋ฅผ ํ™•์ธํ•ด๋ณด์„ธ์š”.

for (let i = 1; i <= 100; i++) {
  let f = i % 3 == 0,
    b = i % 5 == 0
  console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i)
}

์ €๋Š” ์ธํ„ฐ๋ทฐ ์ค‘์— ์œ„์™€ ๊ฐ™์ด ์“ฐ๋ผ๊ณ  ์กฐ์–ธํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ๊ธธ์ง€๋งŒ ๋ถ„๋ช…ํ•œ ์ ‘๊ทผ ๋ฐฉ์‹์„ ๊ณ ์ˆ˜ํ•˜์„ธ์š”. FizzBuzz์˜ ๋” ๋‹ค์–‘ํ•œ ๋ฒ„์ „์„ ๋ณด๋ ค๋ฉด ์•„๋ž˜์˜ ์ฐธ์กฐ ๋งํฌ๋ฅผ ํ™•์ธํ•˜์„ธ์š”.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

์ผ๋ฐ˜์ ์œผ๋กœ ์›น ์‚ฌ์ดํŠธ์˜ ์ „์—ญ ์Šค์ฝ”ํ”„๋ฅผ ๊ทธ๋Œ€๋กœ ๋‘๊ณ  ๊ฑด๋“œ๋ฆฌ์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹์€ ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?

๋ชจ๋“  ์Šคํฌ๋ฆฝํŠธ๋Š” ์ „์—ญ ์Šค์ฝ”ํ”„์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋ชจ๋“  ์‚ฌ๋žŒ์ด ์ „์—ญ ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ•˜๋ฉด ์ถฉ๋Œ์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“ˆ ํŒจํ„ด (IIFEs)์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ€์ˆ˜๋ฅผ ๋กœ์ปฌ ๋„ค์ž„์ŠคํŽ˜์ด์Šค ๋‚ด์— ์บก์Šํ™”ํ•˜์„ธ์š”.

[โ†‘] Back to top

์™œ load ์ด๋ฒคํŠธ์™€ ๊ฐ™์€ ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋‚˜์š”? ์ด ์ด๋ฒคํŠธ์—๋Š” ๋‹จ์ ์ด ์žˆ๋‚˜์š”? ๋‹ค๋ฅธ ๋Œ€์•ˆ์„ ์•Œ๊ณ  ์žˆ๋‚˜์š”? ์•Œ๊ณ  ์žˆ๋‹ค๋ฉด ์™œ ๊ทธ๊ฒƒ์„ ์‚ฌ์šฉํ•  ๊ฑด๊ฐ€์š”?

load ์ด๋ฒคํŠธ๋Š” ๋ฌธ์„œ๋กœ๋”ฉ ํ”„๋กœ์„ธ์Šค๊ฐ€ ๋๋‚  ๋•Œ ๋ฐœ์ƒ๋ฉ๋‹ˆ๋‹ค. ์ด ์‹œ์ ์—์„œ ๋ฌธ์„œ์˜ ๋ชจ๋“  ๊ฐ์ฒด๊ฐ€ DOM์— ์žˆ๊ณ , ๋ชจ๋“  ์ด๋ฏธ์ง€, ์Šคํฌ๋ฆฝํŠธ, ๋งํฌ ๋ฐ ํ•˜์œ„ ํ”„๋ ˆ์ž„๋กœ๋”ฉ์ด ์™„๋ฃŒ๋ฉ๋‹ˆ๋‹ค.

DOM ์ด๋ฒคํŠธ DOMContentLoaded๋Š” ํŽ˜์ด์ง€์˜ DOM์ด ์ƒ์„ฑ๋œ ํ›„์— ๋ฐœ์ƒํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ๋ฆฌ์†Œ์Šค๊ฐ€ ๋กœ๋”ฉ๋˜๊ธฐ๋ฅผ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์ดˆ๊ธฐํ™”๋˜๊ธฐ ์ „์— ์ „์ฒด ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋“œ๋  ํ•„์š”๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ์— ์„ ํ˜ธ๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

single page app์ด ๋ฌด์—‡์ธ์ง€ ์„ค๋ช…ํ•˜๊ณ  SEO-friendlyํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•˜์„ธ์š”.

์•„๋ž˜๋Š” Grab Front End Guide์—์„œ ๊ฐ€์ ธ์˜จ ๊ฒƒ์ด๋ฉฐ, ์šฐ์—ฐํžˆ๋„ ์ œ๊ฐ€ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค!

์›น ๊ฐœ๋ฐœ์ž๋Š” ์š”์ฆ˜ ์›น ์‚ฌ์ดํŠธ๊ฐ€ ์•„๋‹Œ ์›น ์•ฑ์œผ๋กœ ์ œ์ž‘ํ•œ ์ œํ’ˆ์„ ์–ธ๊ธ‰ํ•ฉ๋‹ˆ๋‹ค. ๋‘ ๊ฐ€์ง€ ์šฉ์–ด ์‚ฌ์ด์—๋Š” ์—„๊ฒฉํ•œ ์ฐจ์ด๋Š” ์—†์ง€๋งŒ, ์›น ์•ฑ์€ ๋Œ€ํ™”ํ˜•, ๋™์ ์ธ ๊ฒฝํ–ฅ์ด ์žˆ์–ด ์‚ฌ์šฉ์ž๊ฐ€ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ณ  ์ž‘์—…์— ๋Œ€ํ•œ ์‘๋‹ต์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „ํ†ต์ ์œผ๋กœ, ๋ธŒ๋ผ์šฐ์ €๋Š” ์„œ๋ฒ„์—์„œ HTML์„ ๋ฐ›์•„ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ๋‹ค๋ฅธ URL๋กœ ์ด๋™ํ•˜๋ฉด, ์ „์ฒดํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ์ด ํ•„์š”ํ•˜๋ฉฐ ์„œ๋ฒ„๋Š” ์ƒˆํŽ˜์ด์ง€์— ๋Œ€ํ•ด ์ƒˆ HTML์„ ๋ณด๋ƒ…๋‹ˆ๋‹ค. ์ด๋ฅผ server-side rendering์ด๋ผ๊ณ ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ํ˜„๋Œ€ SPA์—์„œ๋Š” ๋Œ€์‹  client-side rendering์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” ์ „์ฒด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ํ•„์š”ํ•œ ์Šคํฌ๋ฆฝํŠธ(ํ”„๋ ˆ์ž„์›Œํฌ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ์•ฑ ์ฝ”๋“œ) ๋ฐ ์Šคํƒ€์ผ์‹œํŠธ์™€ ํ•จ๊ป˜ ์„œ๋ฒ„์˜ ์ดˆ๊ธฐ ํŽ˜์ด์ง€๋ฅผ ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๋ฉด ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํŽ˜์ด์ง€์˜ URL์€ HTML5 History API๋ฅผ ํ†ตํ•ด ์—…๋ฐ์ดํŠธ๋ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ JSON ํ˜•์‹์˜ ์ƒˆ ํŽ˜์ด์ง€์— ํ•„์š”ํ•œ ์ƒˆ ๋ฐ์ดํ„ฐ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ AJAX ์š”์ฒญ์„ ํ†ตํ•ด ์„œ๋ฒ„๋กœ ์ „์†ก๋ฉ๋‹ˆ๋‹ค. SPA๋Š” ์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋กœ๋”ฉ์—์„œ ๋ฏธ๋ฆฌ ๋‹ค์šด๋กœ๋“œ๋œ JavaScript๋ฅผ ํ†ตํ•ด ํŽ˜์ด์ง€๋ฅผ ๋™์ ์œผ๋กœ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ชจ๋ธ์€ ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋ฐ”์ผ ์•ฑ์˜ ์ž‘๋™ ๋ฐฉ์‹๊ณผ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์žฅ์ ๋“ค:

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

๋‹จ์ ๋“ค:

  • ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€์— ํ•„์š”ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ, ์•ฑ ์ฝ”๋“œ, ์• ์…‹๋กœ๋“œ๋กœ ์ธํ•ด ์ดˆ๊ธฐ ํŽ˜์ด์ง€๋กœ๋“œ๊ฐ€ ๋ฌด๊ฑฐ์›Œ์ง‘๋‹ˆ๋‹ค.
  • ๋ชจ๋“  ์š”์ฒญ์„ ๋‹จ์ผ ์ง„์ž…์ ์œผ๋กœ ๋ผ์šฐํŠธํ•˜๊ณ  ํด๋ผ์ด์–ธํŠธ ์ธก ๋ผ์šฐํŒ…์ด ๊ทธ ํ•œ๊ณณ์—์„œ ์ธ๊ณ„๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ์„œ๋ฒ„๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์ถ”๊ฐ€ ๋‹จ๊ณ„๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
  • SPA๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ๋ Œ๋”๋งํ•˜๊ธฐ ์œ„ํ•ด JavaScript์— ์˜์กดํ•˜์ง€๋งŒ ๋ชจ๋“  ๊ฒ€์ƒ‰ ์—”์ง„์ด ํฌ๋กค๋ง ์ค‘์— JavaScript๋ฅผ ์‹คํ–‰ํ•˜์ง€๋Š” ์•Š์œผ๋ฉฐ ํŽ˜์ด์ง€์— ๋นˆ ์ฝ˜ํ…์ธ ๊ฐ€ ํ‘œ์‹œ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋กœ ์ธํ•ด ์˜๋„์น˜ ์•Š๊ฒŒ ์•ฑ์˜ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO)๊ฐ€ ์–ด๋ ค์›Œ์ง‘๋‹ˆ๋‹ค.
    ๊ทธ๋Ÿฌ๋‚˜ ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ์•ฑ์„ ์ œ์ž‘ํ•  ๋•Œ ๊ฒ€์ƒ‰ ์—”์ง„์—์„œ ๋ชจ๋“  ์ฝ˜ํ…์ธ  ์ƒ‰์ธํ•  ํ•„์š”๋Š” ์—†์œผ๋ฏ€๋กœ SEO๊ฐ€ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์š”์†Œ๋Š” ์•„๋‹™๋‹ˆ๋‹ค. ์ด๋ฅผ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด, ์•ฑ์„ ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋งํ•˜๊ฑฐ๋‚˜ Prerender์™€ ๊ฐ™์€ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ "๋ธŒ๋ผ์šฐ์ €์—์„œ JavaScript๋ฅผ ๋ Œ๋”๋งํ•˜๊ณ , ์ •์  HTML์„ ์ €์žฅํ•œ ๋‹ค์Œ, ํฌ๋กค๋Ÿฌ์—๊ฒŒ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค".
์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

Promises์™€ ๊ทธ Polyfill์— ๋Œ€ํ•œ ๋‹น์‹ ์˜ ๊ฒฝํ—˜์€ ์–ด๋Š ์ •๋„์ธ๊ฐ€์š”?

Promise๋Š” ์–ด๋Š ์‹œ์ ์— resolve๋œ ๊ฐ’ ๋˜๋Š” resolve๋˜์ง€ ์•Š์€ ์ด์œ (์˜ˆ: ๋„คํŠธ์›Œํฌ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒ) ์ค‘ ํ•˜๋‚˜์˜ ๊ฐ’์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. promise๋Š” fulfilled, rejected, pending 3๊ฐ€์ง€ ์ƒํƒœ ์ค‘ ํ•˜๋‚˜์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. promise ์‚ฌ์šฉ์ž๋Š” ์ฝœ๋ฐฑ์„ ๋ถ™์—ฌ์„œ fulfill๋œ ๊ฐ’์ด๋‚˜ reject๋œ ์ด์œ ๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ โ€‹โ€‹์žˆ์Šต๋‹ˆ๋‹ค.

์ผ๋ฐ˜์ ์ธ polyfill์€ $.deferred, Q, Bluebird ์ž…๋‹ˆ๋‹ค๋งŒ, ๋ชจ๋‘๊ฐ€ ์ŠคํŽ™์„ ๋”ฐ๋ฅด๋Š” ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ES2015๋Š” ์ฆ‰์‹œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” Promise๋ฅผ ์ง€์›ํ•˜๋ฉฐ ์ผ๋ฐ˜์ ์œผ๋กœ ์š”์ฆ˜์—” polyfill์ด ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

Callback ๋Œ€์‹ ์— Promise๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ์˜ ์žฅ์ ๊ณผ ๋‹จ์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

์žฅ์ 

  • ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์งˆ ์ˆ˜ ์žˆ๋Š” ์ฝœ๋ฐฑ ์ง€์˜ฅ์„ ํ”ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • .then()์„ ์ด์šฉํ•˜์—ฌ ๊ฐ€๋…์„ฑ ์ข‹์€ ์—ฐ์†์ ์ธ ๋น„๋™๊ธฐ ์ฝ”๋“œ๋ฅผ ์‰ฝ๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • Promise.all()์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ‘๋ ฌ ๋น„๋™๊ธฐ ์ฝ”๋“œ๋ฅผ ์‰ฝ๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • Promise๋ฅผ ํ†ตํ•ด ์ฝœ๋ฐฑ๋งŒ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋”ฉ๋ฐฉ์‹์— ์žˆ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ƒํ™ฉ์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค:
    • ์ฝœ๋ฐฑ์„ ๋„ˆ๋ฌด ๋นจ๋ฆฌ ํ˜ธ์ถœํ•จ
    • ์ฝœ๋ฐฑ์„ ๋„ˆ๋ฌด ๋Šฆ๊ฒŒ ํ˜ธ์ถœํ•˜๊ฑฐ๋‚˜ ํ˜ธ์ถœํ•˜์ง€ ์•Š์Œ
    • ์ฝœ๋ฐฑ์„ ๋„ˆ๋ฌด ์ ๊ฒŒ ํ˜ธ์ถœํ•˜๊ฑฐ๋‚˜ ๋„ˆ๋ฌด ๋งŽ์ด ํ˜ธ์ถœํ•จ
    • ํ•„์š”ํ•œ ํ™˜๊ฒฝ/๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜๋Š”๋ฐ ์‹คํŒจํ•จ
    • ๋ฐœ์ƒ๊ฐ€๋Šฅํ•œ ์˜ค๋ฅ˜/์˜ˆ์™ธ๋ฅผ ๋ฌด์‹œํ•จ

๋‹จ์ 

  • ์•ฝ๊ฐ„ ๋” ๋ณต์žกํ•œ ์†Œ์Šค์ฝ”๋“œ(๋…ผ์Ÿ์˜ ์—ฌ์ง€๊ฐ€ ์žˆ์Œ).
  • ES2015๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ์ด์ „ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ด๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” polyfill์„ ๋กœ๋“œํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

JavaScript๋กœ ์ปดํŒŒ์ผ๋˜๋Š” ์–ธ์–ด๋กœ JavaScript ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒฝ์šฐ์˜ ์žฅ๋‹จ์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

JavaScript๋กœ ์ปดํŒŒ์ผ๋˜๋Š” ์–ธ์–ด์˜ ์˜ˆ๋กœ CoffeeScript, Elm, ClojureScript, PureScript, TypeScript๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์žฅ์ :

  • JavaScript์˜ ์˜ค๋žœ ๋ฌธ์ œ์ ๋“ค์„ ํ•ด๊ฒฐํ•˜๊ณ  JavaScript ์•ˆํ‹ฐ-ํŒจํ„ด์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.
  • JavaScript ์œ„์— syntatic sugar๋ฅผ ์ œ๊ณตํ•จ์œผ๋กœ์จ ๋” ์งง์€ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ค๋‹ˆ๋‹ค. ์ œ ์ƒ๊ฐ์—๋Š” ES5๋Š” ๋ถ€์กฑํ•˜์ง€๋งŒ ES2015๋Š” ๊ต‰์žฅํ•ฉ๋‹ˆ๋‹ค.
  • ์ •์  ํƒ€์ž…์€ ์‹œ๊ฐ„ ๊ฒฝ๊ณผ์— ๋”ฐ๋ผ ์œ ์ง€ ๊ด€๋ฆฌํ•ด์•ผ ํ•˜๋Š” ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์—์„œ ํ›Œ๋ฅญํ•ฉ๋‹ˆ๋‹ค(TypeScript์˜ ๊ฒฝ์šฐ).

๋‹จ์ :

  • ๋ธŒ๋ผ์šฐ์ €๋Š” ์˜ค์ง JavaScript๋งŒ ์‹คํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋นŒ๋“œ/์ปดํŒŒ์ผ ํ”„๋กœ์„ธ์Šค๊ฐ€ ํ•„์š”ํ•˜๋ฉฐ ๋ธŒ๋ผ์šฐ์ €์— ์ œ๊ณต๋˜๊ธฐ ์ „์— JavaScript๋กœ ์ฝ”๋“œ๋ฅผ ์ปดํŒŒ์ผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ์†Œ์Šค ๋งต์ด ๋ฏธ๋ฆฌ ์ปดํŒŒ์ผ๋œ ์†Œ์Šค์— ์ž˜ ๋งคํ•‘๋˜์ง€ ์•Š์œผ๋ฉด ๋””๋ฒ„๊น…์ด ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋Œ€๋ถ€๋ถ„์˜ ๊ฐœ๋ฐœ์ž๋“ค์€ ์ด๋Ÿฌํ•œ ์–ธ์–ด์— ์ต์ˆ™ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์ด๋ฅผ ๋ฐฐ์›Œ์•ผํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ์— ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ํŒ€ ๋น„์šฉ์ด ์ฆ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
  • ์†Œ๊ทœ๋ชจ ์ปค๋ฎค๋‹ˆํ‹ฐ(์–ธ์–ด์— ๋”ฐ๋ผ ๋‹ค๋ฆ„)์—์„œ๋Š” ๋ฆฌ์†Œ์Šค, ํŠœํ† ๋ฆฌ์–ผ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ํˆด์„ ์ฐพ๊ธฐ๊ฐ€ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • IDE / ํŽธ์ง‘๊ธฐ ์ง€์›์ด ๋ถ€์กฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ด๋Ÿฌํ•œ ์–ธ์–ด๋Š” ํ•ญ์ƒ ์ตœ์‹  JavaScript ํ‘œ์ค€๋ณด๋‹ค ๋’ค์ณ์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
  • ๊ฐœ๋ฐœ์ž๋“ค์€ ์ž์‹ ๋“ค์˜ ์ฝ”๋“œ๋ฅผ ๋ฌด์—‡์œผ๋กœ ์ปดํŒŒ์ผํ•˜๊ณ  ์žˆ๋Š”์ง€ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ๊ทธ๊ฒƒ์ด ์‹ค์ œ๋กœ ์‹คํ–‰๋  ๊ฒƒ์ด๊ณ , ๊ทธ๊ฒƒ์ด ๊ฒฐ๊ตญ ์ค‘์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

์‹ค์งˆ์ ์œผ๋กœ ES2015๋Š” JavaScript๋ฅผ ํฌ๊ฒŒ ๊ฐœ์„ ํ•˜์—ฌ ์ž‘์„ฑํ•˜๊ธฐ๊ฐ€ ํ›จ์”ฌ ์‰ฌ์›Œ์กŒ์Šต๋‹ˆ๋‹ค. ์š”์ฆ˜์€ CoffeeScript๊ฐ€ ํ•„์š”์„ฑ์„ ๋Š๋ผ์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

JavaScript ์ฝ”๋“œ๋ฅผ ๋””๋ฒ„๊น…ํ•˜๊ธฐ ์œ„ํ•ด ์–ด๋–ค ๋„๊ตฌ์™€ ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜๋‚˜์š”?

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

์˜ค๋ธŒ์ ํŠธ ์†์„ฑ์ด๋‚˜ ๋ฐฐ์—ด ํ•ญ๋ชฉ์„ ๋ฐ˜๋ณตํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์–ธ์–ด ๊ตฌ๋ฌธ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

์˜ค๋ธŒ์ ํŠธ์˜ ๊ฒฝ์šฐ:

  • for-in ๋ฐ˜๋ณต - for (var property in obj) { console.log(property); }. ๊ทธ๋Ÿฌ๋‚˜, ์ด๋Š” ์ƒ์†๋œ ์†์„ฑ๋„ ๋ฐ˜๋ณต๋˜๋ฉฐ, ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— obj.hasOwnProperty(property) ์ฒดํฌ๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • Object.keys() - Object.keys(obj).forEach(function (property) { ... }). Object.keys()๋Š” ์ „๋‹ฌํ•˜๋Š” ๊ฐ์ฒด์˜ ์—ด๊ฑฐ ๊ฐ€๋Šฅํ•œ ๋ชจ๋“  ์†์„ฑ์„ ๋‚˜์—ดํ•˜๋Š” ์ •์  ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.
  • Object.getOwnPropertyNames() - Object.getOwnPropertyNames(obj).forEach(function (property) { ... }). Object.getOwnPropertyNames()๋Š” ์ „๋‹ฌํ•˜๋Š” ๊ฐ์ฒด์˜ ์—ด๊ฑฐ ๊ฐ€๋Šฅํ•œ ์†์„ฑ๊ณผ ์—ด๊ฑฐ๋ถˆ๊ฐ€๋Šฅํ•œ ๋ชจ๋“  ์†์„ฑ์„ ๋‚˜์—ดํ•˜๋Š” ์ •์  ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.

๋ฐฐ์—ด์˜ ๊ฒฝ์šฐ:

  • for ๋ฐ˜๋ณต - for (var i = 0; i < arr.length; i++). ์—ฌ๊ธฐ์— ์žˆ๋Š” ์ผ๋ฐ˜์ ์ธ ํ•จ์ •์€ var์ด ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„๊ณ  ๋ธ”๋ก ์Šค์ฝ”ํ”„๊ฐ€ ์•„๋‹ˆ๋ฉฐ, ๋Œ€๋ถ€๋ถ„ ๋ธ”๋ก ์Šค์ฝ”ํ”„์˜ ๋ฐ˜๋ณต์ž ๋ณ€์ˆ˜๋ฅผ ์›ํ•  ๊ฒƒ์ด๋ผ๋Š” ์ ์ž…๋‹ˆ๋‹ค. ES2015์—๋Š” ๋ธ”๋ก ๋ฒ”์œ„๊ฐ€ ์žˆ๋Š” let์ด ์ถ”๊ฐ€๋๊ณ , ์ด๋ฅผ ๋Œ€์‹  ์‚ฌ์šฉํ•  ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ฉ๋‹ˆ๋‹ค. for (let i = 0; i < arr.length; i++).
  • forEach - arr.forEach(function (el, index) { ... }). ํ•„์š”ํ•œ ๊ฒƒ์ด ๋ฐฐ์—ด์˜ ์š”์†Œ๋ผ๋ฉด index๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ด ๊ตฌ๋ฌธ์ด ๋” ํŽธ๋ฆฌ ํ•  ์ˆ˜ โ€‹โ€‹์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ every๊ณผ some๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐ˜๋ณต์„ ์ผ์ฐ ๋๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • for-of ๋ฐ˜๋ณต - for (let elem of arr) { ... }. ES6๋Š” String, Array, Map, Set ๋“ฑ๊ณผ ๊ฐ™์€ iterable protocol์„ ์ค€์ˆ˜ํ•˜๋Š” ๊ฐ์ฒด๋ฅผ ๋ฐ˜๋ณต ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์ƒˆ๋กœ์šด for-of ๋ฃจํ”„๋ฅผ ๋„์ž…ํ–ˆ์Šต๋‹ˆ๋‹ค. for ๋ฃจํ”„์˜ ์žฅ์ ์€ ๋ฃจํ”„์—์„œ ๋ฒ—์–ด๋‚  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๊ณ , forEach()์˜ ์žฅ์ ์€ ์นด์šดํ„ฐ ๋ณ€์ˆ˜๊ฐ€ ํ•„์š” ์—†๊ธฐ ๋•Œ๋ฌธ์— for ๋ฃจํ”„๋ณด๋‹ค ๊ฐ„๊ฒฐํ•˜๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. for-of ๋ฃจํ”„๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ๋ฃจํ”„์—์„œ ๋น ์ ธ ๋‚˜์˜ฌ ์ˆ˜๋„ ์žˆ๊ณ  ๋” ๊ฐ„๊ฒฐํ•œ ๊ตฌ๋ฌธ๋„ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ์— ์ €๋Š” .forEach ๋ฉ”์„œ๋“œ๋ฅผ ์„ ํ˜ธํ•˜์ง€๋งŒ, ๋ฌด์—‡์„ ํ•˜๋Š๋ƒ์— ๋”ฐ๋ผ์„œ ๊ฐ ์ƒํ™ฉ์— ๋งž๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ES6 ์ด์ „์—๋Š” for ๋ฃจํ”„๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฃจํ”„๋ฅผ ์กฐ๊ธฐ ์ข…๋ฃŒํ•ด์•ผ ํ•  ๋•Œ break๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด์ œ ES6์—์„œ๋Š” for-of๋ฃจํ”„๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด๋ฅผ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฃจํ”„ ๋‹น ๋ฐ˜๋ณต์ž๋ฅผ ๋‘ ๋ฒˆ ์ด์ƒ ๋Š˜๋ฆฌ๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ด ์œ ์—ฐ์„ฑ์ด ๋” ํ•„์š”ํ•˜๋‹ค๋ฉด, for ๋ฃจํ”„๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋˜ํ•œ, for-of ๋ฃจํ”„๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๊ฐ ๋ฐฐ์—ด ์š”์†Œ์˜ ์ธ๋ฑ์Šค์™€ ๊ฐ’์— ๋ชจ๋‘ ์ ‘๊ทผํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ ES6 Array์˜ entries() ๋ฉ”์†Œ๋“œ์™€ destructuring์„ ์‚ฌ์šฉํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค.

const arr = ['a', 'b', 'c'];

for (let [index, elem] of arr.entries()) { 
  console.log(index, ': ', elem);
}
์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top