์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
BEST

ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ JavaScript ES6+ ์‘์šฉํŽธ

์ด ๊ฐ•์ขŒ๋Š” ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ JavaScript ES6+์˜ ์‹œ๋ฆฌ์ฆˆ ๊ฐ•์ขŒ๋กœ ๋‹ค์–‘ํ•œ ์‘์šฉ ์‚ฌ๋ก€๋ฅผ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

Thumbnail

์ค‘๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

  • ์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ

  • ๋™์‹œ์„ฑ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

  • ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์‘์šฉํ•˜๊ธฐ

  • ๋ฐฑ์—”๋“œ์—์„œ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์‘์šฉํ•˜๊ธฐ

์ƒ์‚ฐ์„ฑ์„ ๋†’์ด๋Š” ํ•จ์ˆ˜ํ˜• ์ฝ”๋“œ ์ž‘์„ฑ!
์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์‘์šฉํ•ด์š” ๐Ÿ‘Š

๋ฌด์—‡์„ ๋ฐฐ์šฐ๋‚˜์š”? ๐Ÿ“–

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ES6+๊ฐ€ ๋˜๋ฉด์„œ ์–ธ์–ด์—์„œ ์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœํ† ์ฝœ์„ ํŠน๋ณ„ํžˆ ๊ฐ•์กฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ†ตํ•ด ๋ช…๋ นํ˜• ์ฝ”๋“œ๋ฅผ ๋Œ€์ฒดํ•ฉ๋‹ˆ๋‹ค. ์‹ฌ๋ณผ/์ดํ„ฐ๋Ÿฌ๋ธ”/์ดํ„ฐ๋ ˆ์ดํ„ฐ/์ œ๋„ˆ๋ ˆ์ดํ„ฐ, Promise/async/await ๋“ฑ์˜ ํ”„๋กœํ† ์ฝœ์ด ๊ฐ•์กฐ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ดํ›„ ๋ฒ„์ „์—์„œ๋„ async/await/for...await-of/Async Iterator ๋“ฑ์œผ๋กœ ํ”„๋กœํ† ์ฝœ์ด ๋ฐœ์ „ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜๋Š” 'ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ JavaScript ES6+'์˜ ํ›„์† ๊ฐ•์˜๋กœ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ, ์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๋‹ค์–‘ํ•˜๊ฒŒ ์‘์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด ์—๋Ÿฌ๊ฐ€ ๋‚˜๊ธฐ ์‰ฌ์šด i++, j++, if, for, break ๋“ฑ์˜ ๋ช…๋ นํ˜• ์ฝ”๋“œ๋ฅผ ๋”์ด์ƒ ์ž‘์„ฑํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—๋Ÿฌ์œจ์ด ์ ์œผ๋ฉฐ, ์ƒ์‚ฐ์„ฑ์ด ๋†’๊ณ , ์•„๋ฆ„๋‹ค์šด ํ‘œํ˜„๋ ฅ์„ ๊ฐ€์ง„ ํ•จ์ˆ˜ํ˜• ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด์„ธ์š”!




์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ์˜ ์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ์žฅ์  ๐Ÿ’ก

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

 ES5 ๋ฌธ๋ฒ• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๋ถˆํŽธํ•จ ๐Ÿฅฒ

  • i++, j++, if, for, break, ์ƒํƒœ ๋ณ€๊ฒฝ์— ์˜์กดํ•œ ์ฝ”๋“œ๋Š” ๋ฒ„๊ทธ๊ฐ€ ์ƒ๊ธฐ๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค.
  • ๊ธฐ๋Šฅ ๋ฐœ์ „, ๊ธฐํš ๋ณ€๊ฒฝ์— ๋Œ€์‘ํ•˜๋‹ค๋ณด๋ฉด ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒ๋˜๊ธฐ ์‰ฌ์›Œ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.
  • ๊ฐœ๋ฐœ์ž๋งˆ๋‹ค ์„ ํ˜ธํ•˜๋Š” ์ฝ”๋“œ ์Šคํƒ€์ผ์ด ๋‹ค๋ฅด๊ณ , ์„œ๋กœ์˜ ์ฝ”๋“œ๋ฅผ ํ•ด์„ํ•˜๊ธฐ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.
  • ํ•ญ์ƒ ๋กœ์ง์„ ์ƒˆ๋กœ ์ž‘์„ฑํ•ด์•ผํ•˜๊ณ , ๊ทธ์— ๋”ฐ๋ฅธ ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค๋„ ๋งŽ์•„์ ธ ์ƒ์‚ฐ์„ฑ์ด ๋–จ์–ด์ง‘๋‹ˆ๋‹ค.

