우리는 사람들이 사진과 댓글을 게시할 수 있는 간단한 웹 사이트를 구축할 것입니다.
우리는 3개의 부품을 만들 예정입니다.
1.1 - 프런트엔드 클라이언트
이 프로젝트는 HTML 사용자 인터페이스를 동적으로 구성하여 브라우저를 통해 사용자와 상호 작용하고 gRPC Web 및 HttpClient를 사용하여 자체 서버와 통신합니다.
1.2 - 프론트엔드용 백엔드(BFF)
이 프로젝트는 Blazor 클라이언트 애플리케이션을 호스팅하고 제공합니다. 또한 REST 및 gRpc 백엔드로 호출을 전달하는 역방향 프록시 역할도 합니다.
2.1 - 사진 REST 서비스
2.2 - 주석 gRPC 서비스
이러한 프로젝트는 서버에 데이터를 저장하고 http, json 및 protobuf를 통해 클라이언트 요청에 응답하는 역할을 담당합니다.
이 프로젝트에서는 인증 부분을 처리합니다. 클라이언트 애플리케이션이 서비스에 액세스하는 데 사용할 JWT 토큰을 발행합니다.
이 자습서를 작성할 당시 .NET Core 7.0은 Visual Studio 2022에서만 사용할 수 있습니다. .NET Core 7.0을 사용하려면 최신 버전의 Visual Studio 2022를 설치하는 것이 좋습니다.
업데이트된 지침 세트를 보려면 시작하기 설명서로 이동하세요.
우리는 몇 가지 간단한 단계를 따를 것입니다. 각 단계는 하나의 작업에 중점을 두고 이전 단계를 기반으로 구축됩니다. 우리는 그 과정에서 점점 더 복잡해질 간단한 프로젝트부터 시작할 것입니다. 예를 들어 처음에는 인증 및 권한 부여에 중점을 두지 않습니다. 이후 단계에서 추가하겠습니다.
Lab01에서 시작하여 각 readme.md를 따르면 각 실습을 완료하고 자신의 코드를 사용하여 다음 실습을 계속할 수 있습니다. 이 리포지토리에 제공된 Start
폴더나 Solution
폴더를 열 필요가 없습니다.
Start
폴더는 각 단계의 시작점입니다.Solution
폴더는 각 랩이 끝날 때 프로젝트가 어떻게 될지 확인하려는 경우를 위해 제공되는 각 단계의 최종 버전입니다. 여러분이 해야 할 일은 시도하려는 실습에 해당하는 Start
폴더(처음부터 시작하려면 Lab01/Start
)를 열고 readme.md
파일에 있는 지침을 따르는 것입니다. 완료되면 작업 내용을 Solution
폴더에 제공된 솔루션과 자유롭게 비교해 보세요.
Labs
폴더를 엽니다.Lab01
하위 폴더로 이동합니다.Start
하위 폴더로 이동readme.md
파일에 포함된 지침을 따르세요.Lab15SolutionblazorPhotoSharingApplicationPhotoSharingApplication.sln
엽니다.애플리케이션 시작
또는
나는 당신이 웹 애플리케이션 구축에 관심이 있는 C# 프로그래머라고 가정합니다. 나이에 따라 이미 asp, aspx, mvc 및/또는 razor 페이지를 사용해 본 적이 있고 이제 blazor를 사용해 보고 싶을 수도 있습니다. 여러분은 이미 HTML과 CSS에 익숙할 수도 있고 Angular, React 또는 Vue와 같은 일부 자바스크립트 프레임워크를 사용해 보셨을 수도 있습니다.
웹 개념과 기술에 대한 수많은 문서를 링크할 예정이므로 웹 개발자 전문가가 아니더라도 걱정하지 마세요. 그 과정에서 모든 것을 배울 수 있습니다. 하지만 적어도 C#에 능숙 해야 합니다 . 그렇지 않으면 이 튜토리얼을 따라가기가 어려울 것입니다. 우리가 작성할 코드의 대부분은 실제로 C#이 될 것입니다. 우리는 HTML도 작성할 예정이지만 배우기 쉽기 때문에 문제가 되지 않습니다.
Duende.Bff.Yarp
프레임워크를 사용하여 JWT 전달자 토큰 검색 및 전달