JJ_CAMP

Fast Campus

๐Ÿ’ก JavaScript & jQuery ์ •๋ณต CAMP ๐Ÿ”—

JJ Camp

ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๊ฐ€์žฅ ๋†’์€ ๋ฒฝ! JavaScript๋ฅผ ๊ทน๋ณตํ•˜์ž! 7์ „ 8๊ธฐ JavaScript ์˜ ๋ฒฝ์— ์ขŒ์ ˆํ–ˆ๋˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž, ๋””์ž์ด๋„ˆ๋ถ„๋“ค์ด์—ฌ ๋‹ค์‹œ ํ•œ ๋ฒˆ ์ผ์–ด๋‚˜์„ธ์š”! 12์ฃผ ๋™์•ˆ JavaScript๋ฅผ ๋ˆ์งˆ๊ธฐ๊ฒŒ ๋ฌผ๊ณ  ๋Š˜์–ด์ ธ, ์ •๋ณตํ•˜๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค.

๐ŸŽต ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ์ž…๋ฌธ ํ–ˆ์ง€๋งŒ, ์—ญ์‹œ๋‚˜ ๋ฌธ์ œ๋Š” JavaScript!

HTML, CSS ๋Š” ๊ทธ๋Ÿญ์ €๋Ÿญ ์•Œ๊ฒ ๋Š”๋ฐ JavaScript ์ปค๋ฆฌํ˜๋Ÿผ๋งŒ ์ง„์ž…ํ•˜๋ฉด ๋ฉ˜๋ถ•์— ๋น ์ง€๊ณ , ํฌ๊ธฐํ•ด๋ฒ„๋ฆฌ๊ฒŒ ๋๋˜ ๋‹น์‹ ! JavaScript๋ฅผ ํฌ๊ธฐํ•˜์ž๋‹ˆ ๋‚ด๊ฐ€ ํ”„๋ก ํŠธ์—”๋“œ ์˜์—ญ์—์„œ ํ•  ์ˆ˜ ์žˆ๋Š” ์ผ์€ ์ ์  ์ค„์–ด๋“ญ๋‹ˆ๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ JavaScript ๋Š” ์ ์  ๋” ๋ฐœ์ „ํ•˜์—ฌ Back-end ๊นŒ์ง€ ๋„˜์–ด๊ฐ€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ์ด๋ผ๋„ ์–ด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ •๋ณตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค!

๐ŸŽต ๊ฐ์ฒด์ง€ํ–ฅ 8์ฃผ ์ง‘์ค‘ ๊ฐ•์˜์™€ jQuery๊นŒ์ง€! ๋ชจ๋ž˜์„ฑ ๊ฐ™์•˜๋˜ JS๋ฅผ 10์ฃผ ์•ˆ์— ์›€์ผœ์ฅ๋Š” ๊ฐ•์˜

์•ผ๋ฌด ๊ฐ•์‚ฌ๋‹˜๊ณผ ํ•จ๊ป˜ JavaScript ๋งŒ์„ ์œ„ํ•œ, JavaScript ์— ์˜ํ•œ, JavaScript ์— ๊ด€ํ•œ ๋ชจ๋“  ๊ฒƒ์„ ์–ป์–ด๊ฐˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„์ฃผ ์ƒ์„ธํ•œ ๊ฐ์ฒด์ง€ํ–ฅ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ์ข…์ฃผ์—๋Š” ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์— ๋Œ€ํ•œ ์ ‘๊ทผ๊นŒ์ง€ ๋ฐฐ์›€์œผ๋กœ์จ ์ง€๊ธ‹์ง€๊ธ‹ํ–ˆ๋˜ JavaScript ๋ฉ˜๋ถ•์‚ฌํƒœ๋ฅผ ์ •๋ณตํ•˜๊ณ  ์‹ ์„ธ๊ณ„๋ฅผ ์—ด์–ด์ฃผ๊ณ ์ž ํ•˜๋Š” ๊ฐ•์˜!

