2023๋…„ 11์›” 09์ผยท1๋ถ„ ์ฝ๊ธฐ

Angular 17, ์›น ๊ฐœ๋ฐœ์— ํ˜๋ช…์„ ์ผ์œผํ‚ฌ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ ๊ณต๊ฐœ

Google์˜ ์ตœ์‹  ์›น ํ”„๋ ˆ์ž„์›Œํฌ ์—…๊ทธ๋ ˆ์ด๋“œ์ธ Angular 17์„ ํ†ตํ•ด ์›น ๊ฐœ๋ฐœ์ด ์ƒˆ๋กœ์šด ์ฐจ์›์— ๋„๋‹ฌํ–ˆ์Šต๋‹ˆ๋‹ค.

Angular 17, ์›น ๊ฐœ๋ฐœ์— ํ˜๋ช…์„ ์ผ์œผํ‚ฌ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ ๊ณต๊ฐœ

์›น ์•ฑ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์€ TypeScript ๊ธฐ๋ฐ˜ ์›น ์•ฑ ๊ฐœ๋ฐœ ํ”„๋ ˆ์ž„์›Œํฌ์— ๋Œ€ํ•œ Google์˜ ์ตœ์‹  ์—…๋ฐ์ดํŠธ์ธ Angular 17์„ ํ†ตํ•ด ํฌ๊ฒŒ ๊ฐ•ํ™”๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ˜์‹ ์ ์ธ ๋‚ด์žฅํ˜• ์ œ์–ด ํ๋ฆ„์œผ๋กœ ์ œ์ž‘๋œ ์ด ์ตœ์‹  ๋ฆด๋ฆฌ์Šค๋Š” ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ์žฌ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

11์›” 8์ผ ๊ฒŒ์‹œํŒ์„ ํ†ตํ•ด ๋ฐ๋ท”ํ•œ Angular 17์€ GitHub์—์„œ ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ์‹  ๋ฆด๋ฆฌ์Šค๋Š” ๊ฐ„๋‹จํ•˜๊ณ  ์„ ์–ธ์ ์ธ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋กœ ๊ฐ์‹ธ์ธ ๋งค์šฐ ํƒ๋‚˜๋Š” ๊ธฐ๋Šฅ์˜ ์ ˆ๋ฌ˜ํ•œ ์กฐํ™”๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. Google์€ Angular 17 ์ถœ์‹œ์™€ ํ•จ๊ป˜ ์ตœ์ ์˜ ์œ ํ˜• ์ถ•์†Œ๋ฅผ ๋ณด์žฅํ•˜์—ฌ ์šฐ์ˆ˜ํ•œ ์œ ํ˜• ๊ฒ€์‚ฌ๋ฅผ ์œ„ํ•œ ๊ธธ์„ ์—ด์–ด์ฃผ๋Š” ์ตœ์ ํ™”๋œ ๋‚ด์žฅ ์ œ์–ด ํ๋ฆ„์„ ์ด‰์ง„ํ•˜๋Š” ๋ธ”๋ก ํ…œํ”Œ๋ฆฟ ๊ตฌ๋ฌธ์„ ์ œ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค.

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

