ํ‹ฐ์Šคํ† ๋ฆฌ ๋ทฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํƒ„์ƒ

๋ณดํ†ต ์–ธ์–ด๊ฐ€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•œ ๋ฒ”์šฉ์ ์ธ ์šฉ๋„๋กœ ์„ค๊ณ„๋˜๋Š” ๋ฐ˜๋ฉด, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์›นํŽ˜์ด์ง€์˜ ๋‹จ์ˆœํ•œ ๋ณด์กฐ ๊ธฐ๋Šฅ์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ์ œํ•œ์ ์ธ ์šฉ๋„๋กœ ํƒ„์ƒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

 

1995๋…„, ์›น ๋ธŒ๋ผ์šฐ์ € ์‹œ์žฅ์„ ์ง€๋ฐฐํ•˜๋˜ ๋„ท์Šค์ผ€์ดํ”„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ฆˆ๊ฐ€ ๋ธŒ๋ Œ๋˜ ์•„์ดํฌ๊ฐ€ ๊ฐœ๋ฐœํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋„์ž…ํ•˜๋ฉฐ ์‹œ์ž‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

 

์ดˆ๊ธฐ์—” ๋ชจ์นด๋กœ ๋ช…๋ช…๋˜์—ˆ์œผ๋‚˜ ์ถ”ํ›„ ๋ผ์ด๋ธŒ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ฑฐ์ณ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ผ๋Š” ์ตœ์ข… ์ด๋ฆ„์ด ํƒ„์ƒํ•˜์˜€์Šต๋‹ˆ๋‹ค.

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

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ‘œ์ค€ํ™”

1996๋…„ 8์›”, ๋„ท์Šค์ผ€์ดํ”„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ฆˆ์™€ ๊ฒฝ์Ÿ์‚ฌ์˜€๋˜ ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŒŒ์ƒ ๋ฒ„์ „์ธ JScript๋ฅผ IE 3.0์— ํƒ‘์žฌํ•˜๋ฉฐ ํ‘œ์ค€ํ™”์˜ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์˜€์Šต๋‹ˆ๋‹ค. JScript๋Š” ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์˜ ๋ธŒ๋ผ์šฐ์ € ์‹œ์žฅ ์ ์œ ์œจ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด ํƒ„์ƒํ•˜์˜€์œผ๋ฏ€๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ์ผ๋ถ€ ํ˜ธํ™˜๋˜์–ด ๋ธŒ๋ผ์šฐ์ €์— ๋”ฐ๋ผ ์›นํŽ˜์ด์ง€๊ฐ€ ๋™์ž‘ํ•˜์ง€ ์•Š๊ธฐ๋„ ํ•˜๋Š” "ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์ด์Šˆ"๊ฐ€ ๋ฐœ์ƒํ•˜์˜€์Šต๋‹ˆ๋‹ค. 

 

๋”ฐ๋ผ์„œ 1997๋…„ 7์›”, ECMA ์ธํ„ฐ๋‚ด์…”๋„ ๋น„์˜๋ฆฌ ํ‘œ์ค€ํ™” ๊ธฐ๊ตฌ์—์„œ ํ‘œ์ค€ํ™”๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์ธ ECMAScript(ES)๋ฅผ ๊ณต๊ฐœํ•˜์˜€์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ์—” 2015๋…„์— ๊ณต๊ฐœ๋œ ES6์„ ๊ธฐ๋ฐ˜์œผ๋กœ let/const ํ‚ค์›Œ๋“œ, ํ™”์‚ดํ‘œ ํ•จ์ˆ˜, ํด๋ž˜์Šค, ๋ชจ๋“ˆ ๋“ฑ๊ณผ ๊ฐ™์ด ๋ฒ”์šฉ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ์„œ ๊ฐ–์ถฐ์•ผ ํ•  ๊ธฐ๋Šฅ๋“ค์„ ๋Œ€๊ฑฐ ๋„์ž…๋œ ES6 ์ดํ›„ ๋ฒ„์ „๋“ค์ด ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ฑ์žฅ์˜ ์—ญ์‚ฌ

์ดˆ์ฐฝ๊ธฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์ „๋‹ฌ๋ฐ›์€ HTML๊ณผ CSS๋ฅผ ๋‹จ์ˆœํžˆ *๋ Œ๋”๋งํ•˜๋Š” ์ˆ˜์ค€์ด์—ˆ์ง€๋งŒ Ajax, jQuery, V8, Node.js, SPA๋“ฑ์˜ ๋“ฑ์žฅ์œผ๋กœ ์ธํ•ด ๊พธ์ค€ํžˆ ๋ฐœ์ „ํ•ด ์™”์Šต๋‹ˆ๋‹ค.

 

