ASP.NET Core와 함께 React 사용

  • 아티클

참고 항목

이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

Important

이 정보는 상업적으로 출시되기 전에 실질적으로 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적, 또는 묵시적인 보증을 하지 않습니다.

현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

Visual Studio는 ASP.NET Core 백 엔드가 있는 Angular, React 및 Vue와 같은 JavaScript 프레임워크를 기반으로 SPA(단일 페이지 앱)를 만들기 위한 프로젝트 템플릿을 제공합니다. 다음 템플릿:

  • 프런트 엔드 프로젝트와 백 엔드 프로젝트를 사용하여 Visual Studio 솔루션을 만듭니다.
  • 프런트 엔드에는 JavaScript 및 TypeScript(.esproj)에 Visual Studio 프로젝트 형식을 사용합니다.
  • 백 엔드에 ASP.NET Core 프로젝트를 사용합니다.

Visual Studio 템플릿을 사용하여 만든 프로젝트는 Windows, Linux 및 macOS의 명령줄에서 실행할 수 있습니다. 앱을 실행하려면 서버 프로젝트를 실행하는 데 사용합니다 dotnet run --launch-profile https . 서버 프로젝트를 실행하면 프런트 엔드 JavaScript 개발 서버가 자동으로 시작됩니다. https 현재 시작 프로필이 필요합니다.

Visual Studio 자습서

시작하려면 Visual Studio 설명서에서 React 를 사용하여 ASP.NET Core 앱 만들기 자습서를 따릅니다.

자세한 내용은 Visual Studio의 JavaScript 및 TypeScript를 참조 하세요.

ASP.NET 핵심 SPA 템플릿

Visual Studio에는 JavaScript 또는 TypeScript 프런트 엔드를 사용하여 ASP.NET Core 앱을 빌드하기 위한 템플릿이 포함되어 있습니다. 이러한 템플릿은 ASP.NET 및 웹 개발 워크로드가 설치된 Visual Studio 2022 버전 17.8 이상에서 사용할 수 있습니다.

JavaScript 또는 TypeScript 프런트 엔드를 사용하여 ASP.NET Core 앱을 빌드하기 위한 Visual Studio 템플릿은 다음과 같은 이점을 제공합니다.

  • 프런트 엔드 및 백 엔드에 대한 프로젝트 분리를 정리합니다.
  • 최신 프런트 엔드 프레임워크 버전을 최신 상태로 유지합니다.
  • Vite와 같은 최신 프런트 엔드 프레임워크 명령줄 도구와 통합합니다.
  • JavaScript 및 TypeScript 모두에 대한 템플릿입니다(Angular의 경우 TypeScript만 해당).
  • 다양한 JavaScript 및 TypeScript 코드 편집 환경.
  • JavaScript 빌드 도구를 .NET 빌드와 통합합니다.
  • npm 종속성 관리 UI.
  • Visual Studio Code 디버깅 및 시작 구성과 호환됩니다.
  • JavaScript 테스트 프레임워크를 사용하여 테스트 탐색기에서 프런트 엔드 단위 테스트를 실행합니다.

레거시 ASP.NET 핵심 SPA 템플릿

이전 버전의 .NET SDK에는 ASP.NET Core를 사용하여 SPA 앱을 빌드하기 위한 레거시 템플릿이 포함되어 있습니다. 이러한 이전 템플릿에 대한 설명서는 spa 개요의 ASP.NET Core 7.0 버전 및 Angular 및 React 문서를 참조하세요.

React 프로젝트 템플릿을 사용하는 ASP.NET Core는 React 및 CRA(Create React App)를 사용하여 풍부한 클라이언트 쪽 UI(사용자 인터페이스)를 구현하는 ASP.NET Core 앱에 대한 편리한 시작점을 제공합니다.

이 프로젝트 템플릿은 웹 API로 사용되는 ASP.NET Core 프로젝트 및 UI로 사용되는 CRA React 프로젝트를 만드는 것과 같습니다. 이 프로젝트 조합은 단일 단위로 빌드 및 게시할 수 있는 단일 ASP.NET Core 프로젝트에서 두 프로젝트를 호스트하는 편의를 제공합니다.

프로젝트 템플릿은 SSR(서버 쪽 렌더링)에 사용되지 않습니다. React 및 Node.js를 사용하는 SSR의 경우 Next.js 또는 Razzle을 고려합니다.

새 앱 만들기

빈 디렉터리에 dotnet new react 명령을 사용하여 명령 프롬프트에서 새 프로젝트를 만듭니다. 예를 들어 다음 명령은 디렉터리에 앱을 my-new-app 만들고 해당 디렉터리로 전환합니다.

dotnet new react -o my-new-app
cd my-new-app

Visual Studio 또는 .NET Core CLI에서 앱을 실행합니다.

생성된 .csproj 파일을 열고 여기에서 정상적으로 앱을 실행합니다.

