Blazor PWA ์†Œ๊ฐœ

Blazor๊ฐ€ PWA๋ฅผ ์ง€์›ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•„๋Š” ์‚ฌ๋žŒ์€ ๋“œ๋ฌธ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ASP.NET ๋ฌธ์„œ๋ฅผ ๋ณด๋ฉด Blazor๋ฅผ ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์œผ๋กœ ๋นŒ๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.

โ€ป ์ €๋„ ํ•ด๋ณด์ง€๋Š” ์•Š์•„์„œ, ์ด๊ฒŒ Blazor WebAssembly๋งŒ ๊ฐ€๋Šฅํ•œ์ง€ Blazor Server๋„ ๊ฐ€๋Šฅํ•œ์ง€๋Š” ํ™•์ธ์ด ํ•„์š”ํ•˜๋„ค์š”. (๋ฌธ์„œ์ƒ์œผ๋กœ๋Š” Blazor WebAssembly๋งŒ ๊ฐ€๋Šฅํ•œ ๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค๋งŒ)

โ€ป ์ฐธ๊ณ ๋กœ PWA๋Š” ๋ณธ ๋‹ท๋„ท ๋ฐ๋ธŒ ํฌ๋Ÿผ๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์šฐ์ธก ์ƒ๋‹จ ํ”Œ๋Ÿฌ์Šค ๋ฒ„ํŠผ์œผ๋กœ ๋ชจ๋ฐ”์ผ ๋ฐ ๋ฐ์Šคํฌํƒ‘ ํ™˜๊ฒฝ์— ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

image

ASP.NET Core Blazor WebAssembly๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋นŒ๋“œ | Microsoft Docs

์ข‹์•„์š” 1

PWA๋Š” ํ˜ธ์ŠคํŒ… ๋ชจ๋ธ๊ณผ ์ƒ๊ด€์—†๋‹ค๋Š” ๋‚ด์šฉ์ด ๋ณด์ด๋„ค์š”. Blazor Server์—์„œ ํ•ด๋ณด๊ณ  ๋Œ“๊ธ€๋กœ ๊ฒฐ๊ณผ ๊ณต์œ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

Visual Studio 2019์—์„œ Blazor WebAssembly App์„ ์„ ํƒ ํ›„,


์ถ”๊ฐ€ ์ •๋ณด์˜ Progressive Web Application์„ ์„ ํƒํ•˜๋ฉด

์ปดํŒŒ์ผ ํ›„ ์‹คํ–‰ํ–ˆ์„ ๋•Œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ค์น˜ ์•„์ด์ฝ˜์ด ํ™œ์„ฑํ™” ๋˜๋Š”๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
image
์„ค์น˜ํ›„,
image
๋‹ค์Œ๊ณผ ๊ฐ™์ด PWAํ˜•ํƒœ๋กœ ์‹คํ–‰๋จ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์„ค์น˜๋˜์—ˆ์œผ๋ฏ€๋กœ ์ดํ›„ ์„ค์น˜๋œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ฒ˜๋Ÿผ ์ ‘๊ทผํ•ด์„œ ์‹คํ–‰ํ•  ์ˆ˜ ์ž‡์Šต๋‹ˆ๋‹ค.

๋ชจ๋ฐ”์ผ๋„ ํฌ๋กฌ์˜ ๋ฉ”๋‰ด๋ฅผ ํ†ตํ•ด ์œ ์‚ฌํ•˜๊ฒŒ ์„ค์น˜ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

Xamarin Forms๊ฐ€ ๋งŽ์ด ์ตœ์ ํ™” ๋˜์—ˆ์ง€๋งŒ ์—ฌ์ „ํžˆ ์„คํ”ผ ํŒŒ์ผ์˜ ํฌ๊ธฐ๊ฐ€ ํฌ๊ณ , ์ตœ์ดˆ ์‹คํ–‰๋  ๋•Œ์˜ ๋Œ€๊ธฐ์‹œ๊ฐ„์ด ๊ธด ํŽธ์ด๋ฏ€๋กœ, PWA๊ฐ€ ๋Œ€์•ˆ์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ, Blazor์™€ ๊ฒฐํ•ฉํ•œ๋‹ค๋ฉด ํ˜„์—…์—์„œ๋„ ๊ดœ์ฐฎ์€ ๋Œ€์•ˆ์ด ๋˜์ง€ ์•Š์„๊นŒ ํ•ฉ๋‹ˆ๋‹ค.
โ€ป ๋ฌผ๋ก  Blazor WebAssembly ํ˜•ํƒœ๋Š” ๋ชจ๋ฐ”์ผ์—์„œ ์ƒ๋‹นํžˆ ๋Š๋ฆฐ ๋กœ๋”ฉ์‹œ๊ฐ„์„ ๊ฐ€์ง€๋ฏ€๋กœ ์•„์ง์€ ๋น„์ถ”์ฒœ์ž…๋‹ˆ๋‹ค.

ํ™•์ธ ๊ฒฐ๊ณผ PWA๋Š” Blazor์™€ ์ข…์†์„ฑ์ด ์—†์Šต๋‹ˆ๋‹ค. ์ฆ‰, Blazor Server๋กœ๋„ PWA๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด Blazor WebAssembly์— PWA๋ฅผ ์ฒดํฌํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•œ ํ›„,
์•„์ด์ฝ˜ ํŒŒ์ผ, manifest.json, service-worker.js๋ฅผ wwwroot์— ๋ณต์‚ฌํ•œ ํ›„, _Host.cshtml์— ์•„๋ž˜์™€ ๊ฐ™์ด ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

Blazor PWA ์ •๋ฆฌ

  • PWA๋Š” Blazor๋ž‘ ์ง์ ‘์ ์ธ ์ƒ๊ด€์€ ์—†์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ์กฐ์‚ฌํ•ด๋ด์•ผ๊ฒ ์ง€๋งŒ js interop ํ˜•ํƒœ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์ œ๊ณตํ•˜์ง€ ์•Š์„๊นŒ ํ•ฉ๋‹ˆ๋‹ค.

  • Blazor WebAssembly๋ณด๋‹ค๋Š” Blazor Server PWA๊ฐ€ ํ˜„์žฌ๋Š” ๋ฐ”๋กœ ํ˜„์—…์— ์“ฐ์ผ ์ˆ˜ ์žˆ์–ด ๋ณด์ž…๋‹ˆ๋‹ค.

  • ๊ฒฐ๊ตญ์— Blazor๋‚˜ Uno ๋“ฑ์„ ์‚ฌ์šฉํ•ด์„œ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•˜๊ณ , PWA๋ฅผ ์ ์ ˆํžˆ ์ž˜ ์ด์šฉํ•ด ๋ชจ๋ฐ”์ผ ์•ฑ & ์›น ๋“ฑ ์ผ๊ด„ ์„œ๋น„์Šค๋ฅผ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์‹œ๋‚˜๋ฆฌ์˜ค๊ฐ€ ๊ฐ€๋Šฅํ•ด์ง‘๋‹ˆ๋‹ค.

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

์ข‹์•„์š” 1

Uno๋„ PWA์ƒ˜ํ”Œ์ด ์žˆ๊ธธ๋ž˜ ๋ชจ๋ฐ”์ผ์— ์„ค์น˜ํ•ด๋ดค๋Š”๋ฐ, ๋‹ค์šด๋กœ๊ทธ ๋ฐ›์•„์•ผ ํ•˜๋Š” dll์ด ์ผ€์‹œ๊ฐ€ ๋˜๋Š”์ง€ ์„ค์น˜ํ›„์—๋Š” ๋กœ๋”ฉ์€ ๊ฝค ๋นจ๋ฆฌ ๋ฉ๋‹๋‹ค. ํ•˜์ง€๋งŒ, ํ™”๋ฉด์œผ๋กœ ์ง„์ž… ํ›„ ๋ฉ”๋‰ด ์„ ํƒ ๋“ฑ ๋„ˆ๋ฌด ๋Š๋ฆฌ๋„ค์š”. ์•„๋งˆ ์ƒ˜ํ”Œ์ด ๋ฏธ๋ฆฌ AOT๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š์€ ์ƒ˜ํ”Œ์ธ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.