*๋ Œ๋”๋ง : HTML, CSS, JS๋กœ ์ž‘์„ฑ๋œ ๋ฌธ์„œ๋ฅผ ํ•ด์„ํ•ด์„œ ๋ธŒ๋ผ์šฐ์ €์— ์‹œ๊ฐ์ ์œผ๋กœ ์ถœ๋ ฅ

 

Ajax(Asynchronous JavaScript and XML)

  • 1999๋…„์— XMLHttpRequest๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ๋“ฑ์žฅ
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด ์„œ๋ฒ„์™€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋น„๋™๊ธฐ ๋ฐฉ์‹์œผ๋กœ ๋ฐ์ดํ„ฐ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ œ๊ณต
  • ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ์ „์†ก๋ฐ›์•„ ๋ถ€๋ถ„ ๋ Œ๋”๋ง์ด ๊ฐ€๋Šฅํ•ด์ง (์ด์ „์—” HTML์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ์ „์†ก๋ฐ›์•„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ๋ Œ๋”๋งํ•ด์•ผํ•˜๋Š” ๋ฐฉ์‹)
  • ๊ตฌ๊ธ€ ๋งต์Šค์— ๋„์ž…๋ฉฐ ์ด๋ฅผ ํ†ตํ•ด ๋ฐ์Šคํฌํ†ฑ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ์œ ์‚ฌํ•œ ๋น ๋ฅธ ์„ฑ๋Šฅ๊ณผ ๋ถ€๋“œ๋Ÿฌ์šด ํ™”๋ฉด ์ „ํ™˜์„ ๋ณด์—ฌ์คŒ

jQuery

  • 2006๋…„ ๋“ฑ์žฅ
  • DOM(Document Object Model)์„ ๋”์šฑ ์‰ฝ๊ฒŒ ์ œ์–ด
  • ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์ด์Šˆ๋ฅผ ์–ด๋Š์ •๋„ ํ•ด๊ฒฐ
  • ๋ฐฐ์šฐ๊ธฐ ์‰ฝ๊ณ  ์ง๊ด€์ ์ž„
  • ํ˜„์žฌ๋Š” ์‚ฌ์šฉ ๋นˆ๋„๊ฐ€ ๋งŽ์ด ์ค„์—ˆ๋‹ค๊ณ  ์•Œ๊ณ ์žˆ์Œ

V8 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„

  • ๋น ๋ฅด๊ฒŒ ๋™์ž‘ํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์˜ ํ•„์š”์„ฑ์„ ์ถฉ์กฑ
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐ์Šคํฌํ†ฑ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ์œ ์‚ฌํ•œ UX์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ ์ •์ฐฉ์‹œํ‚ด
  • FE ์˜์—ญ์ด ์ฃผ๋ชฉ๋ฐ›๋Š” ๊ณ„๊ธฐ

Node.js

  • 2009๋…„ ๋ผ์ด์–ธ ๋‹ฌ์ด ๋ฐœํ‘œ
  • ๊ตฌ๊ธ€ V8 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์œผ๋กœ ๋นŒ๋“œ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋…๋ฆฝ์‹œํ‚จ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ํ™˜๊ฒฝ(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ธŒ๋ผ์šฐ์ € ์ด์™ธ์˜ ํ™˜๊ฒฝ์—์„œ๋„ ๋™์ž‘)
  • ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— ์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋ฉฐ, ์ด์— ํ•„์š”ํ•œ ๋ชจ๋“ˆ๊ณผ ํŒŒ์ผ ์‹œ์Šคํ…œ๊ณผ HTTP ๋“ฑ ๋‚ด์žฅ API๋ฅผ ์ œ๊ณตํ•จ
  • ๋น„๋™๊ธฐ I/O๋ฅผ ์ง€์›ํ•˜๊ณ  ๋‹จ์ผ ์Šคํ…Œ๋“œ ์ด๋ฒคํŠธ ๋ฃจํ”„ ๊ธฐ๋ฐ˜ ๋™์ž‘ํ•˜์—ฌ ์š”์ฒญ ์ฒ˜๋ฆฌ ์„ฑ๋Šฅ์ด ์ข‹์Œ

SPA(Single Page Application) ํ”„๋ ˆ์ž„์›Œํฌ

  • CBD(Component based development)๋ฐฉ๋ฒ•๋ก ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ
  • ๋ณ€๊ฒฝ์— ์œ ์—ฐํ•˜๋ฉฐ ํ™•์žฅํ•˜๊ธฐ ์‰ฌ์šด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์•„ํ‚คํ…์ณ๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•ด ํƒ„์ƒ
  • SPA๊ฐ€ ๋Œ€์ค‘ํ™”๋˜๋ฉฐ Angular, React, Vue.js, Svelte ๋“ฑ ๋‹ค์–‘ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ฒŒ ๋จ