빌드 프로세스는 첫 번째 실행에서 npm 종속성을 복원하고 이 작업에는 몇 분 정도 소요될 수 있습니다. 후속 빌드는 훨씬 더 빠릅니다.

프로젝트 템플릿은 ASP.NET Core 앱과 React 앱을 만듭니다. ASP.NET Core 앱은 데이터 액세스, 권한 부여 및 기타 서버 쪽 문제에 사용해야 합니다. 하위 디렉터리에 있는 ClientApp React 앱은 모든 UI 문제에 사용됩니다.

페이지, 이미지, 스타일, 모듈 등을 추가합니다.

ClientApp 디렉터리가 표준 CRA React 앱입니다. 자세한 내용은 공식 CRA 설명서를 참조하세요.

이 템플릿에서 만들어진 React 앱과 CRA 자체에서 만들어진 앱 간에는 약간 차이가 있지만 앱의 기능은 변경되지 않습니다. 템플릿에서 만들어진 앱에는 부트스트랩 기반 레이아웃 및 기본 라우팅 예제가 포함됩니다.

npm 패키지 설치

타사 npm 패키지를 설치하려면 하위 디렉터리에서 명령 프롬프트를 ClientApp 사용합니다. 예시:

cd ClientApp
npm install <package_name>

게시 및 배포

개발 시에 앱은 개발자 편의를 위해 최적화된 모드로 실행됩니다. 예를 들어 디버그할 때 원래 소스 코드를 볼 수 있도록 JavaScript 번들에 소스 맵이 포함됩니다. 앱은 디스크에서 JavaScript, HTML 및 CSS 파일 변경 내용을 감시하고 해당 파일의 변경을 확인하면 자동으로 다시 컴파일하고 다시 로드합니다.

프로덕션 시에는 성능에 최적화된 앱의 버전을 제공합니다. 이는 자동으로 수행하도록 구성됩니다. 게시할 때 빌드 구성은 클라이언트 쪽 코드의 축소된 변환 컴파일된 빌드를 내보냅니다. 개발 빌드와 달리 프로덕션 빌드는 서버에 Node.js를 설치할 필요가 없습니다.

표준 ASP.NET Core 호스팅 및 배포 방법을 사용할 수 있습니다.

개별적으로 CRA 서버 실행

프로젝트는 ASP.NET Core 앱이 개발 모드에서 시작될 때 백그라운드에서 CRA 개발 서버의 자체 인스턴스를 시작하도록 구성됩니다. 이 방법은 별도의 서버를 수동으로 실행할 필요가 없기 때문에 편리합니다.

이 기본 설정에는 단점이 있습니다. C# 코드를 수정하고 ASP.NET Core 앱을 다시 시작해야 할 때마다 CRA 서버가 다시 시작됩니다. 백업을 시작하려면 몇 초 정도가 필요합니다. C# 코드를 자주 편집하고 있고 CRA 서버가 다시 시작될 때까지 기다리지 않으려면 ASP.NET Core 프로세스와는 별도로 CRA 서버를 외부에서 실행합니다.

CRA 서버를 외부에서 실행하려면 명령 프롬프트에서 ClientApp 하위 디렉터리로 전환하고 CRA 개발 서버를 시작합니다.

cd ClientApp
npm start

ASP.NET Core 앱을 시작할 때 CRA 서버는 시작되지 않습니다. 수동으로 시작한 인스턴스가 대신 사용됩니다. 이를 통해 더 빠르게 시작하고 다시 시작할 수 있습니다. 더 이상 React 앱이 매번 다시 빌드할 때까지 기다리지 않습니다.

SignalR에 대한 프록시 미들웨어 구성

자세한 내용은 http-proxy-middleware를 참조하세요.

추가 리소스

업데이트된 React 프로젝트 템플릿은 React 및 CRA(create-react-app) 규칙을 사용하여 풍부한 클라이언트 쪽 UI(사용자 인터페이스)를 구현하는 ASP.NET Core 앱에 대한 편리한 시작점을 제공합니다.

이 템플릿은 API 백 엔드로 사용되는 ASP.NET Core 프로젝트 및 UI로 사용되는 표준 CRA React 프로젝트를 둘 다 만드는 것과 동일하지만, 단일 단위로 빌드 및 게시할 수 있는 단일 앱 프로젝트에 두 프로젝트를 모두 편리하게 호스트할 수 있습니다.

React 프로젝트 템플릿은 SSR(서버 쪽 렌더링)에 사용되지 않습니다. React 및 Node.js를 사용하는 SSR의 경우 Next.js 또는 Razzle을 고려합니다.

새 앱 만들기

빈 디렉터리에 dotnet new react 명령을 사용하여 명령 프롬프트에서 새 프로젝트를 만듭니다. 예를 들어 다음 명령은 디렉터리에 앱을 my-new-app 만들고 해당 디렉터리로 전환합니다.

