WEB/JavaScript

[JavaScript] JavaScript ๊ธฐ์ดˆ

developer of the night sky 2023. 10. 4. 15:30

๐Ÿ”ปfront-end๐Ÿ”ป

1. HTML

๋ธ”๋Ÿญํƒœ๊ทธ๋กœ ๊ณจ๊ฒฉ์„ ์ƒ์„ฑํ•œ๋‹ค.

์ธ๋ผ์ธํƒœ๊ทธ๋กœ ๋‚ด์šฉ๋ฌผ์„ ์ž‘์„ฑํ•œ๋‹ค.

 

2. CSS

์„œ์‹

 

3. JavaScript

ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ๋Šฅ

 

 

๐Ÿ”ปJavaScript๐Ÿ”ป

  • ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด
  • Netscape์—์„œ ์ž์‚ฌ ๋ธŒ๋ผ์šฐ์ €์— ๋™์ž‘ํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ๊ฐœ๋ฐœํ–ˆ๋‹ค.
  • ๊ธฐ๋Šฅ์ด ์ ์–ด ๊ฐ€๋ณ๊ณ  ์‰ฝ๋‹ค.
  • C ๊ณ„์—ด์˜ ์–ธ์–ด๋กœ ๊ธฐ๋ณธ ๊ตฌ๋ฌธ์ด ์ž๋ฐ”์™€ ์œ ์‚ฌํ•˜๋‹ค.
  • Java์™€๋Š” ๋ฌด๊ด€ํ•˜๋‹ค.
  • ์›๋ž˜๋Š” LiveScript๋ผ๊ณ  ๋ถˆ๋ ธ๋‹ค.

 

๐Ÿ”ปJavaScript์˜ ์—ญ์‚ฌ๐Ÿ”ป

  • ์ดˆ๋ฐ˜(1990๋…„๋Œ€) : ํผํƒœ๊ทธ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ + ๋งํฌ ์กฐ์ž‘ + ์ด๋ฏธ์ง€ ์กฐ์ž‘ ๋“ฑ ์ผ๋ถ€ ํƒœ๊ทธ์˜ BOM(Browser Object Model)์˜ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ–ˆ๋‹ค.
  • ์ค‘๋ฐ˜(~2014๋…„) : ๋ชจ๋“  ํƒœ๊ทธ๋ฅผ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” DOM(Document Object Model)์˜ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ–ˆ๋‹ค.
  • ํ›„๋ฐ˜(~ํ˜„์žฌ) : ES6(ECMA2015) > Modern JavaScript
    • ES6 > Node.js ์ถœ์‹œ
    • ๋น„ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์— JavaScript ๋™์ž‘
    • ์„œ๋ฒ„ ๊ตฌ์ถ• ๋ฐ ๊ธฐํƒ€ ํ”„๋กœ๊ทธ๋žจ์ด ์ œ์ž‘ ๊ฐ€๋Šฅํ•ด์กŒ๋‹ค.

 

๐Ÿ”ปJavaScript ํ•˜๋Š” ์ผ๐Ÿ”ป

1. ๊ธฐ๋ณธ์ ์ธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ์„œ์˜ ํ–‰๋™์„ ํ•œ๋‹ค.

  • ๋ณ€์ˆ˜, ์—ฐ์‚ฐ์ž, ์ œ์–ด๋ฌธ, ์กฐ์ž‘ ๋“ฑ

2. ๋ธŒ๋ผ์šฐ์ €์—๋งŒ ํ•  ์ˆ˜ ์žˆ๋Š” ํ–‰๋™

  • BOM, DOM
  • HTML/CSS ์กฐ์ž‘
    • 1) HTML Element ์ƒ์„ฑ/์ˆ˜์ •/์‚ญ์ œ
    • 2) HTML Attribute ์ƒ์„ฑ/์ˆ˜์ •/์‚ญ์ œ
    • 3) HTML PCDATA ์ƒ์„ฑ/์ˆ˜์ •/์‚ญ์ œ
    • 4)CSS ์†์„ฑ(๊ฐ’) ์ƒ์„ฑ/์ˆ˜์ •/์‚ญ์ œ
    • 5) ํผ ํƒœ๊ทธ ์กฐ์ž‘(์œ ํšจ์„ฑ ๊ฒ€์‚ฌ)
    • 6) ์ด๋ฏธ์ง€ ์กฐ์ž‘
    • 7) ๋งํฌ ์กฐ์ž‘
    • 8) ๊ธฐํƒ€ ๊ฐ์ฒด ์กฐ์ž‘

3. ์„œ๋ฒ„ ์ œ์ž‘, ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ์ œ์ž‘

  • Node.js > ECMAScript
  • Flash > ActionScript (ํ˜„์žฌ๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค)

4. ํ™•์žฅ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

  • jQuery

5. JavaScript Framework

  • Angular
  • React
  • Vue.js