์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(javascript) ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ES6 ๊ฐ•์ขŒ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œ์ค€ ECMAScript! ํฐ ๋ณ€ํ™”๊ฐ€ ์žˆ์—ˆ๊ณ , ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ถ•์ด ๋˜๋Š” ES2015 (ES6) ๋ฅผ ํ•™์Šตํ•˜๋Š” ๊ฐ•์ขŒ ์ž…๋‹ˆ๋‹ค. ์ด ๊ฐ•์ขŒ๋Š” ์ „์ฒด๋‚ด์šฉ์„ ๊ต๊ณผ์„œ์ ์œผ๋กœ ์ž์„ธํžˆ ์„ค๋ช…ํ•˜๋Š” ๋ฐฉ์‹์ด ์•„๋‹Œ, ๊ฐ feature๋ณ„ ์งง์€ ์‹ค์Šต์ฝ”๋“œ๋ฅผ ํ†ตํ•ด์„œ ์‹ค์ œ๋กœ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•˜๊ณ  ํ™œ์šฉํ•˜๋Š”์ง€๋ฅผ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฝ”๋“œ์Šค์ฟผ๋“œ์˜ ์œค์ง€์ˆ˜ Front-End ๋งˆ์Šคํ„ฐ๊ฐ€ ๊ฐ ๊ธฐ๋Šฅ์„ ์˜ˆ์ œ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ์ดํ•ดํ•˜๋Š” ์‹ค์Šตํ˜• ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค.

Thumbnail

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

1. ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ES6 ๊ฐ•์ขŒ ์†Œ๊ฐœ

javascript ํ‘œ์ค€์„ ์ •์˜ํ•˜๋Š” ECMAScript ์ค‘ ์ตœ๊ทผ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋ณ€ํ™”๋ฅผ ๊ฒช์—ˆ๋˜ ECMAScript 2015(์ดํ•˜ ES6) ๋ฅผ ํ•™์Šตํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค. ES6 ์—์„œ ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋œ syntax ์™€ ๊ธฐ๋Šฅ๋“ค์„ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด์„œ ์งš์–ด๋ณด๊ณ  ์‚ฌ์šฉํ•ด ๋ณด๋ฉด์„œ javascript ์˜ ์ด๋Ÿฐ์ €๋Ÿฐ ํŠน์ง•๋“ค์„ ์•Œ ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ํ•™์Šต ์ค‘๊ฐ„ ์ค‘๊ฐ„ '๋ฐฐ์—ด๋งŒ๋“ค๊ธฐ' ์™€  '๋กœ๋˜๋ฒˆํ˜ธ๋งŒ๋“ค๊ธฐ' ๋“ฑ์˜ ๊ฐ„๋‹จํ•œ ์‹ค์Šต ์˜ˆ์ œ๋“ค์„ ๋งŒ๋“ค์–ด, ์ƒ๊ฐํ•ด๋ณด๋ฉด์„œ ์ž๊ธฐ์˜ ๊ฒƒ์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ์‹ค์Šตํ˜• ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค.

์™œ ES6 ๋ฅผ ๋ฐฐ์›Œ์•ผ ํ•˜์ฃ ?

  • ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์„ ์œ„ํ•ด
  • ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ์ฝ”๋“œ๋ฅผ ์ฝ๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด
  • ํ˜„์žฌ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” javascript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ”„๋ ˆ์ž„์›Œํฌ(react, angular,vue ๋“ฑ๋“ฑ..) ๋Š” ๋Œ€๋ถ€๋ถ„ ES6 ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋‘ 
  • ์ƒˆ๋กœ์šด syntax๋กœ ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ ๊ฐœ๋ฐœ
  • ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์˜ ์‚ฌ์šฉ์œผ๋กœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๋ฒ—์–ด๋‚  ์ˆ˜ ์žˆ์Œ

2. ๋„์›€๋˜๋Š” ๋ถ„๋“ค

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ฐœ๋ฐœ์ž
  • ๋งŽ์ด ์“ฐ์ด๊ณ  ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์‹ถ์€ ๋ถ„
  • ES6 ์˜ ์ƒˆ๋กœ์šด ๋ถ€๋ถ„์„ ์•Œ๊ณ  ์‹ถ์€ ๋ถ„
  • javascript ์— ๋Œ€ํ•œ ์ดํ•ด๋„๊ฐ€ ์žˆ๋Š” ๋ถ„