dotnet new react -o my-new-app
cd my-new-app

Visual Studio 또는 .NET Core CLI에서 앱을 실행합니다.

생성된 .csproj 파일을 열고 여기에서 정상적으로 앱을 실행합니다.

빌드 프로세스는 첫 번째 실행에서 npm 종속성을 복원하고 이 작업에는 몇 분 정도 소요될 수 있습니다. 후속 빌드는 훨씬 더 빠릅니다.

프로젝트 템플릿은 ASP.NET Core 앱과 React 앱을 만듭니다. ASP.NET Core 앱은 데이터 액세스, 권한 부여 및 기타 서버 쪽 문제에 사용해야 합니다. 하위 디렉터리에 있는 ClientApp React 앱은 모든 UI 문제에 사용됩니다.

페이지, 이미지, 스타일, 모듈 등을 추가합니다.

ClientApp 디렉터리가 표준 CRA React 앱입니다. 자세한 내용은 공식 CRA 설명서를 참조하세요.

이 템플릿에서 만들어진 React 앱과 CRA 자체에서 만들어진 앱 간에는 약간 차이가 있지만 앱의 기능은 변경되지 않습니다. 템플릿에서 만들어진 앱에는 부트스트랩 기반 레이아웃 및 기본 라우팅 예제가 포함됩니다.

npm 패키지 설치

타사 npm 패키지를 설치하려면 하위 디렉터리에서 명령 프롬프트를 ClientApp 사용합니다. 예시:

cd ClientApp
npm install --save <package_name>

게시 및 배포

개발 시에 앱은 개발자 편의를 위해 최적화된 모드로 실행됩니다. 예를 들어 디버그할 때 원래 소스 코드를 볼 수 있도록 JavaScript 번들에 소스 맵이 포함됩니다. 앱은 디스크에서 JavaScript, HTML 및 CSS 파일 변경 내용을 감시하고 해당 파일의 변경을 확인하면 자동으로 다시 컴파일하고 다시 로드합니다.

프로덕션 시에는 성능에 최적화된 앱의 버전을 제공합니다. 이는 자동으로 수행하도록 구성됩니다. 게시할 때 빌드 구성은 클라이언트 쪽 코드의 축소된 변환 컴파일된 빌드를 내보냅니다. 개발 빌드와 달리 프로덕션 빌드는 서버에 Node.js를 설치할 필요가 없습니다.

표준 ASP.NET Core 호스팅 및 배포 방법을 사용할 수 있습니다.

개별적으로 CRA 서버 실행

프로젝트는 ASP.NET Core 앱이 개발 모드에서 시작될 때 백그라운드에서 CRA 개발 서버의 자체 인스턴스를 시작하도록 구성됩니다. 이 방법은 별도의 서버를 수동으로 실행할 필요가 없기 때문에 편리합니다.

이 기본 설정에는 단점이 있습니다. C# 코드를 수정하고 ASP.NET Core 앱을 다시 시작해야 할 때마다 CRA 서버가 다시 시작됩니다. 백업을 시작하려면 몇 초 정도가 필요합니다. C# 코드를 자주 편집하고 있고 CRA 서버가 다시 시작될 때까지 기다리지 않으려면 ASP.NET Core 프로세스와는 별도로 CRA 서버를 외부에서 실행합니다. 수행할 작업:

  1. 다음 설정을 사용하여 .envClientApp 하위 디렉터리에 파일을 추가합니다.

    BROWSER=none

    이렇게 하면 외부에서 CRA 서버를 시작할 때 웹 브라우저가 열리지 않습니다.

  2. 명령 프롬프트에서 하위 디렉터리로 ClientApp 전환하고 CRA 개발 서버를 시작합니다.

    cd ClientApp
npm start

  3. 자체 인스턴스 중 하나를 시작하지 않고 외부 CRA 서버 인스턴스를 사용하도록 ASP.NET Core 앱을 수정합니다. Startup 클래스에서 spa.UseReactDevelopmentServer 호출을 다음으로 바꿉니다.

    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

ASP.NET Core 앱을 시작할 때 CRA 서버는 시작되지 않습니다. 수동으로 시작한 인스턴스가 대신 사용됩니다. 이를 통해 더 빠르게 시작하고 다시 시작할 수 있습니다. 더 이상 React 앱이 매번 다시 빌드할 때까지 기다리지 않습니다.

Important

“서버 쪽 렌더링”은 이 템플릿에서 지원되는 기능이 아닙니다. 이 템플릿의 목표는 “create-react-app”을 사용하여 패리티를 충족하는 것입니다. 따라서 “create-react-app” 프로젝트에 포함되지 않은 시나리오와 기능(예: SSR)은 지원되지 않으며, 사용자를 위한 연습으로 유지되었습니다.

SignalR에 대한 프록시 미들웨어 구성

자세한 내용은 http-proxy-middleware를 참조하세요.

추가 리소스