Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
BEST

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

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ๋Œ€ํ•œ ๊นŠ์ด ์žˆ๋Š” ์ดํ•ด๋ฅผ ์›ํ•˜์‹œ๋Š” ๋ถ„์—๊ฒŒ ์ ํ•ฉํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. 2020๋…„ ๊ธฐ์ค€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ตœ์‹  ๋ฌธ๋ฒ•์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

Thumbnail

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

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

  • 2020๋…„ ๊ธฐ์ค€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ตœ์‹  ๋ฌธ๋ฒ•

  • ํด๋กœ์ €, ํ”„๋กœํ† ํƒ€์ž…, ํ”„๋กœ๋ฏธ์Šค ๋“ฑ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•ต์‹ฌ ๊ฐœ๋…

์ €์ž ์ง๊ฐ•! ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ๊ธฐ์ดˆ๋ถ€ํ„ฐ ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ๊นŒ์ง€ ํƒ„ํƒ„ํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด์„ธ์š”.

[์‹ค์ „ ๋ฆฌ์•กํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ] ๊ฐœ์ •ํŒ์„ 
๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“  ๊ฐ•์˜! ๐Ÿ“–

2020๋…„ 7์›”์— ์ถœํŒ๋œ ์ฑ…์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
๋น ๋ฅด๊ฒŒ ๋ฐœ์ „ํ•˜๋Š” ์›น ๊ธฐ์ˆ ์˜ ์ตœ์‹  ํŠธ๋ Œ๋“œ๋ฅผ ์ตํžˆ๋ ค๋ฉด ๊ฐ•์˜ ์ž๋ฃŒ์˜ ์ตœ์‹ ํ™”๊ฐ€ ๊ฐ€์žฅ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.
์ฑ…์˜ 2์žฅ [ES6+๋ฅผ ํ’ˆ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ๋งค๋ ฅ์ ์ธ ์–ธ์–ด๊ฐ€ ๋˜๋‹ค]๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
์ด ๊ฐ•์˜์—๋Š” ๋ฆฌ์•กํŠธ์™€ ๊ด€๋ จ๋œ ๋‚ด์šฉ์€ ์—†์œผ๋ฏ€๋กœ ๋ฆฌ์•กํŠธ์— ๊ด€์‹ฌ ์—†๋Š” ๋ถ„๋“ค๋„ ํŽธํ•˜๊ฒŒ ๋“ค์œผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โ–ฒ <์‹ค์ „ ๋ฆฌ์•กํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ> ๊ฐœ์ •ํŒ์ด ๊ถ๊ธˆํ•˜๋‹ค๋ฉด ์ฑ… ์ด๋ฏธ์ง€๋ฅผ ํด๋ฆญํ•ด์ฃผ์„ธ์š”.

์ด ๊ฐ•์˜์—์„œ ๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค โœ๏ธ

  • var, const, let,  ๋ณ€์ˆ˜ ์Šค์ฝ”ํ”„, ํ˜ธ์ด์ŠคํŒ…
  • ๋ถ€๋™์†Œ์ˆ˜์ , Safe Integer
  • template literals, ๋ฌธ์ž์—ด ๋ฉ”์„œ๋“œ
  • logical  operators, Nullish coalescing
  • spread operator, destructuring, optional chaining ๋“ฑ ๋ฐฐ์—ด๊ณผ ๊ฐ์ฒด์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ
  • ์ผ๊ธ‰ ํ•จ์ˆ˜, ํด๋กœ์ €, lexical environment ๋“ฑ์˜ ๊ฐœ๋…
  • rest parameters, named parameters ๋“ฑ์˜ ํ•จ์ˆ˜ ํŽธ์˜ ๊ธฐ๋Šฅ
  • ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์™€ ์ผ๋ฐ˜ ํ•จ์ˆ˜์˜ ์ฐจ์ด์ 
  • ํ”„๋กœ๋ฏธ์Šค, async await ๋“ฑ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋ฐฉ๋ฒ•
  • ์ œ๋„ˆ๋ ˆ์ดํ„ฐ, ํ”„๋กœํ† ํƒ€์ž…, ํด๋ž˜์Šค, ESM
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ƒํƒœ๊ณ„: ์›นํŒฉ, ๋ฐ”๋ฒจ, ํด๋ฆฌํ•„, eslint, prettier

์˜จ๋ผ์ธ ์‹ค์Šต ์ฝ”๋“œ ์ œ๊ณต โšก

๊ฐ•์˜์—์„œ ์‚ฌ์šฉ๋œ ๊ฑฐ์˜ ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ์˜จ๋ผ์ธ IDE(CodeSandbox)์—์„œ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!
๊ฐ ๊ฐ•์˜ ํ™”๋ฉด์—์„œ ํ•˜๋‹จ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.
์˜จ๋ผ์ธ์—์„œ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ˆ˜์ •ํ•˜๋ฉด์„œ ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ํ•™์Šต์— ํฐ ๋„์›€์ด ๋  ๊ฒƒ์œผ๋กœ ๊ธฐ๋Œ€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
>> ์ƒ˜ํ”Œ ๋งํฌ <<

๋ณต์Šต ํ€ด์ฆˆ ์ œ๊ณต ๐Ÿ’ฏ

๋งค ๊ฐ•์˜ ํ•™์Šต ํ›„์— ๋ณต์Šต์„ ์œ„ํ•œ ํ€ด์ฆˆ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
๊ฐ ๊ฐ•์˜ ํ™”๋ฉด์—์„œ ํ•˜๋‹จ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๊ฑฐ๋‚˜ ์•„๋ž˜ ๋งํฌ๋ฅผ ๋ถ๋งˆํฌ ํ•ด์ฃผ์„ธ์š”!
๊ฐ•์˜ ํ›„์— ํ—ท๊ฐˆ๋ฆฌ๋Š” ๋‚ด์šฉ์„ ๋‹ค์‹œ ํ•œ ๋ฒˆ ์ •๋ฆฌํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ง€๋Š” ๊ฒƒ์€ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.
>> ํ€ด์ฆˆ ์‚ฌ์ดํŠธ ๋งํฌ <<

์˜ˆ์ƒ ์งˆ๋ฌธ Q&A ๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ 

Q. ๋น„์ „๊ณต์ž๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋‚˜์š”?
A. ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ด ๋งŽ์ง€ ์•Š๋‹ค๋ฉด ์ถ”์ฒœํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ 1๋…„ ์ด์ƒ ์‚ฌ์šฉํ•ด ๋ณด์…จ๋‹ค๋ฉด ์ดํ•ดํ•˜์‹ค  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ์ด ๊ฐ•์˜๋งŒ์˜ ํŠน๋ณ„ํ•œ ์žฅ์ ์ด ์žˆ์„๊นŒ์š”?
A. ์ฑ…์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋Š” ๊ฐ•์˜์ธ ๋งŒํผ ์งœ์ž„์ƒˆ ์žˆ๋Š” ์ปค๋ฆฌํ˜๋Ÿผ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
๊ตฐ๋”๋”๊ธฐ ์—†์ด ํ•ต์‹ฌ์ ์ธ ๋‚ด์šฉ๋งŒ ์ „๋‹ฌ๋˜๋„๋ก ์˜์ƒ์„ ํŽธ์ง‘ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ํšจ์œจ์ ์œผ๋กœ ํ•™์Šตํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ์ž๋ง‰์„ ์ง€์›ํ•˜๋‚˜์š”?
A. ๋„ค, ๋ชจ๋“  ์˜์ƒ์— ์ž๋ง‰์„ ๋„ฃ์—ˆ์Šต๋‹ˆ๋‹ค.
์ „์ฒด์ ์œผ๋กœ ํฐ ํฐํŠธ ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋ฐ”์ผ๋กœ๋„ ํŽธํ•˜๊ฒŒ ํ•™์Šตํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ์ฑ…์„ ๊ตฌ๋งคํ•ด์•ผ ํ•˜๋‚˜์š”?
A. ์•„๋‹ˆ์š”, ์ฑ…์ด ์—†์–ด๋„ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

 

๋‹ค๋ฅธ ๊ฐ•์˜ ๋ณด๊ธฐ ๐Ÿ“š

์‹ค์ „ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ  ํ˜„์žฌ ๊ฐ•์˜ 
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ์ตœ์‹  ๋ฌธ๋ฒ•์œผ๋กœ ํ•ต์‹ฌ ๊ฐœ๋… ์ตํžˆ๊ธฐ
ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์‹œ์ž‘ํ•˜๊ธฐ
ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ, ๊ธฐ์ดˆ๋ถ€ํ„ฐ ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ๊นŒ์ง€

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

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

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์•Œ์ง€๋งŒ ์ข€ ๋” ๊นŠ์ด ์ดํ•ดํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

  • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ๋ฉด์ ‘์„ ์ค€๋น„ํ•˜๊ณ  ์žˆ๋Š” ๋ถ„

์•ˆ๋…•ํ•˜์„ธ์š”
์ด์žฌ์Šน์ž…๋‹ˆ๋‹ค.

1,986

๋ช…

์ˆ˜๊ฐ•์ƒ

147

๊ฐœ

์ˆ˜๊ฐ•ํ‰

307

๊ฐœ

๋‹ต๋ณ€

4.7

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

- [์‹ค์ „ ๋ฆฌ์•กํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ] ์ €์ž

- react contributor (PR ๋งํฌ)

- if kakao 2019 ์ปจํผ๋Ÿฐ์Šค์—์„œ [๋ฆฌ์•กํŠธ: ๊ทธ๊ฒƒ๋งˆ์ € ๊ฒฐ์ •ํ•ด์ฃผ๋งˆ] ๋ฐœํ‘œ

- ์นด์นด์˜คํŽ˜์ด์ง€ ๊ธ€๋กœ๋ฒŒ์›น ๊ฐœ๋ฐœ ์ค‘

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

์ „์ฒด

29๊ฐœ โˆ™ (3์‹œ๊ฐ„ 33๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

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