์ง€์‹๊ณต์œ ์ž ํ•œ๋งˆ๋”” ๐Ÿ˜€

2008๋…„๋„ ์ฏค ๋ถ€ํ„ฐ ๋ฆฌ์Šต, ์ดํ„ฐ๋Ÿฌ๋ธ”, ๋ฆฌ์•กํ‹ฐ๋ธŒ ๋“ฑ์„ ๊ธฐ๋ฐ˜์œผ๋กœํ•œ ํด๋กœ์ €, ์—˜๋ฆญ์„œ, ์Šค์นผ๋ผ์™€ ๊ฐ™์€ ๋‹ค์–‘ํ•œ ํ•จ์ˆ˜ํ˜• ์–ธ์–ด๋“ค์ด ์ƒ๊ฒจ๋‚˜๊ณ , ๋‹ค๋ฅธ ์–ธ์–ด๋“ค์—์„œ๋Š” ๋งŽ์€ ๊ด€๋ จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์ด ์ƒ๊ฒจ๋‚˜๋”๋‹ˆ, ์ตœ๊ทผ์— ์ด๋ฅด๋Ÿฌ์„œ๋Š” ํ˜„์—…์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ์ž๋ฐ”, ์Šค์œ„ํ”„ํŠธ, ์ฝ”ํ‹€๋ฆฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋“ฑ์— ๋žŒ๋‹ค๊ฐ€ ์ ์šฉ๋˜๊ณ , ์ŠคํŠธ๋ฆผ ํ˜น์€ ์ดํ„ฐ๋Ÿฌ๋ธ”์ด๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ์–ธ์–ด ์ž์ฒด์— LISP ํ˜น์€ FP๊ฐ€ ๋„์ž…๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋” ๋‹ค์–‘ํ•œ ์ƒํ™ฉ์—์„œ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋‚˜ ์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ํ•„์š”ํ•˜๋‹ค๋Š” ์ธ์‹์ด ํผ์ง€๊ณ  ์žˆ๊ณ , ์ด๋Ÿฌํ•œ ๊ธฐ์ˆ ๋“ค์ด ์‹ค๋ฌด์—์„œ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•จ์ˆ˜ํ˜•/์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ๋ชจ๋“  ์–ธ์–ด์— ์ ์šฉ๋˜๊ณ  ์žˆ๋Š” ๊ฒƒ์€ ์‹ค์ œ์ ์ธ ๊ฐ€์น˜ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ ๋ฌธ์ œ๋ฅผ ์ž‘๊ฒŒ ๋งŒ๋“ค๊ณ  ์กฐํ•ฉ์„ฑ์„ ๋†’์ด๋Š”๋ฐ ์ข‹์€ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ์ด์ œ๋Š” ๊ฑฐ์˜ ๋Œ€๋ถ€๋ถ„์˜ ์–ธ์–ด์— ์ ์šฉ๋˜๋ฉด์„œ ์ด ๋ฐฉ๋ฒ•์€ ํƒˆ ์–ธ์–ด์ ์ธ ํ•ด๊ฒฐ์ฑ…์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

ํŠนํžˆ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ดํ„ฐ๋Ÿฌ๋ธ”/์ดํ„ฐ๋ ˆ์ดํ„ฐ/์ œ๋„ˆ๋ ˆ์ดํ„ฐ/์‹ฌ๋ณผ ๋“ฑ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋งค์šฐ ๋›ฐ์–ด๋‚œ ํ”„๋กœํ† ์ฝœ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํ”„๋กœํ† ์ฝœ์€ ๊ฐœ๋ฐœ์ž๋กœ ํ•˜์—ฌ๊ธˆ ์–ธ์–ด๋ฅผ ๋‹ค๋ฃจ๋ผ๊ณ  ์ด์•ผ๊ธฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ES6+์˜ ์ง„์งœ ๋งค๋ ฅ์€ ์ด '์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœํ† ์ฝœ'์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ ์ƒ์‚ฐ์„ฑ์„ ๋†’์ด๊ณ , ์˜ค๋ฅ˜์œจ์„ ์ค„์ด๊ณ , ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์šฉ์ดํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ์•„์ฃผ ํ›Œ๋ฅญํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค.


์˜ˆ์ œ ์ฝ”๋“œ ๐Ÿ“œ


๊ด€๋ จ ๊ฐ•์˜ ๐Ÿง‘โ€๐Ÿซ

ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ javascript ES6+
ES6+์˜ ์ดํ„ฐ๋Ÿฌ๋ธ”/์ดํ„ฐ๋ ˆ์ดํ„ฐ/์ œ๋„ˆ๋ ˆ์ดํ„ฐ/๋™์‹œ์„ฑ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๋Œ€ํ•ด ์ƒ์„ธํžˆ ๋‹ค๋ฃน๋‹ˆ๋‹ค. 
ํ•จ์ˆ˜ํ˜•/์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๋Œ€ํ•ด ์ต์ˆ™ํ•˜์ง€ ์•Š๋‹ค๋ฉด ์ด ๊ฐ•์˜๋ฅผ ๋จผ์ € ๋“ค์–ด์ฃผ์„ธ์š”!
 
 
 
 
 
 
 

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

  • ์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์‘์šฉ๋ฒ•์„ ์•Œ๊ณ  ์‹ถ์€ ๋ถ„

  • ํ•จ์ˆ˜ํ˜•/์ดํ„ฐ๋Ÿฌ๋ธ”/๋™์‹œ์„ฑ ์‹ค์ œ ์‚ฌ์šฉ ์‚ฌ๋ก€๊ฐ€ ๊ถ๊ธˆํ•œ ๋ถ„

  • ๊ฐ„๊ฒฐํ•˜๊ณ  ์šฐ์•„ํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์‹ถ์€ ๋ถ„

  • JS ๊ฐœ๋ฐœ์ž๋กœ์„œ ํ•œ ๋‹จ๊ณ„ ๋„์•ฝํ•˜๊ณ  ์‹ถ์€ ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ JavaScript ES6+ ์ธํ”„๋Ÿฐ ๊ฐ•์˜

  • ES6+ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

  • ์ดํ„ฐ๋Ÿฌ๋ธ”/์ดํ„ฐ๋ ˆ์ดํ„ฐ/์ œ๋„ˆ๋ ˆ์ดํ„ฐ

์•ˆ๋…•ํ•˜์„ธ์š”
MDU ์œ ์ธ๋™์ž…๋‹ˆ๋‹ค.

21,857

๋ช…

์ˆ˜๊ฐ•์ƒ

725

๊ฐœ

์ˆ˜๊ฐ•ํ‰

453

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

3

๊ฐœ

๊ฐ•์˜

  • ๋งˆํ”Œ์ฝ”ํผ๋ ˆ์ด์…˜ CTO

  • ์ „ ์นด์นด์˜ค, ์—”์”จ์†Œํ”„ํŠธ ์˜คํ”ˆ๋งˆ๋ฃจ ์ŠคํŠœ๋””์˜ค ๊ฐœ๋ฐœ์ž

  • ๋งˆํ”Œ๊ฐœ๋ฐœ๋Œ€ํ•™ ์œ ํŠœ๋ธŒ ์ฑ„๋„, ์˜จ๋ผ์ธ ์ปค๋ฎค๋‹ˆํ‹ฐ

  • ๊ฐ์ฒด์ง€ํ–ฅ FE ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ Rune ๊ฐœ๋ฐœ

  • ํ•จ์ˆ˜ํ˜• ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ FxTS ์„ค๊ณ„ ์ฐธ์—ฌ

  • ํ•จ์ˆ˜ํ˜• ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ FxJS ๊ฐœ๋ฐœ

  • ํ•จ์ˆ˜ํ˜• ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์ฟผ๋ฆฌ ๋นŒ๋” FxSQL ๊ฐœ๋ฐœ

  • ํ•จ์ˆ˜ํ˜• DOM ์กฐ์ž‘ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ FxJS-DOM ๊ฐœ๋ฐœ

  • ์ €์„œ ํ•จ์ˆ˜ํ˜• ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

  • ํ•จ์ˆ˜ํ˜• ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŽ˜์ด์Šค๋ถ ๊ทธ๋ฃน ์šด์˜

  • ๋„ค์ด๋ฒ„, ๋„ฅ์Šจ, ์นด์นด์˜ค ๊ฐœ๋ฐœ์ž ๋Œ€์ƒ ๊ธฐ์ˆ  ๊ต์œก, ๊ธฐ์—… ์ถœ๊ฐ•

  • ๋‹ค์ˆ˜์˜ ์˜จ/์˜คํ”„๋ผ์ธ ๊ฐ•์˜

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

48๊ฐœ โˆ™ (6์‹œ๊ฐ„ 2๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!