Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
Programming

/

Web Development

ASP.NET core Blazor 詳細講義 - 初級編

この講義では、バックエンドとフロントエンドをすべて C#、HTML、CSS で完了できる便利で安定したフレームワークである Blazor の使用方法について詳しく説明します。この講義は、最初から始める方のための講義です。

（3.9）受講レビュー 9件

受講生 107名

  • backchur
ASP
.NET
Blazor

学習した受講者のレビュー

こんなことが学べます

  • ASP.NET

  • .NET 6

  • Blazor

  • C＃

  • HTML

C＃の文法に関するガイドから
ホームページを作るのに必要なヒントまで！ 👉

➰受講時の注意事項

C＃は文法が厳しいので、自分が考えるものを実装して見下ろしてエラーにぶつかることができます。そんなときは、実戦講義映像を参考にしていただき、もし映像にない内容であれば、お問い合わせを残していただければ、早急にお答えいたします。


ASP.NET core Blazor 💻

ASP.NET core Blazorを理論と一緒にビジュアルスタジオでコードを書くことで学ぶことができます。 C＃の文法のガイドとホームページを作成するために必要なヒントを紹介します。

基本的に完全なWebアプリケーションを作成するには、JavaScript + HTML（CSS）+バックエンド言語（nodeやJavaなど）の少なくとも3つの言語を扱う必要があります。しかし、BlazorはJavaScriptとバックエンドをC＃にすることができ、リアルタイムのレスポンシブページをレンダリングするので、規模の大きいホームページを作成するのにとても良いフレームワークです。この講義はそのようなBlazorが序盤には難しいかもしれませんが、完璧な理解を助けるためにできるだけ詳しく説明し、理論に基づいて実戦作成も盛り込んだ講義です。

こんな方が聞けばいいですよ🙋‍♂️

ブレザーを使用しながら
どんどん詰まる開発者

静的ウェブページの勉強
完成した開発者

既存のフレームワーク以上
学習したい方

学習内容📚

#1

Blazorを使用するためのヒントとC＃理論を学ぶ

ASP.NET Blazorのみの構造の特徴を説明 1. ASP.NET Blazorのみ
構造の特徴を説明

2.ブレザーの主なファイル
拡張子の説明

3. Blazorでよく使用される
HTMLタグの紹介

4. Blazorでは、CSSは
どうやって使うべきですか？

5.ブレザーから独立ページを
作成方法の説明

ブレザーで共有ページを作成する方法について説明 6.ブレザーで共有ページを
作成方法の説明

サイドバーとコンテンツページヘッダの追加説明 7.サイドバーとコンテンツページヘッダに
追加の説明

ブレザーで知っておくべきC＃文法の特異点 8. ブレザーで知っておくべきこと
C＃文法の特異点

ページのロード時に実行される寿命コンポーネントの順序とガイド 9.ページの読み込み時に実行される
寿命コンポーネントの順序とガイド

他のC＃ファイルからコードをレーザーページにインポートする方法 10.他のC＃ファイルからコードを
レーザーページにインポートする方法

#2

理論に基づいて、Blazor Server内で実際のコードを書く

(1)

ブレザーサーバーとWebアセンブリの違い、ブレザープロジェクト構造のファイルを順番に確認し、実行順でコードを学ぶ

(2)

csファイル内の名前空間変数メソッドの作成、cshtmlページの生成、1つのレーザーページの生成

(3)

div、h1、pとspanタグの作成、画像Webルートからの読み込み、inpufileの作成

(4)

site.cssにコードを追加して適用、razor.cssを作成して適用させてみて、ディープcssを削除して変更を調べる

(5)

インデックスページ内の基本コードを修正すること、ページを作成してルーティングを異なるようにして手動でページを読み込む、appページ

(6)

Shared フォルダ内に razor ページを作成し、別のフォルダで作成し、インデックスページで新しく作成したコンポーネントデータを渡す

(7)

ブレザーからブートストラップを問題なく削除する、NavMenuにリンクを追加する

(8)

インデックスレーザーページに5つの変数とvoid関数を追加します。

(9)

onparameterset から始めて afterrenderasync までの順序をログを通じて確認してみて、ファーストレンダ内で動作する構造を説明

(10)

フォルダ内にファイルを作成し、変数と関数を作成し、レーザーページにクラス型とインジェクト型にインポートする

#3

学んだことに基づいて動作する本番Webアプリケーションの制作


学んだことに基づいて動作するウェブアプリケーションの制作