๐ŸŽต JavaScript Framework์˜ ๋” ๋„“์€ ์„ธ๊ณ„๊นŒ์ง€ ์†Œ๊ฐœ

React.js, Angular.js ์™€ ๊ฐ™์€ JavaScript Framework ๋ฅผ ์†Œ๊ฐœํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค. 12์ฃผ ํ›„, JavaScript ๋Š” ๊ฑฐ๋“ค ๋ฟ! JavaScript ์— ๊ณ ์ƒ๋ฐ›๋˜ ๋‹น์‹ ์€ ์˜จ๋ฐ ๊ฐ„๋ฐ ์—†๊ณ , ์—…๋ฌด ์†๋„๋Š” ํ•˜๋Š˜์„ ๋‚ ์•„๋‹ค๋‹ˆ๊ณ  ์žˆ์„ ๊ฒ๋‹ˆ๋‹ค.์ง€๊ธˆ ๋ฐ”๋กœ ํ•ฉ๋ฅ˜ํ•˜์„ธ์š”!

Pre-Survey :octocat:

์ˆ˜๊ฐ•์ƒ ์ˆ˜์ค€์„ ํŒŒ์•…ํ•˜์—ฌ ์ง„๋„ ๋‚œ์ด๋„๋ฅผ ์„ค์ •ํ•˜๊ธฐ ์œ„ํ•œ ์‚ฌ์ „ ์„ค๋ฌธ.

ํ”„๋ฆฌ์„œ๋ฒ ์ด

๐ŸŒœ JavaScript ์‹œ์ž‘ํ•˜๊ธฐ

  • ํด๋ผ์ด์–ธํŠธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ™˜๊ฒฝ
  • ๋ธŒ๋ผ์šฐ์ €๊ฐ์ฒด๋ชจ๋ธ(BOM)
  • ๋ฌธ์„œ๊ฐ์ฒด๋ชจ๋ธ(DOM) : ์„ ํƒ/ํƒ์ƒ‰
  • ์„ ํƒ/ํƒ์ƒ‰๊ณผ ๊ด€๋ จํ•œ ํ—ฌํผ ํ•จ์ˆ˜ ๋งŒ๋“ค๊ธฐ

๐ŸŒœ JavaScript ํ•ต์‹ฌ ์ •๋ณต๊ธฐ

  • ๋ฌธ์„œ๊ฐ์ฒด๋ชจ๋ธ(DOM) : ์กฐ์ž‘
  • ์กฐ์ž‘๊ณผ ๊ด€๋ จํ•œ ํ—ฌํผ ํ•จ์ˆ˜ ๋งŒ๋“ค๊ธฐ

๐ŸŒœ JavaScript ํ•ต์‹ฌ ์ •๋ณต๊ธฐ

  • ๋ฌธ์„œ๊ฐ์ฒด๋ชจ๋ธ (DOM) : ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง
  • ์ด๋ฒคํŠธ ๋ชจ๋ธ : ๊ตฌํ˜• VS ์ง„๋ณด
  • ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์ด๋ฒคํŠธ ํ—ฌํผ ํ•จ์ˆ˜ ๋งŒ๋“ค๊ธฐ

๐ŸŒœ JavaScript ํ•ต์‹ฌ ์ •๋ณต๊ธฐ

  • ๋ฌธ์„œ๊ฐ์ฒด๋ชจ๋ธ(DOM) : ์Šคํƒ€์ผ ์ œ์–ด(GET/SET) ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์Šคํƒ€์ผ ์ œ์–ด ํ—ฌํผ ํ•จ์ˆ˜ ๋งŒ๋“ค๊ธฐ