3. ๊ฐ•์ขŒ ํŠน์ง•

  • ์˜ˆ์ œ ์ฝ”๋“œ๋ฅผ ํ†ตํ•œ ์‹ค์Šต ์ค‘์‹ฌ์˜ ๊ฐ•์ขŒ (์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ณธ์„ ํ•™์Šตํ•˜๊ณ  ์‹ถ์€ ๋ถ„๊ป˜๋Š” ๋งž์ง€ ์•Š์Šต๋‹ˆ๋‹ค.)
  • ๋‚œ์ด๋„ : ์ดˆ๊ธ‰~์ค‘๊ธ‰ (์ž…๋ฌธ์šฉ ์•„๋‹ˆ์—์š”.)
  • jsBin ์„ ํ†ตํ•ด ํ•™์Šต์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. (http://jsbin.com)

4. ๊ฐ•์‚ฌ์†Œ๊ฐœ

์œค์ง€์ˆ˜
๋„ค์ด๋ฒ„์—์„œ Core UI ๊ฐœ๋ฐœ๊ณผ ๊ฐœ๋ฐœํŒ€์žฅ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค. NEXT์—์„œ ์›น UI ์ „์ž„๊ต์ˆ˜๋ฅผ ํ•˜๋ฉฐ ์ธ์žฌ์–‘์„ฑ์„ ํ•˜๊ธฐ๋„ ํ–ˆ์œผ๋ฉฐ, SK Planet ์—์„œ ๊ธฐ์ˆ ๋ถ„์•ผ์˜ ์œ ์ผํ•œ Master๋ ˆ๋ฒจ๋กœ ๊ทผ๋ฌดํ–ˆ์Šต๋‹ˆ๋‹ค.
์‚ผ์„ฑ์ „์ž, ์”จํ‹ฐ์€ํ–‰, ์‚ผ์„ฑ์ƒ๋ช…, NAVER Technology service, ์œ„๋ฉ”ํ”„๋“ฑ ๊ตญ๋‚ด ์—ฌ๋ŸฌํšŒ์‚ฌ์—์„œ ์›นํ”„๋ก ํŠธ์—”๋“œ ๊ฐ•์˜ ๊ฒฝ๋ ฅ์ด ์žˆ์œผ๋ฉฐ, 2014๋…„์— NAVER ์‹ ์ž…์‚ฌ์›๊ต์œก, 2015๋…„ SK Planet ์‹ ์ž…์‚ฌ์› ๊ต์œก์„ ์„ค๊ณ„ํ•˜๊ณ  ๋ฉ˜ํ† ๋กœ ์ฐธ์—ฌํ–ˆ์Šต๋‹ˆ๋‹ค.
Deview 2016์—์„œ ์›นํ”„๋ก ํŠธ์—”๋“œ ๊ฐ•์˜๋ฅผ ํ•˜๊ธฐ๋„ ํ–ˆ์Šต๋‹ˆ๋‹ค. UX๋ฅผ ๊ณ ๋ คํ•œ ์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ๋ฐฉ๋ฒ•๊ณผ Cleanํ•œ ์›นํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ๋ฐฉ๋ฒ•์— ๊ด€์‹ฌ์ด ๋งŽ์œผ๋ฉฐ, ๋ถ€์ŠคํŠธ์ฝ”์Šค ์›นํ’€์Šคํƒ ๊ต์œก ์„ค๊ณ„/๊ฐ•์˜์ž ์ž…๋‹ˆ๋‹ค.
<๊ฐœ์ธ ์œ ํŠœ๋ธŒ ์ฑ„๋„ ๋งํฌ>

์ฝ”๋“œ์Šค์ฟผ๋“œ  ๊ฐœ๋ฐœ์ž ์ถœ์‹ ์˜ ๊ต์œก ์ „๋ฌธ๊ฐ€๋“ค์ด ๋งŒ๋“  ์ตœ๊ณ ํ’ˆ์งˆ์˜ ์†Œํ”„ํŠธ์›จ์–ด ๊ต์œก๊ธฐ๊ด€ http://codesquad.kr

์•ˆ๋…•ํ•˜์„ธ์š”
์œค์ง€์ˆ˜์ž…๋‹ˆ๋‹ค.

๊ณต๋™ ์ง€์‹๊ณต์œ ์ž

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

์ „์ฒด

44๊ฐœ โˆ™ (5์‹œ๊ฐ„ 14๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

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

๊ณต๊ฐœํ•˜์ง€ ์•Š๋Š” ๊ฐ•์˜๋กœ ์ˆ˜๊ฐ•์ด ์ œํ•œ๋ฉ๋‹ˆ๋‹ค.