複数のページを作成し、さまざまなデータを読み込むブレザーWebページを作成します。

予想される質問 Q&A 💬

Q.非専攻者も聞ける講義ですか？

私も非専攻者だったから可能だと思われますが、現在の高度な機能講義は制作中に基礎を学ぶと考えればいいと思います。

Q.なぜブレザーを学ぶべきですか？

私は、Laravelからnode.js、jspなど、あらゆる種類のWebプログラミングをバックエンドのフロントエンドに関係なくやってみました。そのうちの2つが一つにまとめられており、MVCパターンの安定性に優れ、何よりもビジュアルスタジオがとても好きでブレザーをメイン言語にすることになりました。

Q.授業内容をどのレベルまで扱いますか？

該当講義では一番基礎となる機能を紹介しています。さらに、難しいプログラミング講義は制作中です。

Q.ソフトウェアの費用はかかりますか？

ブレザーも、ビジュアルスタジオ2022コミュニティ版も全部無料です。ただし、サービスを行うサーバーを選ぶとき、通常LinuxよりもWindowsを使うのにライセンスコストが少し高価です。それでもIISを使えば、月2万5千ウォン程度のサーバーレスコストが出てくると考えればいいのです。


知識共有者の紹介✒️

  • 4年目のフルスタック開発者でありながらデザイナーでもあるペク・スンチョルです。
  • 現在、Inflearnにブレザーの味わい講義とキムプ講義を公開中です。
  • Welcome VO7E！ >該当ホームページをブレザーで製作しました。

こんな方に
おすすめです

学習対象は
誰でしょう？

  • フルスタックフレームワークでホームページを開発したい開発者

  • HTML、CSSをある程度知っている方

  • C# プログラミングに精通している方

前提知識、
必要でしょうか？

  • HTML

  • CSS

こんにちは
です。

638

受講生

34

受講レビュー

72

回答

3.6

講座評価

5

講座

カリキュラム

全体

