로그인을 해주세요
![[HD]Blazor(블레이저)를 사용하여 풀스택 웹 개발 하기 Part.1-2 과정이미지](/theme/6/img/apply/view_blank.png)
[HD]Blazor(블레이저)를 사용하여 풀스택 웹 개발 하기 Part.1-2
- 교육기간
- 30일
- 강의구성
- 20차시
본 과정은 Blazor와 C#을 사용하여 풀스택 기반으로 웹앱을 만드는 방법을 살펴봅니다.
▶교육대상
- 최신의 Blazor(블레이저)를 사용하여 웹앱을 만들고자하는 학생 또는 개발자
▶교육내용
1. 관리자 모드 작성용 부트스트랩 템플릿인 SB Admin 2 다운로드 및 Admin 프로젝트에 적용
2. 대시보드 템플릿에 ChartJs.Blazor 컴포넌트 샘플 코드를 적용하기
3. MatBlazor NuGet 패키지를 설치하고 머티리얼 디자인 형태로 폼을 꾸미는 컴포넌트 사용하기 데모
4. VisualAcademy 솔루션에서 사용할 웹 및 API 등의 프로젝트 미리 생성
5. Samples 폴더 생성 후 강의 데모 소스 모아놓기
6. TabDemo_Bootstrap의 Tab 기능을 자바스크립트 방식과 Blaozr 방식으로 적용하기
7. 현재 사이트에서 사용된 기술 리스트와 추천 사이트 출력하는 컴포넌트 만들기
8. JavaScript Interop을 사용하여 Bootstrap Carousel 컴포넌트를 실행하도록 설정
9. VideoAppCore 솔루션 생성 및 GitHub Private 저장소에 업로드
10. 비디오 앱을 위한 Videos 테이블 생성 및 로컬 DB에 게시
11. Videos 테이블과 일대일로 매핑 Video 모델 클래스 생성
12. Videos 테이블에 대한 CRUD API 명세서 가이드용 인터페이스 생성
13. 리포지토리 인터페이스를 상속하는 3가지 리포지토리 클래스 만들기
14. DbContext 클래스 생성 및 웹 프로젝트의 DI 컨테이너에 DbContext 클래스 등록
15. VideoDbContext 사용 테스트 레이저 컴포넌트 페이지 작성
16. 여러 DBMS를 편하게 대응하기위해서 Created 컬럼을 DateTimeOffset에서 DateTime으로 변경
17. 레코드에 대한 상태 추적을 위한 4개의 속성 제공하는 AuditableBase 클래스 생성 및 상속
18. 비동기 메서드를 제공하는 인터페이스와 이를 상속하는 리포지토리 클래스 생성
19. 3가지 형태의 리포지토리 클래스 코드 구현 후 DI 등록 후 테스트 페이지에서 테스트
20. Videos_비디오 리스트를 출력하는 Index 컴포넌트 작성
▶수료기준
|
항목 |
진도율 |
진행단계평가 |
최종평가 |
과제 |
수료점수 |
|
평가비율 |
100% |
0% |
0% |
0% |
60점이상 |
|
수료조건 |
80% |
없음 |
없음 |
없음 |
※ 수료기준은 각 평가항목의 점수가 수료기준 점수 이상이고 총점이 60점 이상이어야 합니다.
학습목표
1. Blazor와 C#을 사용하여 풀스택 기반으로 웹앱을 만드는 방법을 살펴봅니다.2. 최근 유행하는 웹 개발 방식인 SPA(Single Page Application) 방식으로 구현할 때 Blazor를 사용하면 편리하게 구현이 가능합니다.
3. 웹 응용 프로그램 제작시 자주 사용되는 CRUD 및 페이징, 팝업, 차트 출력, 파일 업로드 등의 기능을 하나의 웹앱으로 통합해서 데모로 보여줍니다.
강의목차(총 20강)
-
1. 1. 관리자 모드 작성용 부트스트랩 템플릿인 SB Admin 2 다운로드 및 Admin 프로젝트에 적용 54분
2. 2. 대시보드 템플릿에 ChartJs.Blazor 컴포넌트 샘플 코드를 적용하기 33분
3. 3. MatBlazor NuGet 패키지를 설치하고 머티리얼 디자인 형태로 폼을 꾸미는 컴포넌트 사용하기 데모 16분
4. 4. VisualAcademy 솔루션에서 사용할 웹 및 API 등의 프로젝트 미리 생성 18분
5. 5. Samples 폴더 생성 후 강의 데모 소스 모아놓기 12분
6. 6. TabDemo_Bootstrap의 Tab 기능을 자바스크립트 방식과 Blaozr 방식으로 적용하기 23분
7. 7. 현재 사이트에서 사용된 기술 리스트와 추천 사이트 출력하는 컴포넌트 만들기 29분
8. 8. JavaScript Interop을 사용하여 Bootstrap Carousel 컴포넌트를 실행하도록 설정 10분
9. 9. VideoAppCore 솔루션 생성 및 GitHub Private 저장소에 업로드 15분
10. 10. 비디오 앱을 위한 Videos 테이블 생성 및 로컬 DB에 게시 14분
11. 11. Videos 테이블과 일대일로 매핑 Video 모델 클래스 생성 13분
12. 12. Videos 테이블에 대한 CRUD API 명세서 가이드용 인터페이스 생성 15분
13. 13. 리포지토리 인터페이스를 상속하는 3가지 리포지토리 클래스 만들기 15분
14. 14. DbContext 클래스 생성 및 웹 프로젝트의 DI 컨테이너에 DbContext 클래스 등록 27분
15. 15. VideoDbContext 사용 테스트 레이저 컴포넌트 페이지 작성 12분
16. 16. 여러 DBMS를 편하게 대응하기위해서 Created 컬럼을 DateTimeOffset에서 DateTime으로 변경 11분
17. 17. 레코드에 대한 상태 추적을 위한 4개의 속성 제공하는 AuditableBase 클래스 생성 및 상속 14분
18. 18. 비동기 메서드를 제공하는 인터페이스와 이를 상속하는 리포지토리 클래스 생성 11분
19. 19. 3가지 형태의 리포지토리 클래스 코드 구현 후 DI 등록 후 테스트 페이지에서 테스트 22분
20. 20. Videos_비디오 리스트를 출력하는 Index 컴포넌트 작성 16분