๐ŸŒœ JavaScript ๊ฐ์ฒด ์ •๋ณต

  • ์ƒ์„ฑ์ž์™€ ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด
  • ๋ฆฌํ„ฐ๋Ÿด ํ‘œํ˜„์‹
  • ๊ฐ์ฒด ์ธ์Šคํ„ด์Šค ์œ ํ˜• ์ฒดํฌ
  • ์ •ํ™•ํ•œ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฐ์ฒด ํŒ๋ณ„ ํ—ฌํผ ํ•จ์ˆ˜ ๋งŒ๋“ค๊ธฐ
  • ๋‚ด์žฅ ์ƒ์„ฑ์ž์™€ ํ”„๋กœํ† ํƒ€์ž… ๋ฉค๋ฒ„
  • ๊ณต์ธ๋œ ๋‚ด์žฅ ํ”„๋กœํ† ํƒ€์ž… ํ™•์žฅ
  • Object, Function ๊ฐ์ฒด
  • ํ•จ์ˆ˜, ์Šค์ฝ”ํ”„, ์ปจํ…์ŠคํŠธ, ํ˜ธ์ด์ŠคํŠธ, ํด๋กœ์ €

๐ŸŒœ JavaScript ์˜ ๋‹ค์–‘ํ•œ ๋„ค์ดํ‹ฐ๋ธŒ ๊ฐ์ฒด

  • Array, String ๊ฐ์ฒด
  • Number, Boolean ๊ฐ์ฒด
  • Math, Date, RegExp ๊ฐ์ฒด

๐ŸŒœ ๊ฐ์ฒด ์ง€ํ–ฅ JavaScript ์ •๋ณต ์™„๋ฃŒ!

  • ์‚ฌ์šฉ์ž ์ •์˜ ์ƒ์„ฑ์ž์™€ ํ”„๋กœํ† ํƒ€์ž…
  • ํ”„๋กœํ† ํƒ€์ž… ํ™•์žฅ
  • ๊ฐ์ฒด ์ง€ํ–ฅ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • ๊ฐ์ฒด ์ง€ํ–ฅ์„ ์†์‰ฝ๊ฒŒ ํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ œ์ž‘ํ•˜๊ธฐ

๐ŸŒœ JavaScript ๋””์ž์ธํŒจํ„ด

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์•ˆํ‹ฐ ํŒจํ„ด
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋“ˆ ํŒจํ„ด
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋””์ž์ธ ํŒจํ„ด
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋”ฉ ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ

๐ŸŒœ ECMAScript 2015

  • ๋ฌธ๋ฒ• ๋ณ€ํ™”/์ถ”๊ฐ€
  • ๋ฌธ์ž ํ…œํ”Œ๋ฆฟ
  • ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ํ‘œํ˜„์‹
  • ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ
  • ํ”„๋กœ๋ฏธ์Šค(์•ฝ์†)
  • class ํ”„๋กœ๊ทธ๋ž˜๋ฐ

๐ŸŒœ JavaScript๋Š” ์ •๋ณต ์™„๋ฃŒ! jQuery ์‹ฌํ™” ํ•™์Šต

  • jQuery ์„ ํƒ/ํƒ์ƒ‰ ํ™•์žฅ
  • jQuery ์กฐ์ž‘/์ œ์–ด ํ™•์žฅ
  • jQuery ์ด๋ฒคํŠธ/ํ•ธ๋“ค๋ง ํ™•์žฅ
  • jQuery ์• ๋‹ˆ๋ฉ”์ด์…˜ ํ™•์žฅ
  • jQuery AJAX ํ™•์žฅ
  • jQuery ํ”Œ๋Ÿฌ๊ทธ์ธ ์ œ์ž‘ ํŒจํ„ด
  • jQuery ๋ฅผ ํ™œ์šฉํ•œ UI ๋ฐ๋ชจ ์ œ์ž‘ ์‹ค์Šต

๐ŸŒœ JavaScript/jQuery ๊ทธ ๋‹ค์Œ์€? JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ/ ํ”„๋ ˆ์ž„์›Œํฌ

  • AngularJS ํ”„๋ ˆ์ž„์›Œํฌ [๋‹ค์Œ ๊ณผ์ • ์†Œ๊ฐœ]
  • ReactJS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ [๋‹ค์Œ ๊ณผ์ • ์†Œ๊ฐœ]
Visit original content creator repository https://github.com/yamoo9/JJ_CAMP

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *