[Blazor와 C#을 이용한 풀스택 웹앱 만들기 프로젝트]

Blazor와 C#을 사용하여 풀스택 기반으로 웹앱을 만드는 방법을 살펴봅니다.

최근 유행하는 웹 개발 방식인 SPA(Single Page Application) 방식으로 구현할 때 Blazor를 사용하면 편리하게 구현이 가능합니다. 웹 응용 프로그램 제작시 자주 사용되는 CRUD 및 페이징, 팝업, 차트 출력, 파일 업로드 등의 기능을 하나의 웹앱으로 통합해서 데모로 보여줍니다.

본 강의에서는 Blazor와 C#을 이용하여 웹앱을 만드는 과정에 대해서 이론적으로 학습해보고, 이후 실제 프로젝트를 만들어보는 과정을 통해 해당 내용에 대해 숙달 학습해보는 형태로 구성되어 있습니다.

실습은 다음과 같은 내용들입니다. 먼저는 Blazor와 C#을 사용하여 공지사항, 자료실, 답변형 게시판을 만드는 방법을 살펴봅니다. 기본형 게시판을 만들면서 웹앱 작성시 필수가되는 CRUD 데이터베이스 프로그래밍을 학습합니다. 공지사항 게시판을 만들면서 페이지 이동 또는 팝업을 통한 데이터베이스 입출력 기능을 구현합니다. 자료실 게시판을 만들면서 파일을 업로드하고 다운로드하는 방법을 배우고 엑셀 파일을 업로드하거나 다운로드하는 방식으로 확장하는 기능을 소개합니다.

MS의 최신 기술에 관심이 많으신 분들은 수강하셔서 재밌는 경험 및 지식을 얻어가실 수 있을 거라고 생각합니다. 많은 관심 부탁드립니다.

자세한 목차는 아래와 같습니다.

<목차>

[HD]Blazor(블레이저)를 사용하여 풀스택 웹 개발 하기 Part.1-1

• Blazor(블레이저) 소개 및 강의 시작

• Blazor(블레이저) 개발 환경 구축 및 Blazor Hello World 만들기

• 미리보기 세미나_닷넷코어 3.1 설치 및 Blazor 사용해 입출력 기능이 있는 아이디어 관리자 앱 만들기

• Blazor 학습을 위한 BlazorApp 이름의 Blazor 프로젝트를 만들고 GitHub에 푸시

• ASP.NET Core Blazor 소개 및 지원되는 플랫폼

• 블레이저에서 알아야 할 8가지 핵심 개념

• TodoListInMemory_초간단 인-메모리 TODO 리스트 만들기

• Bonus_용돈 나누기 앱 만들기

• BlazorForm_EditForm 컴포넌트를 사용하여 폼 작성 및 폼 유효성 검사 진행하기

• ParentChild_부모 컴포넌트에서 자식 컴포넌트로 또는 그 반대로 데이터 주고 받기

• SearchBox_중첩 컴포넌트_부모 컴포넌트와 자식 컴포넌트 그리고 EventCallback 대리자

• MatBlazor_머티리얼 다지인을 손쉽게 구현하는 MatBlazor 컴포넌트 소개

• ChartJs.Blaozr 컴포넌트를 사용하여 여러 종류의 차트를 빠르게 그리기

• FrmFileUploadTest_Blazor에서 단일 파일 업로드하기

• JavaScript interop을 사용하여 닷넷에서 자바스크립트를 자바스크립트에서 닷넷 메서드를 호출하기

• VisualAcademy 프로젝트 생성 및 StartBootstrap의 ModernBusiness 템플릿 적용

• 메인 레이아웃 및 Index, About, Services 페이지 구현

• Blazor 컴포넌트의 구조 설명 및 코드 비하인드 파일 생성 그리고 OnInitialized 이벤트 처리기 추가

• PortfolioWebsites 컴포넌트 추가 및 버튼 클릭에 대한 이벤트 처리기 구현 그리고 NavigationManger 참조

• Modern Business 템플릿의 모든 HTML 페이지를 Blazor 컴포넌트로 복제 완료

  
  

[HD]Blazor(블레이저)를 사용하여 풀스택 웹 개발 하기 Part.1-2

• 관리자 모드 작성용 부트스트랩 템플릿인 SB Admin 2 다운로드 및 Admin 프로젝트에 적용

• 대시보드 템플릿에 ChartJs.Blazor 컴포넌트 샘플 코드를 적용하기

• MatBlazor NuGet 패키지를 설치하고 머티리얼 디자인 형태로 폼을 꾸미는 컴포넌트 사용하기 데모

• VisualAcademy 솔루션에서 사용할 웹 및 API 등의 프로젝트 미리 생성

• Samples 폴더 생성 후 강의 데모 소스 모아놓기

• TabDemo_Bootstrap의 Tab 기능을 자바스크립트 방식과 Blaozr 방식으로 적용하기

• 현재 사이트에서 사용된 기술 리스트와 추천 사이트 출력하는 컴포넌트 만들기

• JavaScript Interop을 사용하여 Bootstrap Carousel 컴포넌트를 실행하도록 설정

• VideoAppCore 솔루션 생성 및 GitHub Private 저장소에 업로드

• 비디오 앱을 위한 Videos 테이블 생성 및 로컬 DB에 게시

• Videos 테이블과 일대일로 매핑 Video 모델 클래스 생성

• Videos 테이블에 대한 CRUD API 명세서 가이드용 인터페이스 생성

• 리포지토리 인터페이스를 상속하는 3가지 리포지토리 클래스 만들기

• DbContext 클래스 생성 및 웹 프로젝트의 DI 컨테이너에 DbContext 클래스 등록

• VideoDbContext 사용 테스트 레이저 컴포넌트 페이지 작성

• 여러 DBMS를 편하게 대응하기위해서 Created 컬럼을 DateTimeOffset에서 DateTime으로 변경

• 레코드에 대한 상태 추적을 위한 4개의 속성 제공하는 AuditableBase 클래스 생성 및 상속

• 비동기 메서드를 제공하는 인터페이스와 이를 상속하는 리포지토리 클래스 생성

• 3가지 형태의 리포지토리 클래스 코드 구현 후 DI 등록 후 테스트 페이지에서 테스트

• Videos_비디오 리스트를 출력하는 Index 컴포넌트 작성

[HD]Blazor(블레이저)를 사용하여 풀스택 웹 개발 하기 Part.1-3

• 05_13_Videos_데이터 입력 페이지 구현 완료

• 05_14_Videos_인-메모리 데이터베이스를 사용하여 EF Core 리포지토리에 대한 단위 테스트 작성

• 05_15_Videos_비동기 상세보기, 수정, 삭제 메서드에 대한 단위 테스트 코드 작성

• 05_16_Videos_상세보기 및 삭제 페이지 구현

• 05_17_Videos_수정 페이지까지 구현 완료 후 JSRuntime으로 삭제 확인 메시지 출력

• 06_01_ManufacturerAppCore_미리 완성된 프로젝트 소스 및 실행 데모 진행

• 06_02_ManufacturerApp_고객사 리스트 관리 앱 만들기 시작 및 리스트 및 삭제 기능까지 구현

• 06_03_ManufacturerApp_고객사 등록 및 수정 기능을 하나의 서브 컴포넌트로 구현하기

• 06_04_ManufacturerApp_참고_코드 리팩터링_테스트 코드 추가

• 06_05_참고_리스트 페이지에 페이저 컴포넌트(페이징 헬퍼 컨트롤) 추가하기

  
  

[HD]Microsoft 최신의 웹기술 - Blazor(블레이저) 프로그래밍 (게시판 프로젝트) Part.1

• Blazor 게시판 프로젝트 강의 소개

• ArticleApp_게시판 프로젝트 시작

• ArticleApp_솔루션 및 프로젝트 생성 그리고 GitHub에 공개

• 최소 크기의 모델과 테이블 생성 그리고 로컬 데이터베이스 게시

• 리포지토리 패턴과 리포지토리 인터페이스

• Entity Framework Core 참조 및 데이터베이스 컨텍스트 클래스 생성

• 리포지토리 클래스의 주요 비동기 메서드 기능 구현

• 테스트 프로젝트에서 리포지토리 클래스의 모든 비동기 메서드 테스트

• Blazor 프로젝트 생성 및 게시판 관련 기본 페이지 생성

• 공통 클래스에 대한 의존성 주입 관련 코드를 Startup 파일에 추가

• 게시판 리스트 페이지 작성

• 게시판 글쓰기 페이지 작성

• 게시판 상세보기 페이지 작성

• 게시판 수정 페이지 작성 및 Content 열 추가 후 관련 코드 수정

• 게시판 삭제 페이지 작성 및 확인 관련 기능을 IJSRuntime으로 구현

• 게시판 리스트에 페이저 컴포넌트 적용 및 기본 페이징 구현

• 페이저 컴포넌트 UI 만들기

• IsPinned 속성 추가 및 공지글로 설정하는 기능을 모달 폼으로 구현하기

• 부트스트랩 모달 폼을 사용하여 관리자 전용 데이터 삭제 모달 다이얼로그 구현

• 부트스트랩 모달 폼을 사용하여 관리자 전용 데이터 입력 및 수정 모달 폼 구현

• 상세보기 내용의 줄바꿈 등을 추가 및 게시판의 UI를 개선하기

• 인라인 코드 방식을 코드 비하인드 방식으로 변경

• DulPager_페이저 컴포넌트를 Razor 클래스 라이브러리로 만들어 NuGet 갤러리에 공개

• 게시판의 페이저 컴포넌트를 NuGet 갤러리의 DulPager로 대체

[HD]Microsoft 최신의 웹기술 - Blazor(블레이저) 프로그래밍 (게시판 프로젝트) Part.2

• NoticeApp 솔루션 생성 및 NoticeApp.SqlServer 이름의 SQL Server 데이터베이스 프로젝트 생성 후 GitHub에 게시

• Notices 테이블과 일대일로 매핑되는 Notice 모델 클래스 생성

• 리포지토리 인터페이스 및 클래스 기본 모양 구현하기

• Repository 클래스에 생성자로 DbContext 주입 후 AddAsync 메서드의 기본 코드 작성

• NoticeRepositoryAsyncTest_MSTest 프로젝트 생성 및 AddAsync 메서드 테스트

• GetAll 메서드 코드 구현 및 테스트 코드 생성 후 테스트 완료

• 고정된 레코드 개수와 전체 레코드 개수를 함께 반환하는 GetStatus 메서드 생성 및 테스트

• NoticeRepositoryAsync 클래스의 모든 메서드 코드 본문 구현 완료

• NoticeRepositoryAsyncTest에서 주요 API 테스트 완료

• NoticesController_공지사항 관련 Web API 생성 및 메서드 구현

• Blazor 프로젝트인 NoticeApp 프로젝트 생성 및 리스트 페이지 구현

• Notices_입력부터 삭제까지 CRUD 기능 구현 완료

• Manage 페이지와 EditorForm 컴포넌트 작성하기

• DeleteDialog_모달 폼으로 삭제하는 기능 구현

• Manage 컴포넌트에 인라인 폼 기능 적용 및 ParentId 매개 변수 추가

• SearchBox_공지사항 리스트와 관리 페이지에 검색 기능 구현하기

• Notices_Report_Bar Chart로 1년동안의 글 작성 개수 출력하기

  
  

[HD]Microsoft 최신의 웹기술 - Blazor(블레이저) 프로그래밍 (게시판 프로젝트) Part.3

• UploadApp 이름으로 자료실 게시판 만들기 프로젝트 진행하기

• UploadApp_NoticeApp 솔루션을 그대로 UploadApp 솔루션으로 복제 후 자료실 프로젝트 기본 코드 생성

• BlazorInputFIle 컴포넌트를 사용하여 파일 업로드

• IFileStorageManager 인터페이스 및 파일 업로드 다운로드 삭제 기본 코드 작성

• 파일 다운로드 기능 추가

• 자료실 게시판 파일 업로드 및 다운로드 그리고 삭제 기능 구현 완료

• ParentKey 열을 추가하고 GUID에 해당하는 데이터만 리스트로 표시

• EPPlus 패키지를 사용하여 엑셀 파일을 업로드 후 해당 데이터를 한꺼번에 데이터베이스에 입력하기

• 엑셀 다운로드 기능 구현 추가

• Sorting_리스트 페이지의 Name과 Title 제목에 대한 소팅(정렬) 기능 추가

• UploadApp 솔루션을 ReplyApp 솔루션으로 그대로 복제 후 자료실 게시판을 Qna 게시판으로 변경 시작

• 자료실 게시판 소스를 바탕으로 답변형 게시판 기능을 적용하기

• 답변형 게시판 UI 업데이트 및 ReadCount 열 추가

• 부록_참고_활용강좌_ReplyApp 솔루션을 바탕으로 공통 코드를 관리하는 CommonValueApp 솔루션 만들기 데모