Tab base AuthorizeRouteView ๋งŒ๋“ค๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š” c# ์œˆ๋„์šฐ ์‘์šฉํ”„๋กœ๊ทธ๋žจ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.
์ฃผ๋กœ, ๊ฐœ๋ฐœํ•œ ๋ถ„์•ผ๋Š” ์ œ์กฐ MES ์‹œ์Šคํ…œ์ž…๋‹ˆ๋‹ค.

ํšŒ์‚ฌ์—์„œ ์‚ฌ์ดํŠธ๊ฐœ๋ฐœ ์ž‘์—…(์†Œ๊ทœ๋ชจ ์žฅ๋น„๊ด€๋ฆฌ) ์ด ๋–จ์–ด์ ธ์„œ blazor wasm ์œผ๋กœ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰์ฝ”์ž ํ•ฉ๋‹ˆ๋‹ค.

: ์œˆ๋„์šฐ MES SYSTEM์€ ํ˜„์žฌ ์ขŒ์ธก ๋ฉ”๋‰ด์˜์—ญ, ์šฐ์ธก ์ปจํ…์ธ  ์˜์—ญ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๊ณ ,
์ขŒ์ธก ๋ฉ”๋‰ด๋ฅผ ํด๋ฆญํ•˜๋ฉด, ์šฐ์ธก ์ปจํ…์ธ  ์˜์—ญ์— Tab page ๊ฐ€ ์ถ”๊ฐ€๋˜์–ด ํ™”๋ฉด์ด ๊ตฌํ˜„๋ฉ๋‹ˆ๋‹ค.
blazor wasm์œผ๋กœ ๊ฐœ๋ฐœ์ง„ํ–‰ํ•  ์›น์‚ฌ์ดํŠธ๋„ ๋™์ผํ•œ ๊ธฐ๋Šฅ๊ตฌํ˜„์ด ๊ฐ€๋Šฅํ•œ์ง€์š”,

ํ˜น์‹œ ์ฐธ์กฐํ• ๋งŒํ•œ ๋ฌธ์„œ ๋ฐ ์†Œ์Šค๊ฐ€ ์žˆ๋Š”์ง€์š”.

๋‹ต๊ธ€ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ € ์ƒˆํƒญ

๋ธŒ๋ผ์šฐ์ € API์—์„œ ์ƒˆํƒญ์œผ๋กœ ์—ด๊ธฐ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ € ํƒญ์„ ํŽ˜์ด์ง€ ํƒญ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

window.open

๊ทธ๋Ÿฌ๋‚˜ ์œ„ API๋ฅผ IJSRuntime ์œผ๋กœ ํ˜ธ์ถœํ•˜๋ฉด, ์„œ๋ฒ„ ์ ‘์†(๋˜๋Š” ์ƒˆ๋กœ๊ณ ์นจ)๊ณผ ๊ฐ™์€๋ฐ, ์ด๋Š” ํƒญ์„ ์—ด ๋•Œ ๋งˆ๋‹ค ์™€์ฆ˜ ๋‹ค์šด๋กœ๋“œ๋ฅผ ์ผ์œผํ‚ค๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ์ข‹์ง€ ๋ชปํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

CSS ํƒญ๋ทฐ

๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ๋งŽ์€ CSS ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ํƒญ๋ทฐ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

Navs and tabs ยท Bootstrap v5.0 (getbootstrap.com)

๊ทธ๋Ÿฐ๋ฐ, ์ด๋ฅผ ์ด์šฉํ•˜๋ฉด ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํƒญ๋ทฐ์™€ ๊ทธ ํƒญ๋ทฐ์— ํฌํ•จ๋  ๋ชจ๋“  ์„œ๋ธŒ ์ปดํฌ๋„ŒํŠธ๋„ ๋ชจ๋‘ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผ ํ•ด์„œ, ์•ฑ์ด ๋‹จ์ผ ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ(index.razor)๋งŒ ๊ฐ–๋Š” ๊ตฌ์กฐ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

๋ธ”๋ ˆ์ด์ € ์„œ๋ฒ„ ๊ณ ๋ ค

MES์™€ ๊ฐ™์ด ์ž๋ฃŒ ์ง€ํ–ฅ์ ์ด๋ฉฐ ์‹ค์‹œ๊ฐ„์„ฑ์ด ์ค‘์š”ํ•˜๋‹ค๋ฉด, ๋ธ”๋ ˆ์ด์ € ์„œ๋ฒ„๋ฅผ ๊ณ ๋ คํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์„ ๊ฒƒ์ด๋ผ ์ƒ๊ฐ์ด ๋“ญ๋‹ˆ๋‹ค.
์ƒˆ๋กœ์šด ํƒญ์„ ์—ด ๋•Œ, ์™€์ฆ˜๊ณผ ๊ฐ™์€ ๋Œ€์šฉ๋Ÿ‰ ๋‹ค์šด๋กœ๋“œ๊ฐ€ ์—†๊ณ ,
์ž๋ฃŒ์˜ ์—…๋ฐ์ดํŠธ ์‹œ, ์ผ๋ฐ˜์ ์ธ SSR(MVC, Web Pages) ๋ณด๋‹ค ํ›จ์”ฌ ๊ฐ€๋ณ์Šต๋‹ˆ๋‹ค.
๋ฌด์—‡๋ณด๋‹ค, 2 ํ‹ฐ์–ด ์„ค๊ณ„๋ผ ํ”„๋กœ์ ํŠธ ๊ด€๋ฆฌ ์ธก๋ฉด์—์„œ๋„ ์ข‹์„ ๊ฒƒ์ด๋ž€ ์ƒ๊ฐ์ด ๋“ญ๋‹ˆ๋‹ค.

๋‹ต๋ณ€๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์šฐ์„  wasm ๋ณด๋‹ค ๋ธ”๋ ˆ์ด์ € ์„œ๋ฒ„๋ฅผ ๊ณ ๋ คํ•˜๋„๋กํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์ž๋ฃŒ๊ฒ€์ƒ‰์ค‘ ์ •์„ธ์ผ ์šด์˜์ง„๋‹˜์˜ ๊ฐ•์˜์ค‘์— ์•„๋ž˜์™€ ๊ฐ™์€ ์‹ค์ œ์‚ฌ๋ก€๋ฅผ ๋ณด์•˜์Šต๋‹ˆ๋‹ค.
์•„๋ž˜์™€ ๊ฐ™์ด ๊ตฌํ˜„์„ ํ•˜๊ณ  ์‹ถ์€๋ฐ, ๋ธ”๋ ˆ์ด์ € ์„œ๋ฒ„๋กœ ๊ตฌํ˜„ํ• ๋•Œ ์ฐธ์กฐํ• ์ˆ˜ ์žˆ๋Š” ๋ฌธ์„œ๋‚˜ ์†Œ์Šค๊ฐ€ ์žˆ๋Š”์ง€์š”.

[์ž๋ฃŒ์ถœ์ฒ˜] ๋‹ท๋„ท ๋ฐ๋ธŒ ์œ ํŠœ๋ถ€ - NET Conf 2021 x Seoul ๋ธ”๋ ˆ์ด์ € ์„œ๋ฒ„ ์†Œ๊ฐœ ๋ฐ ์‚ฌ๋ก€

ํ˜ผ์ž์„œ, BlazorXTabs ๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜์—ฌ(GitHub - David-Moreira/BlazorXTabs: BlazorXTabs is an extended tabs component library providing various tab features for Blazor!)
๋ธ”๋ ˆ์ด์ € ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค์–ด๋ณด์•˜๋Š”๋ฐ์š”, ๋ช‡๊ฐ€์ง€ ๋ณ€๊ฒฝํ•˜๊ณ ํ”ˆ ์‚ฌํ•ญ์ด ์žˆ๋Š”๋ฐ, ์•„์ง RouteView์— ๋Œ€ํ•œ
์ดํ•ด๋„๊ฐ€ ๋–จ์–ด์ ธ์„œ๋ฆฌโ€ฆ;;; ํ•˜ํ•˜ํ•˜โ€ฆ

2 Likes