ECMAScript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ‘œ์ค€ ์‚ฌ์–‘์ธ ECMA-262๋กœ, ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์˜ ๊ฐ’, ํƒ€์ž…, ๊ฐ์ฒด, ํ”„๋กœํผํ‹ฐ, ํ•จ์ˆ˜, ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด ๋“ฑ ํ•ต์‹ฌ ๋ฌธ๋ฒ•์„ ๊ทœ์ •ํ•ฉ๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ๊ธฐ๋ณธ ๋ผˆ๋Œ€์ธ ECMAScript์™€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ณ„๋„ ์ง€์›ํ•˜๋Š” ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ Web API(Dom, XMLHttpRequest, fetch, Web Storage, Web Component ... ) ๋“ฑ์„ ํฌํ•จํ•œ ๊ฐœ๋…์ž…๋‹ˆ๋‹ค.

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŠน์ง•

์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ์œ ์ผํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด

HTML, CSS์™€ ํ•จ๊ป˜ ์›น์„ ๊ตฌ์„ฑํ•˜๋Š” ์š”์†Œ ์ค‘ ํ•˜๋‚˜๋กœ ๋‹ค๋ฅธ ์–ธ์–ด์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๊ธฐ์กด์˜ ์–ธ์–ด๋“ค์—์„œ ๋งŽ์€ ์˜ํ–ฅ์„ ๋ฐ›์•„์„œ C, ์ž๋ฐ”์™€ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์ด ์œ ์‚ฌํ•˜๊ณ  ์…€ํ”„์—์„œ ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ์ƒ์†์„, ์Šคํ‚ด์—์„œ ์ผ๊ธ‰ ํ•จ์ˆ˜(์ผ๊ธ‰ ๊ฐ์ฒด)์˜ ๊ฐœ๋…์„ ์ฐจ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.

 

์ธํ„ฐํ”„๋ฆฌํ„ฐ ์–ธ์–ด

๋˜ํ•œ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ณ€๋„์˜ ์ปดํŒŒ์ผ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š๋Š” ์ธํ„ฐํ”„๋ฆฌํ„ฐ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์ธํ„ฐํ”„๋ฆฌํ„ฐ์™€ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ์žฅ์ ์„ ๊ฒฐํ•ฉํ•ด, ์ธํ„ฐํ”„๋ฆฌํ„ฐ์˜ ๋Š๋ฆฐ ์‹คํ–‰์†๋„๋ฅผ ๊ทน๋ณตํ•˜์˜€์Šต๋‹ˆ๋‹ค.

 

๋ฉ€ํ‹ฐ ํŒจ๋Ÿฌ๋‹ค์ž„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด

๋ช…๋ นํ˜•, ํ•จ์ˆ˜ํ˜•, ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ง€์›ํ•˜๋Š” ๋ฉ€ํ‹ฐ ํŒจ๋Ÿฌ๋‹ค์ž„ ์–ธ์–ด์ž…๋‹ˆ๋‹ค.

 

*ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„์— ๊ด€ํ•ด์„œ ๋” ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ณ  ์‹ถ๋‹ค๋ฉด ์•„๋ž˜์˜ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

https://j-su2.tistory.com/35

 

[Design Pattern] OOP์™€ FP

OOP๋ž€? OOP๋Š” Object Oriented Programming์˜ ์•ฝ์ž๋กœ ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๋œปํ•ฉ๋‹ˆ๋‹ค. class์™€ object์— ๊ธฐ๋ฐ˜ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„(๋””์ž์ธ ํŒจํ„ด)์œผ๋กœ, ๊ด€๋ จ๋œ ๋ฐ์ดํ„ฐ๋ผ๋ฆฌ ๋ฌถ์–ด์„œ class๋ฅผ ํ˜•์„ฑํ•˜๊ณ  ๊ทธ ์•ˆ์—

j-su2.tistory.com

 

 

 

 

[์ถœ์ฒ˜] ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive

https://wikibook.co.kr/mjs/

 

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive: ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ๋™์ž‘ ์›๋ฆฌ

269๊ฐœ์˜ ๊ทธ๋ฆผ๊ณผ ์›๋ฆฌ๋ฅผ ํŒŒํ—ค์น˜๋Š” ์„ค๋ช…์œผ๋กœ ‘์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ๋™์ž‘ ์›๋ฆฌ’๋ฅผ ์ดํ•ดํ•˜์ž! ์›นํŽ˜์ด์ง€์˜ ๋‹จ์ˆœํ•œ ๋ณด์กฐ ๊ธฐ๋Šฅ์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์ œํ•œ์ ์ธ ์šฉ๋„๋กœ ํƒœ์–ด๋‚œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ณผ๋„

wikibook.co.kr