๋˜ํ•œ Angular 17์€ ์ƒˆ๋กœ์šด ์ˆ˜๋ช… ์ฃผ๊ธฐ ํ›„ํฌ๋ฅผ ์„ ๋ณด์ž…๋‹ˆ๋‹ค. afterRender๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋ Œ๋”๋ง์„ ์™„๋ฃŒํ•  ๋•Œ๋งˆ๋‹ค ์ฝœ๋ฐฑ์„ ํ˜ธ์ถœํ•˜๊ณ  afterNextRender๋Š” ๋‹ค์Œ ๋ฒˆ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ Œ๋”๋ง ์™„๋ฃŒ ์‹œ ์ฝœ๋ฐฑ์„ ์ดˆ๋Œ€ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” DOM ์—๋ฎฌ๋ ˆ์ด์…˜ ๋ฐ ์ง์ ‘ DOM ์กฐ์ž‘์„ ์šฐํšŒํ•˜์—ฌ Angular์˜ SSR(์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง) ๋ฐ SSG(์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ) ์„ฑ๋Šฅ ํ–ฅ์ƒ์„ ์ค€๋น„ํ•˜๊ธฐ ์œ„ํ•ด ํ†ตํ•ฉ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Google์€ Angular 17์˜ ์ œ์–ด ํ๋ฆ„์ด ์„ฑ๋Šฅ์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚จ๋‹ค๊ณ  ์ฃผ์žฅํ•ฉ๋‹ˆ๋‹ค. ์ด ํšŒ์‚ฌ๋Š” ๋‚ด์žฅ๋œ ์ œ์–ด ํ๋ฆ„ ๋ฃจํ”„๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฑฐ์˜ 90% ๋” ๋น ๋ฅธ ๋Ÿฐํƒ€์ž„, ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ๋ Œ๋”๋ง์˜ ๊ฒฝ์šฐ ์ตœ๋Œ€ 87% ๋” ๋น ๋ฅธ ๋นŒ๋“œ, ํด๋ผ์ด์–ธํŠธ ์ธก ๋ Œ๋”๋ง์˜ ๊ฒฝ์šฐ ์•ฝ 67% ๋” ๋น ๋ฅธ ๋นŒ๋“œ๋ฅผ ์ฃผ์žฅํ•˜๋Š” ์ˆ˜์น˜๋ฅผ ์„ ๋ณด์˜€์Šต๋‹ˆ๋‹ค.

์•ž์œผ๋กœ Angular ๊ฐœ๋ฐœ ํŒ€์€ Angular 18 ๋ฆด๋ฆฌ์Šค์™€ ํ•จ๊ป˜ Angular์˜ ๊ธฐ๋ณธ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ๊ณ„ํš์ธ angle.dev์˜ ๋ฒ ํƒ€ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ๋ฅผ ๋™์‹œ์— ์ถœ์‹œํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ์ด ํ”Œ๋žซํผ์€ Angular ๋ฌธ์„œ์˜ ์ƒˆ๋กœ์šด ํ—ˆ๋ธŒ๊ฐ€ ๋˜์–ด ํ”„๋ ˆ์ž„์›Œํฌ์˜ ์ตœ์‹  ๊ธฐ๋Šฅ์„ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ๋Š” ์—…๋ฐ์ดํŠธ๋œ ๊ฐ€์ด๋“œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

AppMaster ์™€ ๊ฐ™์€ no-code ํ”Œ๋žซํผ ์ œ๊ณต์—…์ฒด๊ฐ€ ๋– ์˜ค๋ฅด๋Š” ์„ธ๊ณ„์—์„œ Angular์˜ ์ด๋ฒˆ ์—…๊ทธ๋ ˆ์ด๋“œ๋Š” ๊ฒฝ์Ÿ ํ™˜๊ฒฝ์„ ์ž๊ทนํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. Angular๊ฐ€ TypeScript ๊ธฐ๋ฐ˜ ์›น ์•ฑ ๊ฐœ๋ฐœ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๊ณ„์† ๋ฐœ์ „์‹œํ‚ค๋Š” ๋™์•ˆ AppMaster ์™€ ๊ฐ™์€ ํ”Œ๋žซํผ์€ ๋ฐฑ์—”๋“œ, ์›น ๋ฐ ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์„ ์ง€์›ํ•˜๋Š” ์ง๊ด€์ ์ธ ๋„๊ตฌ๋ฅผ ์ œ๊ณตํ•˜์—ฌ no-code ์˜์—ญ์— ํ˜๋ช…์„ ์ผ์œผํ‚ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋‘ ์ŠคํŽ™ํŠธ๋Ÿผ์— ๊ฑธ์ณ ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ํฅ๋ฏธ๋กœ์šด ํ™˜๊ฒฝ์ž…๋‹ˆ๋‹ค.

Easy to start
Create something amazing

Experiment with AppMaster with free plan.
When you will be ready you can choose the proper subscription.

Get Started
Angular 17, ์›น ๊ฐœ๋ฐœ์— ํ˜๋ช…์„ ์ผ์œผํ‚ฌ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ ๊ณต๊ฐœ | AppMaster