C#๊ณผ HTML, CSS๋ก ๋ฐฑ์๋์ ํ๋ก ํธ์๋๋ฅผ ์ ๋ถ ๋๋ผ ์ ์๋ ํธ๋ฆฌํ๋ฉด์๋ ์์ ์ ์ธ ํ๋ ์ ์ํฌ, ๋ธ๋ ์ด์ ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์ธํ ์ค๋ช ๋๋ฆฝ๋๋ค. ํด๋น ๊ฐ์๋ ์ ๊ณผ์ ์ค์์ ์ฒ์ ์์ํ๋ ๋ถ๋ค์ ์ํ ๊ฐ์ ์ ๋๋ค.
ASP.NET
.NET 6
Blazor
C#
HTML
C#์ ๋ฌธ๋ฒ์ ๋ํ ์๋ด๋ถํฐ
ํํ์ด์ง๋ฅผ ๋ง๋๋๋ฐ ํ์ํ ํ๊น์ง! ๐
โฐ ์๊ฐ ์ ์ฐธ๊ณ ์ฌํญ
C#์ ๋ฌธ๋ฒ์ด ๊น๋ค๋กญ๊ธฐ ๋๋ฌธ์ ์์ ์ด ์๊ฐํ๋ ๊ฒ์ ๊ตฌํํด ๋ด๋ ค๋ค๊ฐ ์๋ฌ์ ๋ถ๋ชํ ์ ์์ต๋๋ค. ๊ทธ๋ด ๋์๋ ์ค์ ๊ฐ์ ์์์ ์ฐธ๊ณ ํด ์ฃผ์๊ณ ๋ง์ฝ ์์์ ์๋ ๋ด์ฉ์ด๋ผ๋ฉด ๋ฌธ์๋ฅผ ๋จ๊ฒจ์ฃผ์๋ฉด ๋น ๋ฅด๊ฒ ๋ต๋ณํด ๋๋ฆฌ๊ฒ ์ต๋๋ค.
ASP.NET core Blazor๋ฅผ ์ด๋ก ๊ณผ ํจ๊ป ๋น์ฃผ์ผ ์คํ๋์ค์์ ์ฝ๋๋ฅผ ์์ฑํ๋ฉด์ ๋ฐฐ์ธ ์ ์์ต๋๋ค. C#์ ๋ฌธ๋ฒ์ ๋ํ ์๋ด์ ํํ์ด์ง๋ฅผ ๋ง๋๋ ๋ฐ์ ์์ด์ ํ์ํ ํ์ ์๊ฐํฉ๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก ์์ ํ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค๊ธฐ ์ํด์๋ ์๋ฐ์คํฌ๋ฆฝํธ + HTML(CSS) + ๋ฐฑ์๋ ์ธ์ด (node ๋ ์๋ฐ ๋ฑ) ์ต์ 3๊ฐ์ง์ ์ธ์ด๋ฅผ ๋ค๋ฃฐ ์ค ์์์ผ ํฉ๋๋ค. ๊ทธ๋ ์ง๋ง Blazor๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐฑ์๋๋ฅผ C# ํ๋๋ก ๋ง๋ค ์ ์๊ณ ์ค์๊ฐ ๋ฐ์ํ ํ์ด์ง๋ฅผ ๋ ๋๋ง ํ๊ธฐ ๋๋ฌธ์ ๊ท๋ชจ์๋ ํํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ์ ์ ๋ง ์ข์ ํ๋ ์ ์ํฌ ์ ๋๋ค. ์ด ๊ฐ์๋ ๊ทธ๋ฐ Blazor๊ฐ ์ด๋ฐ์๋ ์ด๋ ค์ธ ์ ์๋๋ฐ ์๋ฒฝํ ์ดํด๋ฅผ ๋๊ธฐ ์ํด ์ต๋ํ ์์ธํ๊ฒ ์ค๋ช ํ๊ณ ์ด๋ก ์ ํ ๋๋ก ์ค์ ์์ฑ๋ ๋ด์ ๊ฐ์ ์ ๋๋ค.
๋ธ๋ ์ด์ ๋ฅผ ์ฌ์ฉํ๋ฉด์
์๊พธ๋ง ๋งํ๋ ๊ฐ๋ฐ์
์ ์ ์นํ์ด์ง ๊ณต๋ถ๋ฅผ
๋ง ์๋ฃํ ๊ฐ๋ฐ์
๊ธฐ์กด ํ๋ ์์ํฌ ๊ทธ ์ด์์
ํ์ตํ๊ณ ์ถ์ ๋ถ
1. ASP.NET Blazor ๋ง์
๊ตฌ์กฐ ํน์ง์ ์ค๋ช
2. ๋ธ๋ ์ด์ ์ ์ฃผ์ ํ์ผ
ํ์ฅ์์ ๋ํ ์ค๋ช
3. Blazor์์ ์์ฃผ ์ฌ์ฉํ๋
HTML ํ๊ทธ ์๊ฐ
4. Blazor์์ CSS๋
์ด๋ป๊ฒ ์ฌ์ฉํด์ผ ํ ๊น?
5. ๋ธ๋ ์ด์ ์์ ๋
๋ฆฝ ํ์ด์ง๋ฅผ
๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ํด ์ค๋ช
6. ๋ธ๋ ์ด์ ์์ ๊ณต์ ํ์ด์ง๋ฅผ
๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ํด ์ค๋ช
7. ์ฌ์ด๋๋ฐ์ ์ปจํ
ํธ ํ์ด์ง ํค๋์
๋ํ ์ถ๊ฐ์ ์ธ ์ค๋ช
8. ๋ธ๋ ์ด์ ์์ ์์๋์ด์ผ ํ
C# ๋ฌธ๋ฒ์ ํน์ด์
9. ํ์ด์ง ๋ก๋ ์ ์คํ๋๋
์๋ช
๊ตฌ์ฑ ์์์ ์์์ ์๋ด
10. ๋ค๋ฅธ C# ํ์ผ๋ก ๋ถํฐ ์ฝ๋๋ฅผ
๋ ์ด์ ํ์ด์ง๋ก ๊ฐ์ ธ์ค๋ ๋ฒ
(1)
๋ธ๋ ์ด์ ์๋ฒ์ ์น ์ด์ ๋ธ๋ฆฌ์ ์ฐจ์ด์ , ๋ธ๋ ์ด์ ํ๋ก์ ํธ ๊ตฌ์กฐ์ ํ์ผ๋ค์ ์์๋๋ก ํ์ธ, ์คํ ์์๋ณ๋ก ์ฝ๋ ์์๋ณด๊ธฐ
(2)
cs ํ์ผ์์์ ๋ค์ ์คํ์ด์ค ๋ณ์ ๋ฉ์๋ ๋ง๋ค๊ธฐ, cshtml ํ์ด์ง ์์ฑ, ๋ ์ด์ ํ์ด์ง ํ๋ ์์ฑ
(3)
div, h1, p ๋ span ํ๊ทธ ๋ง๋ค๊ธฐ, ์ด๋ฏธ์ง ์น ๋ฃจํธ์์ ๋ถ๋ฌ์ค๊ธฐ, inpufile ๋ง๋ค๊ธฐ
(4)
site.css์ ์ฝ๋ ์ถ๊ฐํด ์ ์ฉ, razor.css ๋ง๋ค์ด์ ์ ์ฉ์์ผ ๋ณด๊ธฐ, ๋ฅ css๋ฅผ ์ญ์ ํด์ ๋ณํ ์ดํด๋ณด๊ธฐ
(5)
์ธ๋ฑ์ค ํ์ด์ง ์์์๋ ๊ธฐ๋ณธ ์ฝ๋๋ค์ ์์ ํด ๋ณด๋ ๊ฒ, ํ์ด์ง๋ฅผ ๋ง๋ค๊ณ ๋ผ์ฐํ ์ ๋ค๋ฅด๊ฒ ํ์ฌ ์๋์ผ๋ก ํ์ด์ง ๋ถ๋ฌ์ค๊ธฐ, app ํ์ด์ง ์์
(6)
Shared ํด๋์์ razor ํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ, ๋ค๋ฅธ ํด๋์์ ๋ง๋ค์ด๋ณด๊ธฐ, ์ธ๋ฑ์ค ํ์ด์ง์์ ์๋ก๋ง๋ ์ปดํฌ๋ํธ ๋ฐ์ดํฐ ์ ๋ฌ
(7)
๋ธ๋ ์ด์ ์์ ๋ถํธ์คํธ๋ฉ์ ๋ฌธ์ ์์ด ์ญ์ ํ๊ธฐ, NavMenu์ ๋งํฌ ํ๋ ๋ ์ถ๊ฐํ๊ธฐ
(8)
์ธ๋ฑ์ค ๋ ์ด์ ํ์ด์ง์ 5๊ฐ์ง ๋ณ์์ void ํจ์ ์ถ๊ฐ, ๊ธฐ๋ณธ๊ฐ ์ง์ ์๋ ์๋ฌ ํ์ธ, ๋ฆฌ์คํธ์ ํด๋์ค๋ฅผ ๋ง๋ค์ด ๋ณด๊ธฐ, ๋๋ค์๊ณผ ํ์ ์ง์ ๋ฆฌํด ํจ์ ๋ง๋ค๊ธฐ
(9)
onparameterset ๋ถํฐ ์์ํด์ afterrenderasync๊น์ง์ ์์๋ฅผ ๋ก๊ทธ๋ฅผ ํตํด ํ์ธํด๋ณด๊ธฐ, ํผ์คํธ ๋ ๋ ์์์ ์๋ํ๋ ๊ตฌ์กฐ๋ฅผ ์ค๋ช
(10)
ํด๋ ์์ ํ์ผ์ ๋ง๋ค๊ณ ๋ณ์์ ํจ์๋ฅผ ์์ฑ, ๋ ์ด์ ํ์ด์ง์ ํด๋์ค ํ๊ณผ ์ธ์ ํธ ํ์ผ๋ก ๊ฐ์ ธ์ค๊ธฐ
์ฌ๋ฌ ํ์ด์ง๋ฅผ ๋ง๋ค๊ณ ๋ค์ํ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๋ ๋ธ๋ ์ด์ ์น ํ์ด์ง๋ฅผ ์ ์ํด๋ด ๋๋ค.
Q. ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋ ๊ฐ์์ธ๊ฐ์?
์ ๋ํ ๋น์ ๊ณต์ ์๊ธฐ์ ๊ฐ๋ฅํ ๊ฒ์ผ๋ก ์๊ฐ๋์ง๋ง ํ์ฌ ๊ณ ๊ธ ๊ธฐ๋ฅ ๊ฐ์๋ ์ ์ ์ค์ ์์ด์ ๊ธฐ์ด๋ฅผ ๋ฐฐ์ด๋ค๊ณ ์๊ฐํ์๋ฉด ๋ ๊ฒ ๊ฐ์ต๋๋ค.
Q. ์ ๋ธ๋ ์ด์ ๋ฅผ ๋ฐฐ์์ผ ํ๋์?
์ ๋ ๋ผ๋ผ๋ฒจ๋ถํฐ node.js, jsp ๋ฑ ์จ๊ฐ ์น ํ๋ก๊ทธ๋๋ฐ์ ๋ฐฑ์๋ ํ๋ก ํธ์๋ ๊ด๊ณ์์ด ๋ค ํด๋ณด์์ต๋๋ค. ๊ทธ ์ค ์ด ๋๊ฐ์ง๊ฐ ํ๋๋ก ํฉ์ณ์ ธ์๊ณ MVC ํจํด์ ์์ ์ฑ์ด ๋ฐ์ด๋๋ฉฐ, ๋ฌด์๋ณด๋ค๋ ๋น์ฃผ์ผ ์คํ๋์ค๊ฐ ๋๋ฌด ์ข์์ ๋ธ๋ ์ด์ ๋ฅผ ์ฃผ ์ธ์ด๋ก ์ผ๊ฒ ๋์์ต๋๋ค.
Q. ์์ ๋ด์ฉ์ ์ด๋ ์์ค๊น์ง ๋ค๋ฃจ๋์?
ํด๋น ๊ฐ์์์๋ ์ ์ผ ๊ธฐ์ด์ธ ๊ธฐ๋ฅ๋ค์ ์๊ฐํ๊ณ ์์ต๋๋ค. ๋ ๋์๊ฐ์ ์ด๋ ค์ด ํ๋ก๊ทธ๋๋ฐ ๊ฐ์๋ ์ ์ ์ค์ ์์ต๋๋ค.
Q. ์ํํธ์จ์ด ๋น์ฉ์ด ๋ง์ด ๋ค๊น์?
๋ธ๋ ์ด์ ๋, ๋น์ฃผ์ผ ์คํ๋์ค 2022 ์ปค๋ฎค๋ํฐ ๋ฒ์ ๋ ์ ๋ถ ๋ฌด๋ฃ์ ๋๋ค. ๋ค๋ง ์๋น์ค๋ฅผ ํ ์๋ฒ๋ฅผ ๊ณ ๋ฅผ ๋ ๋ณดํต ๋ฆฌ๋ ์ค๋ณด๋ค ์๋์ฐ๋ฅผ ์ฐ๋๋ฐ ๋ผ์ด์ผ์ค ๋น์ฉ์ด ์ข ๋ ๋น์๋๋ค. ๊ทธ๋๋ IIS๋ฅผ ์ฌ์ฉํ๋ฉด ์ 2๋ง 5์ฒ์ ์ ๋์ ์๋ฒ๋ฆฌ์ค ๋น์ฉ์ด ๋๊ฐ๋ค๊ณ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
ํ ์คํ ํ๋ ์์ํฌ๋ก ํํ์ด์ง๋ฅผ ๊ฐ๋ฐํ๋ ค๋ ๊ฐ๋ฐ์
HTML,CSS๋ฅผ ์ด๋์ ๋ ์๊ณ ๊ณ์ ๋ถ
C# ํ๋ก๊ทธ๋๋ฐ์ ์ต์ํ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML
CSS
611
๋ช
์๊ฐ์
33
๊ฐ
์๊ฐํ
72
๊ฐ
๋ต๋ณ
3.6
์
๊ฐ์ ํ์
5
๊ฐ
๊ฐ์
์ ์ฒด
21๊ฐ โ (5์๊ฐ 3๋ถ)