net5 react tutorial

React를 사용하는 ASP.NET 5 SPA에 대한 튜토리얼 및 샘플 코드

개요

기본 템플릿 코드를 생성하려면 다음을 따르세요.

• https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-5.0&tabs=netcore-cli

자세한 설명은 아래 내용을 확인하시면 됩니다.

• https://dev.to/packt/creating-spas-using-asp-net-core-and-react-59a0

폴더 구조는 다음과 같습니다

• my-new-app ClientApp 폴더: React 앱입니다. 빌드 폴더의 빌드 출력이 제공됩니다.
• my-new-app Controllers 폴더: 여기에는 React 앱이 요청을 보낼 수 있는 더미 웹 API가 있습니다.
  • 백엔드에서 프런트엔드로 데이터를 전달하려면 웹 API를 사용해야 합니다. 인증 전에 데이터가 필요한 경우, 보호할 필요가 없는 데이터를 전달하기 위해 인증 없이 API 경로를 생성할 수 있습니다.
• my-new-app Pages 폴더: 여기에는 표준 ASP.NET Razor 페이지가 있습니다.
• my-new-app Program.cs: 표준 ASP.NET 파일입니다.
• my-new-app Startup.cs: 이는 CilentApp build 폴더에서 SPA 정적 파일을 제공함을 지정합니다. 이는 또한 Web API를 설정합니다.
• my-new-app WeatherForcast.cs: 여기에는 더미 웹 API에서 사용되는 모델이 있습니다.

앱이 실행된 후 https://localhost:5001을 열어 웹사이트를 확인하세요.

GitHub 작업 포함

• DOTNET 빌드 및 테스트
• CodeQL

유용한 Visual Studio Code 확장

• https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp
• https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

유용한 Visual Studio 코드 참조

• https://docs.microsoft.com/en-us/dotnet/core/tutorials/with-visual-studio-code#debug
• https://docs.microsoft.com/en-us/dotnet/core/tools/
• https://stackoverflow.com/questions/34275209/xml-auto-commenting-c-sharp-in-visual-studio-code
• https://stackoverflow.com/questions/47995468/vscode-c-sharp-go-to-definition-f12-not-working
• https://www.strathweb.com/2019/04/roslyn-analyzers-in-code-fixes-in-omnisharp-and-vs-code/

유용한 .NET CLI 명령

• (백엔드 및 프런트엔드에 대한 기본 템플릿 만들기) dotnet new React -o my-new-app
• (Powershell) SET ASPNETCORE_ENVIRONMENT=개발
• (my-new-app 폴더에 있음) dotnet build
• (my-new-app 폴더에 있음) dotnet run