JQuery๋Š” HTML ๋ฌธ์„œ์™€ JavaScript ๊ฐ„์˜ ์ƒํ˜ธ ์ž‘์šฉ์„ ๋‹จ์ˆœํ™”ํ•˜๋Š” ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ์˜คํ”ˆ ์†Œ์Šค JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์›น ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค์˜ ํšจ์œจ์„ฑ๊ณผ ์ƒ์‚ฐ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๋„๋ก ์„ค๊ณ„๋œ JQuery๋Š” CSS์˜ ์›ํ™œํ•œ ์กฐ์ž‘์€ ๋ฌผ๋ก  ๋” ์‰ฌ์šด ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐ AJAX ์ƒํ˜ธ ์ž‘์šฉ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ๊ณผ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. John Resig๊ฐ€ 2006๋…„์— ์ถœ์‹œํ•œ JQuery๋Š” ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ์—์„œ ์‚ฌ์‹ค์ƒ์˜ ํ‘œ์ค€์œผ๋กœ ์ž๋ฆฌ๋งค๊น€ํ–ˆ์œผ๋ฉฐ Google, Microsoft, IBM๊ณผ ๊ฐ™์€ ํšŒ์‚ฌ๋ฅผ ํฌํ•จํ•˜์—ฌ ๊ด‘๋ฒ”์œ„ํ•œ ์‚ฌ์šฉ์ž ๊ธฐ๋ฐ˜์„ ์œ ์ง€ํ•ด ์™”์Šต๋‹ˆ๋‹ค.

JQuery๋ฅผ ์ผ๋ฐ˜ JavaScript์™€ ๊ตฌ๋ณ„ํ•˜๋Š” ํ•ต์‹ฌ ์ธก๋ฉด ์ค‘ ํ•˜๋‚˜๋Š” ๊ฐ„๊ฒฐํ•œ ๊ตฌ๋ฌธ๊ณผ ์‚ฌ์šฉ ์šฉ์ด์„ฑ์ž…๋‹ˆ๋‹ค. ์ด๋Š” "์ ๊ฒŒ ์ž‘์„ฑํ•˜๊ณ  ๋” ๋งŽ์ด ์ˆ˜ํ–‰" ์›์น™์„ ๊ตฌํ˜„ํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ธฐ์กด JavaScript์— ํ•„์š”ํ•œ ๊ฒƒ๋ณด๋‹ค ๋” ์ ์€ ์ฝ”๋“œ ์ค„๋กœ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•จ์œผ๋กœ์จ ๋‹ฌ์„ฑ๋ฉ๋‹ˆ๋‹ค. JQuery์˜ ๋‚ด๋ถ€ ๊ตฌํ˜„์€ ๋ธŒ๋ผ์šฐ์ € ๋ถˆ์ผ์น˜๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ณ  ๋ธŒ๋ผ์šฐ์ € ๊ฐ„ ํ˜ธํ™˜์„ฑ ๊ฐœ์„ ์— ์ค‘์ ์„ ๋‘์–ด ๋ณด๋‹ค ์ผ๊ด€๋œ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

JQuery๋Š” DOM ํƒ์ƒ‰ ๋ฐ ์ˆ˜์ •, ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ, AJAX ์š”์ฒญ ๋ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ๊ฐ™์€ ์›น ์‚ฌ์ดํŠธ ๊ฐœ๋ฐœ์˜ ๋‹ค์–‘ํ•œ ์ธก๋ฉด์„ ์ถฉ์กฑ์‹œํ‚ค๋Š” ํ’๋ถ€ํ•œ ๋ฉ”์„œ๋“œ ๋ฐ ๊ธฐ๋Šฅ ๋ชจ์Œ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ฐ•๋ ฅํ•œ ์„ ํƒ๊ธฐ ์—”์ง„์ธ Sizzle์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๊ฐ€ HTML ์š”์†Œ์— ์‰ฝ๊ฒŒ ์•ก์„ธ์Šคํ•˜๊ณ  ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ํŽธ๋ฆฌํ•œ ๋ฉ”์†Œ๋“œ ์—ฐ๊ฒฐ์„ ํ†ตํ•ด ์ฝ”๋“œ๋ฒ ์ด์Šค๋ฅผ ๋”์šฑ ์ฝ๊ธฐ ์‰ฝ๊ณ  ์œ ์ง€ ๊ด€๋ฆฌํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ์˜ ๋ฐฉ๋Œ€ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” JQuery์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•˜์—ฌ ํŠน์ • ์‚ฌ์šฉ ์‚ฌ๋ก€์— ๋Œ€ํ•œ ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•˜๊ณ  ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ณต์žกํ•œ ๊ธฐ๋Šฅ ํ†ตํ•ฉ์„ ์šฉ์ดํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

AppMasterno-code ํ”Œ๋žซํผ์—์„œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— JQuery๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋‹ค์–‘ํ•œ ์œ ํ˜•์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•˜๊ณ  ๋ฐฐํฌํ•˜๋Š” ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ฐ„์†Œํ™”ํ•˜๋ ค๋Š” ํ”Œ๋žซํผ์˜ ํ•ต์‹ฌ ์ž„๋ฌด๊ฐ€ ๋ณด์™„๋ฉ๋‹ˆ๋‹ค. AppMaster ์—์„œ ์ œ๊ณตํ•˜๋Š” ์‹œ๊ฐ์  ๋””์ž์ธ ๋„๊ตฌ ๋ฐ ํšจ์œจ์ ์ธ ์†Œ์Šค ์ฝ”๋“œ ์ƒ์„ฑ๊ณผ ๊ฒฐํ•ฉ๋œ JQuery์˜ ๊ธฐ๋Šฅ์€ ํšจ๊ณผ์ ์ด๊ณ  ํšจ์œจ์ ์ธ ์›น ๊ฐœ๋ฐœ ๊ฒฝํ—˜์— ๊ธฐ์—ฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๋น„์šฉ ํšจ์œจ์ ์ด๊ณ  ์‹œ๊ฐ„ ํšจ์œจ์ ์ธ ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค๋ฅผ ์œ ์ง€ํ•˜๋ ค๋Š” ์ค‘์†Œ๊ธฐ์—… ๋ฐ ๊ธฐ์—…์— ํŠนํžˆ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

์›น ๊ฐœ๋ฐœ ๋งฅ๋ฝ์—์„œ JQuery๋ฅผ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์˜ ์˜ˆ๋กœ๋Š” ์ตœ์‹  ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ํ•„์ˆ˜์ ์ธ ๋™์  ๋ฐ ๋ฐ˜์‘ํ˜• ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI)๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๋‹ค. JQuery์˜ ๊ฐ•๋ ฅํ•œ ์กฐ์ž‘ ๊ธฐ๋Šฅ๊ณผ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ ๋ฐฉ๋ฒ•์„ ํ™œ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๋Š” ๋”์šฑ ๋งค๋ ฅ์ ์ธ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” ์Šฌ๋ผ์ด๋”, ์•„์ฝ”๋””์–ธ, ํƒญ ํƒ์ƒ‰ ์‹œ์Šคํ…œ๊ณผ ๊ฐ™์€ ๋Œ€ํ™”ํ˜• ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ JQuery์˜ AJAX ์ง€์›์„ ํ†ตํ•ด ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋กœ๋“œํ•  ํ•„์š” ์—†์ด ์›น ํŽ˜์ด์ง€ ์ฝ˜ํ…์ธ ๋ฅผ ์›ํ™œํ•˜๊ณ  ์›ํ™œํ•˜๊ฒŒ ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ์–ด ์›น ์•ฑ ๊ธฐ๋Šฅ๊ณผ ์„ฑ๋Šฅ์ด ๋”์šฑ ํ–ฅ์ƒ๋ฉ๋‹ˆ๋‹ค.

JQuery์˜ ์‚ฌ์šฉ ์šฉ์ด์„ฑ๊ณผ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ตœ๊ทผ ๋ช‡ ๋…„ ๋™์•ˆ Angular, React ๋ฐ Vue.js์™€ ๊ฐ™์€ ์ตœ์‹  JavaScript ํ”„๋ ˆ์ž„์›Œํฌ ๋ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ถœํ˜„์œผ๋กœ ์›น ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์ด ๋ฐœ์ „ํ–ˆ๋‹ค๋Š” ์ ์€ ์ฃผ๋ชฉํ•  ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ธฐ์ˆ ์€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์ถ•์„ ์œ„ํ•œ ๋‹ค์–‘ํ•œ ์†”๋ฃจ์…˜๊ณผ ์•„ํ‚คํ…์ฒ˜ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์ œ๊ณตํ•˜๋ฉฐ ์ข…์ข… ์„ฑ๋Šฅ, ํ™•์žฅ์„ฑ ๋ฐ ์œ ์ง€ ๊ด€๋ฆฌ ์ธก๋ฉด์—์„œ JQuery๋ฅผ ๋Šฅ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  JQuery๋Š” ํŠนํžˆ ๋‹จ์ˆœํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ๋ ˆ๊ฑฐ์‹œ ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•ด ์—…๊ณ„์—์„œ ๋งค์šฐ ์ธ๊ธฐ ์žˆ๊ณ  ๊ฐ€์น˜ ์žˆ๋Š” ๋„๊ตฌ๋กœ ๋‚จ์•„ ์žˆ์Šต๋‹ˆ๋‹ค.

AppMaster ํ”Œ๋žซํผ์€ ์ฃผ๋กœ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ์œ„ํ•ด Vue3 ํ”„๋ ˆ์ž„์›Œํฌ์™€ JS/TS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•˜์ง€๋งŒ, JQuery์— ๋Œ€ํ•œ ์ง€์‹๊ณผ ์ดํ•ด๋Š” ๋‹ค์–‘ํ•œ ๊ธฐ์ˆ  ์Šคํƒ๊ณผ ํ™˜๊ฒฝ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๊ณ„์†ํ•ด์„œ ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. JQuery์— ์ต์ˆ™ํ•˜๋ฉด ๋” ๋„“์€ ์›น ๊ฐœ๋ฐœ ์ƒํƒœ๊ณ„๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋ฉฐ ๊ฐœ๋ฐœ์ž๋Š” JQuery๋ฅผ ๊ธฐ๋ณธ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ ˆ๊ฑฐ์‹œ ์‹œ์Šคํ…œ์„ ์œ ์ง€ ๊ด€๋ฆฌ, ์—…๋ฐ์ดํŠธ ๋˜๋Š” ํ™•์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฒฐ๋ก ์ ์œผ๋กœ JQuery๋Š” HTML ๋ฌธ์„œ์™€ JavaScript ๊ฐ„์˜ ์ƒํ˜ธ ์ž‘์šฉ์„ ๋‹จ์ˆœํ™”ํ•˜๊ณ  ํ•ฉ๋ฆฌํ™”ํ•จ์œผ๋กœ์จ ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ํ˜•์„ฑํ•˜๋Š” ๋ฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ด์™”์Šต๋‹ˆ๋‹ค. ๊ฐ•๋ ฅํ•˜๊ณ  ํšจ์œจ์ ์ด๋ฉฐ ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ ๊ธฐ๋Šฅ์œผ๋กœ ์ธํ•ด ๋‹ค์–‘ํ•œ ๋ฒ”์œ„์™€ ๋ณต์žก์„ฑ์„ ์ง€๋‹Œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ธ๊ธฐ ์žˆ๋Š” ์„ ํƒ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ JQuery์™€ AppMaster ์˜ ์ œํ’ˆ ํ†ตํ•ฉ์„ ํ†ตํ•ด ๋” ๋น ๋ฅด๊ณ  ๋น„์šฉ ํšจ์œจ์ ์ธ ์›น ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ•ด์ง€๋ฉฐ ๊ณ ๊ฐ์€ ๋ฐฑ์—”๋“œ, ์›น ๋ฐ ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์„ ํฌํ•จํ•œ ์—ฌ๋Ÿฌ ํ”Œ๋žซํผ์—์„œ ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๊ณ  ๊ฐ•๋ ฅํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.