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

Javascript ES6+ ์ œ๋Œ€๋กœ ์•Œ์•„๋ณด๊ธฐ - ์ค‘๊ธ‰

ES6+ ์ œ๋Œ€๋กœ ์•Œ์•„๋ณด๊ธฐ ๊ฐ•์ขŒ๋Š” Javascript์˜ ES6 ๋ฐ ์ดํ›„์˜ ํ‘œ์ค€ ECMAScript ๋ช…์„ธ์— ๋Œ€ํ•˜์—ฌ ์ด๋ก ์„ ๋ฐ”ํƒ•์œผ๋กœ ES5์™€ ๋‹ฌ๋ผ์ง„ ์  ๋ฐ ๊ฐœ๋…๊ณผ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ๊นŠ์ด ์žˆ๊ฒŒ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค.

Thumbnail

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

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

  • Javascript ES6+ Class

  • Javascript ES6+ Iterator

  • Javascript ES6+ Generator

  • Javascript ES6+ Promise

Javascript ES6+๋Š” ๋ญ๊ฐ€ ๋‹ค๋ฅผ๊นŒ?
๋„ค์ด๋ฒ„ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋ฐฐ์šฐ๋Š” ES6+์˜ ์ •์„

Javascript ES6+ Flow : ์ค‘๊ธ‰

ใ€ŠES6+ ์ œ๋Œ€๋กœ ์•Œ์•„๋ณด๊ธฐใ€‹์—์„œ๋Š” Javascript์˜ ES6 ๋ฐ ์ดํ›„์˜ ํ‘œ์ค€ ECMAScript ๋ช…์„ธ์— ๋Œ€ํ•˜์—ฌ ์ด๋ก ์„ ๋ฐ”ํƒ•์œผ๋กœ ES5์™€ ๋‹ฌ๋ผ์ง„ ์  ๋ฐ ๊ฐœ๋…๊ณผ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ๊นŠ์ด ์žˆ๊ฒŒ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค.

๋ชจ๋˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ์˜ ๋™์ž‘ ๊ณผ์ •์„ ์ง์ ‘ ๋ˆˆ์œผ๋กœ ํ™•์ธํ•˜๋ฉฐ, ์‹ค๋ฌด์— ์ ํ•ฉํ•œ ๋‹ค์–‘ํ•œ ์˜ˆ์ œ๋“ค์„ ํ†ตํ•ด ์ข‹์€ ์ฝ”๋”ฉ์„ ํ•˜๊ธฐ ์œ„ํ•œ ํŒ๊ณผ ํ•™์Šต์š”๋ น์„ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค. (๋‹จ, ์ด ๊ฐ•์˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž…๋ฌธ ๊ฐ•์˜๋Š” ์•„๋‹™๋‹ˆ๋‹ค.)


์ด ๊ฐ•์˜์—๋Š”
์ด๋Ÿฐ ํŠน์ง•์ด ์žˆ์Šต๋‹ˆ๋‹ค

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

์›๋ฆฌ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ๋‹ค์–‘ํ•œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ES6๋ฅผ ํ•™์Šตํ•ด๋ณด์„ธ์š”:)

์ด ๊ฐ•์˜๋Š”
์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ๋„์›€๋ฉ๋‹ˆ๋‹ค

์ดˆ๊ธ‰ํŽธ์„ ์ˆ˜๊ฐ•ํ•˜์…จ๊ฑฐ๋‚˜, ํ•ด๋‹น ๋‚ด์šฉ์„ ๋ชจ๋‘ ์ดํ•ดํ•˜๊ณ  ๊ณ„์‹  ๋ถ„

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
(ํ”„๋ก ํŠธ์—”๋“œ)
๊ฐœ๋ฐœ์ž

ES6+ ํ™˜๊ฒฝ์—์„œ ReactJS, VueJS, Typescript ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ๋Š” ๋ถ„

์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜์ง€ ๋ชปํ•œ ์ฑ„๋กœ ํ™œ์šฉํ•˜๊ธฐ์— ๊ธ‰๊ธ‰ํ•˜์—ฌ ์ž์‹ ๊ฐ์ด ์—†๊ฑฐ๋‚˜ ๊ธฐ๋ณธ๊ธฐ์— ๋Œ€ํ•œ ๊ฐˆ์ฆ์„ ๋Š๋ผ์‹œ๋Š” ๋ถ„

์ฐธ๊ณ  ์‚ฌํ•ญ

  • ใ€Šํ•ต์‹ฌ๊ฐœ๋…์„ ์•Œ์•„๋ณด๋Š” Javascript Flowใ€‹ ๊ฐ•์˜ ์ปค๋ฆฌํ˜๋Ÿผ์ƒ์˜ ๋‚ด์šฉ์„ ๋ชจ๋‘ ์ดํ•ดํ•˜๊ณ  ๊ณ„์‹  ๋ถ„(์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ์˜ ๋™์ž‘์›๋ฆฌ, ํ˜ธ์ด์ŠคํŒ…, ์Šค์ฝ”ํ”„, ์‹คํ–‰์ปจํ…์ŠคํŠธ, this ๋ฐ”์ธ๋”ฉ, ํด๋กœ์ €, ํ”„๋กœํ† ํƒ€์ž… ๋ฐ ํด๋ž˜์Šค ์ƒ์† ๋“ฑ์— ๋Œ€ํ•œ ์‚ฌ์ „์ง€์‹์ด ์žˆ๋Š” ๋ถ„)์€ ๋‚ด์šฉ์„ ๋ณด๋‹ค ์ˆ˜์›”ํ•˜๊ฒŒ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ํ•œํŽธ ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ์‚ฌ์ „์ง€์‹์ด ์—†๋Š” ๋ถ„์˜ ๊ฒฝ์šฐ ์ดํ•ด์— ์–ด๋ ค์›€์ด ๋”ฐ๋ฅด๊ฒŒ ๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ทธ๋Ÿฐ ๋ถ„๋“ค๊ป˜์„œ๋Š” ES6+ ์ œ๋Œ€๋กœ ์•Œ์•„๋ณด๊ธฐ ์ดˆ๊ธ‰ ๊ณผ์ •์„ ์„ ์ˆ˜๊ฐ•ํ•ด์ฃผ์‹ค ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
  • ์ปค๋ฆฌํ˜๋Ÿผ์ƒ์˜ ๋‚ด์šฉ์„ ๋ชจ๋‘ ์•Œ๊ณ  ๊ณ„์‹  ๋ถ„์—๊ฒŒ๋Š” ์ ํ•ฉํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜์™€
์—ฐ๊ด€๋œ ๊ฐ•์˜

์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ „์ฒด๋ฅผ ๊ด€ํ†ตํ•˜๋Š” ํ•ต์‹ฌ ๊ฐœ๋…

Javascript ES6+ - ์ดˆ๊ธ‰

  • ES6 ์ดํ›„์˜ ํ‘œ์ค€ ECMAScript ๋ช…์„ธ ๋ฐ ์ด๋ก 
  • ES5์™€์˜ ์ฐจ์ด์ , ๊ฐœ๋… ๋ฐ ๋™์ž‘ ์›๋ฆฌ

Javascript ES6+ - ๋ณด๋„ˆ์Šค

  • ES2015์˜ proxy, module ๋“ฑ์˜ ๊ธฐํƒ€ ๊ธฐ๋Šฅ
  • ES2016, ES2017, ES2018์—์„œ ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ

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

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

  • ES6+ ์ œ๋Œ€๋กœ ์•Œ์•„๋ณด๊ธฐ ์ดˆ๊ธ‰ ๊ณผ์ •์„ ์ˆ˜๊ฐ•ํ•˜์…จ๊ฑฐ๋‚˜, ํ•ด๋‹น ๋‚ด์šฉ์„ ๋ชจ๋‘ ์ดํ•ดํ•˜๊ณ  ๊ณ„์‹  ๋ถ„

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ (ํ”„๋ก ํŠธ์—”๋“œ) ๊ฐœ๋ฐœ์ž

  • ES6+ ํ™˜๊ฒฝ์—์„œ ReactJS, VueJS, Typescript ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ๋Š” ๋ถ„

  • ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜์ง€ ๋ชปํ•œ ์ฑ„๋กœ ํ™œ์šฉํ•˜๊ธฐ์— ๊ธ‰๊ธ‰ํ•˜์—ฌ ์ž์‹ ๊ฐ์ด ์—†๊ฑฐ๋‚˜ ๊ธฐ๋ณธ๊ธฐ์— ๋Œ€ํ•œ ๊ฐˆ์ฆ์„ ๋Š๋ผ์‹œ๋Š” ๋ถ„

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

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

์•ˆ๋…•ํ•˜์„ธ์š”
์ •์žฌ๋‚จ์ž…๋‹ˆ๋‹ค.

31,229

๋ช…

์ˆ˜๊ฐ•์ƒ

633

๊ฐœ

์ˆ˜๊ฐ•ํ‰

389

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

11

๊ฐœ

๊ฐ•์˜

์•ˆ๋…•ํ•˜์„ธ์š”, ์‹œ๋‹ˆ์–ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ •์žฌ๋‚จ ์ž…๋‹ˆ๋‹ค.
์„œ๋กœ ๋•๊ณ  ํ•จ๊ป˜ ๋ฐœ์ „ํ•˜๋Š” ๊ฑด์ „ํ•œ ๊ณต์œ ๋ฌธํ™”๋ฅผ ์ง€ํ–ฅํ•˜์—ฌ ๋‹ค์–‘ํ•œ ํ™œ๋™์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ €์„œ: ์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

์œ ํŠœ๋ธŒ ์ฑ„๋„: FE์žฌ๋‚จ

์•„ํ‹ฐํด ๋ฐ ์ธํ„ฐ๋ทฐ ์˜์ƒ:

๋”๋ณด๊ธฐ

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

์ „์ฒด

24๊ฐœ โˆ™ (3์‹œ๊ฐ„ 51๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

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

์ˆ˜๊ฐ•ํ‰

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