Aspnetcore: [Blazor] C#์„ ์‚ฌ์šฉํ•œ ์ง์ ‘ DOM ์กฐ์ž‘

์— ๋งŒ๋“  2019๋…„ 01์›” 22์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dotnet/aspnetcore

๊ธฐ๋Šฅ ์š”์ฒญ์ด ๋ฌธ์ œ์™€ ๊ด€๋ จ๋˜์–ด ์žˆ์Šต๋‹ˆ๊นŒ? ๊ธฐ์ˆ ํ•ด ์ฃผ์‹ญ์‹œ์˜ค.

javascript ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š๊ณ  C# ์ฝ”๋“œ์—์„œ DOM์„ ์ง์ ‘ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ทธ๋ ‡๊ฒŒ ๊ธฐ๋ณธ์„ ์ƒ๊ฐํ–ˆ๋‹ค

var elem = document.getElementById("123");

elem.AddOrUpdateStyle("background-color", "red");
elem.AddOrUpdateStyle("height", "150px");
elem.Remove("height");

var boxes = document.getElementsByClassName("box");

foreach (var box in boxes)
{
   if (box.Classes.Contains("hidden"))
   {
      box.AddOrUpdateStyle("display", "none");
      continue;
   }

   box.Value = "";
   box.SetAttribute("placeholder", "Type here...");
}

๋‹ฌ์„ฑ ๊ฐ€๋Šฅํ•œ๊ฐ€์š”?

area-blazor

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด ๋ฌธ์ œ๋Š” ๋‹ค์‹œ ํ’€์–ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. Razor ๊ตฌ์„ฑ ์š”์†Œ๋Š” ํ›„๋“œ ์•„๋ž˜์—์„œ JS interop์œผ๋กœ ์ˆ˜ํ–‰๋œ ๊ฒฝ์šฐ์—๋„ ์ด ๊ธฐ๋Šฅ์ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ElementRef๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋ณธ์ ์ธ JS ๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜๋„๋ก ํ™•์žฅ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

DOM ์กฐ์ž‘ si๋Š” ํ˜„์žฌ ์›น ์–ด์…ˆ๋ธ”๋ฆฌ(https://github.com/WebAssembly/proposals/issues/16, https://github.com/WebAssembly/design/blob/master/Web.md)์—์„œ ์ง€์›๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์ด๊ฒผ์Šต๋‹ˆ๋‹ค. mono wasm์€ ๊ณง ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Blazor์˜ ํ˜„์žฌ ์ƒํƒœ: ์‚ฌ์šฉ์ž ์ง€์ • ๊ตฌ์„ฑ ์š”์†Œ ๋ฐ JS ์ƒํ˜ธ ์šด์šฉ์„ฑ์„ ์‚ฌ์šฉํ•ด์•ผ๋งŒ ๊ทธ๋ ‡๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋Š” ๋‹ค์‹œ ํ’€์–ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. Razor ๊ตฌ์„ฑ ์š”์†Œ๋Š” ํ›„๋“œ ์•„๋ž˜์—์„œ JS interop์œผ๋กœ ์ˆ˜ํ–‰๋œ ๊ฒฝ์šฐ์—๋„ ์ด ๊ธฐ๋Šฅ์ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ElementRef๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋ณธ์ ์ธ JS ๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜๋„๋ก ํ™•์žฅ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ง์ ‘ DOM ์•ก์„ธ์Šค๋Š” ๋‚ด๊ฐ€ Blazor๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๊ฐ€ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์ด๊ฒƒ์€ Blazor์˜ ๋ŒํŒŒ๊ตฌ๋ฅผ ์œ„ํ•ด ํ•„์ˆ˜ ์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