21件 ∙ (5時間 3分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

9件

3.9

9件の受講レビュー

  • jhpark154600님의 프로필 이미지
    jhpark154600

    受講レビュー 1

    ∙

    平均評価 3.0

    3

    100% 受講後に作成

    강의 내용은 좋은 것 같습니다. 다만 강의가 연습하지 않은 티가 많이 나는데 말하는 속도도 너무 느리고 말을 잘못했으면 다시 녹화 하는 정성을 보여주셨으면 합니다. 그리고 중간중간 숨 고르기를 너무 오래 하셔서 답답해 죽을 것 같아요 컷 편집이라도 좀 하셨으면 합니다. * 완강 이후 느낀점 초급자가 들을 수 없음.아무 설명없이 코드 쳤다 지웠다 말바꿨다 하는게 너무많아서 다른 프레임워크 개발경험없다면 이해 못할 수준. 그렇다고 다른 프레임 워크 개발경험이 있는 초,중급자가 듣기에 아무 내용 없음 돈아까움 듣지마라

    • 백승철
      知識共有者

      강의 톤이나 말하는 속도 등에 있어서 부족함을 느끼게 해드려 죄송합니다. 개발자가 강의를 만들다 보니 아무래도 듣는 사람 입장에서 답답하다고 생각할 수도 있었겠다는 생각이 듭니다. 추후 새로운 강의를 선보일때는 지적해주신 점 잊지 않겠습니다.

  • jwkim님의 프로필 이미지
    jwkim

    受講レビュー 2

    ∙

    平均評価 4.0

    3

    100% 受講後に作成

    • isnotnull님의 프로필 이미지
      isnotnull

      受講レビュー 2

      ∙

      平均評価 5.0

      5

      95% 受講後に作成

      감사합니다.

      • 백승철
        知識共有者

        좋은 평가를 남겨주셔서 감사합니다. 남겨주신 마음을 가지고 앞으로 더 좋은 강의를 만들 수 있도록 훨씬 더 노력해 보도록 하겠습니다. 수강자 님께서도 앞으로 블레이저를 활용해 프로그래밍을 하는 동안 잘 되셨으면 좋겠습니다!

    • yongkyme님의 프로필 이미지
      yongkyme

      受講レビュー 8

      ∙

      平均評価 4.8

      5

      90% 受講後に作成

      차분한 강의 감사합니다.

      • 초보개발자님의 프로필 이미지
        초보개발자

        受講レビュー 1

        ∙

        平均評価 5.0

        5

        100% 受講後に作成

        아직 수강중이지만 Blazor에 대해 기본적인 내용을 잘 알려주셔서 시작강의로 듣기 너무 좋습니다. 국내에는 아직 자료도 많이 부족해 정말 도움이 많이 되고있습니다. 질문도 빠르게 답변해주셔서 배움 초기의 시행착오를 정말 많이 줄일 수 있는 강의같습니다. 고급강의도 바로 이어서 보고싶어서 빨리 업로드 되기를 기대하고있습니다. 한번에 완강까지 올리시지 않더라도 제작한 부분만이라도 먼저 올려주셨으면 하는 바람입니다.

        • 백승철
          知識共有者

          좋은 평가를 주셔서 감사합니다. 앞으로도 만약 블레이저를 사용하다가 궁금한 점이 있으시다면 문의를 남겨주세요~ 최대한 도움이 될 수 있도록 하겠습니다.

      ￥4,502

      backchurの他の講座

      知識共有者の他の講座を見てみましょう！

      PHP 개발자의 최종 테크트리, 라라벨 강의강의 썸네일

      PHP 개발자의 최종 테크트리, 라라벨 강의

      백승철

      PHP 기반으로 제작된 라라벨 프레임워크는 개발자에게 편리한 기능들을 제공합니다. 이해하기 힘든 공식 홈페이지나 서적으로 라라벨 학습에 어려움을 겪는 분들에게 도움이 되고자 해당 강의를 제작하게 되었습니다.

      중급이상

      중급이상

      PHP, Laravel

      PHP 개발자의 최종 테크트리, 라라벨 강의강의 썸네일

      PHP 개발자의 최종 테크트리, 라라벨 강의

      백승철

      쿠버네티스 대신 도커 SWARM 사용 방법 핵심 강의강의 썸네일

      쿠버네티스 대신 도커 SWARM 사용 방법 핵심 강의

      백승철

      도커를 스웜 모드로 사용하는 방법에 초점을 맞추어 강의합니다. 초보 관리자도 쉽게 서버를 구축하고 운영할 수 있도록 안내합니다.

      초급

      초급

      Docker, docker-swarm, cloud-computing

      쿠버네티스 대신 도커 SWARM 사용 방법 핵심 강의강의 썸네일

      쿠버네티스 대신 도커 SWARM 사용 방법 핵심 강의

      백승철

      비싼 포토샵 대신 김프로 작업하기강의 썸네일

      비싼 포토샵 대신 김프로 작업하기

      백승철

      포토샵 가격이 부담스러운 분들이라면 김프를 추천드려요! 이 강의에서 몇 가지 실전 작업을 따라하면서 김프의 기능과 이미지를 편집하는 방법 등 몇 가지 디자인 팁을 배워가실 수 있습니다.

      입문

      입문

      gimp

      비싼 포토샵 대신 김프로 작업하기강의 썸네일

      비싼 포토샵 대신 김프로 작업하기

      백승철

      Blazor로 빠르게 홈페이지 만들기 ASP.NET core 6강의 썸네일

      Blazor로 빠르게 홈페이지 만들기 ASP.NET core 6

      백승철

      이 강의를 통해 visual studio 2022를 활용한 .net 풀 스택 웹 개발이 어떤 것인지 기초적인 프로그래밍을 체험해 볼 수 있습니다. 윈도우 플랫폼에서 나만의 홈페이지를 제작하세요!

      초급

      초급

      ASP.NET Core, Blazor

      Blazor로 빠르게 홈페이지 만들기 ASP.NET core 6강의 썸네일

      Blazor로 빠르게 홈페이지 만들기 ASP.NET core 6

      백승철

      似ている講座

      同じ分野の他の講座を見てみましょう！

      Blazor로 빠르게 홈페이지 만들기 ASP.NET core 6강의 썸네일

      Blazor로 빠르게 홈페이지 만들기 ASP.NET core 6

      백승철

      이 강의를 통해 visual studio 2022를 활용한 .net 풀 스택 웹 개발이 어떤 것인지 기초적인 프로그래밍을 체험해 볼 수 있습니다. 윈도우 플랫폼에서 나만의 홈페이지를 제작하세요!

      초급

      초급

      ASP.NET Core, Blazor

      Blazor로 빠르게 홈페이지 만들기 ASP.NET core 6강의 썸네일

      Blazor로 빠르게 홈페이지 만들기 ASP.NET core 6

      백승철

      Razor Pages 멤버십 서비스 초급과정(.NET5)강의 썸네일

      Razor Pages 멤버십 서비스 초급과정(.NET5)

      김정수

      [ASP.NET Core]는 여러 갈래로 나뉘는데, 그 중 MVC와 Razor Pages는 대표주자입니다. 그 둘 중 여기에서는 Razor Pages를 사용해서 멤버십 서비스(Identity)를 구축하는 초급과정을 담았습니다.

      초급

      초급

      .NET

      Razor Pages 멤버십 서비스 초급과정(.NET5)강의 썸네일

      Razor Pages 멤버십 서비스 초급과정(.NET5)

      김정수

      14일만에 배우는 ASP.NET CORE강의 썸네일

      14일만에 배우는 ASP.NET CORE

      김정수

      본 강좌는 ASP.NET CORE(.NET 5) 프로젝트를 구성할 때 꼭 필요한 내용을 중심으로 진행합니다. 또한, SQL Server를 통해 관계형 Database를 다루고 싶은 분들에게 추천드릴 수 있는 강좌입니다.

      초급

      초급

      C#, .NET

      14일만에 배우는 ASP.NET CORE강의 썸네일

      14일만에 배우는 ASP.NET CORE

      김정수

      [C#/.NET 8.0]어서와, Blazor Server는 처음이지?강의 썸네일

      [C#/.NET 8.0]어서와, Blazor Server는 처음이지?

      RAZOR

      ★.NET 8.0★Blazor Server를 활용한 Web 개발 기초 강의입니다. EntityFrameworkCore를 활용한 DB CRUD를 편하게 하는 방법을 배워가세요. Razor Page UI Design "기초"를 알려드립니다. 강의에 사용된 Source Code도 제공해드립니다 :)

      초급

      초급

      C#, .NET, Blazor

      [C#/.NET 8.0]어서와, Blazor Server는 처음이지?강의 썸네일

      [C#/.NET 8.0]어서와, Blazor Server는 처음이지?

      RAZOR

      C#.NET 0.5년차~3년차(파트1)강의 썸네일

      C#.NET 0.5년차~3년차(파트1)

      개발자Park

      이 강의에서는 0.5년차부터 3년차 C# 응용프로그램 개발자가 꼭 알고 있어야 하는 내용을 다루게 됩니다.

      초급

      초급

      C#, .NET, winform

      C#.NET 0.5년차~3년차(파트1)강의 썸네일

      C#.NET 0.5년차~3년차(파트1)

      개발자Park

      C#.Net 0.5년차~3년차(파트2)강의 썸네일

      C#.Net 0.5년차~3년차(파트2)

      개발자Park

      이 강의에서는 0.5년차부터 3년차 C# 응용프로그램 개발자가 꼭 알고 있어야 하는 내용을 다루게 됩니다.

      초급

      초급

      C#, 네트워크, .NET

      C#.Net 0.5년차~3년차(파트2)강의 썸네일

      C#.Net 0.5년차~3년차(파트2)

      개발자Park

      [C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part6: 웹 서버강의 썸네일

      [C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part6: 웹 서버

      Rookiss

      게임 개발에 필요한 웹서버에 대한 전반적인 내용을 최신 ASP.NET Core (Blazor, WebAPI)를 이용해 학습하는 강의입니다.

      초급

      초급

      REST API, ASP.NET Core, Web API

      [C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part6: 웹 서버강의 썸네일

      [C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part6: 웹 서버

      Rookiss

      C# 프로그래밍 언어[기초과정]강의 썸네일

      C# 프로그래밍 언어[기초과정]

      개발자Park

      .NET Platform 위에 동작하는 ASP.NET,Winform,WPF,MAUI등의 개발을 위한 C#언어를 배웁니다.

      입문

      입문

      C#, .NET, asynchronous-programming

      C# 프로그래밍 언어[기초과정]강의 썸네일

      C# 프로그래밍 언어[기초과정]

      개발자Park

      WPF (C#, 자막제공)강의 썸네일

      WPF (C#, 자막제공)

      개발자Park

      윈폼에서 WPF의 도입을 고려하는 개발자, 미국 취업을 희망하는 응용프로그램 개발자, 개발자로 취업을 희망하는 분들에게 도움이 될만한 WPF 강의입니다. 이론 및 디자인 위주의 강의가 아니라 실무에서 사용할 수 있는 내용을 다루고 있습니다.

      초급

      초급

      C#, wpf, MVVM

      WPF (C#, 자막제공)강의 썸네일

      WPF (C#, 자막제공)

      개발자Park