[React] ASP.NET Core React Project Template 사용

Visual Studio에서 제공하는 React 프로젝트 템플릿은 ASP.NET Core와 React, create-react-app(CRA) 컨벤션을 사용하는 Client-Side UI 개발을 지원합니다.

이 프로젝트는 ASP.NET Core를 Backend로 사용하며, create-react-app을 통해 생성된 React를 UI로 사용합니다. ASP.NET Core와 React가 하나의 프로젝트로 구성되어 있어 한번에 빌드하고 한번에 배포 할 수 있는 편리함을 제공합니다.

이 React 프로젝트 템플릿은 Server-side rendering(SSR)을 지원하지 않습니다. 이 프로젝트 템플릿은 create-react-app 을 기반으로 구성되어 있습니다. 따라서 create-react-app에서 지원하지 않는 SSR은 지원하지 않습니다. SSR을 지원하려면 Next.js 또는 Razzle 사용을 고려해주세요.

개발과 배포

Development 환경에서는 개발 편의성에 초점을 둔 모드로 실행됩니다. 예를들어 자바스크립트는 Source Map을 포함하여 번들링됩니다. 따라서 브라우저로 디버깅할 때 원본 JavaScript 소스코드를 확인 할 수 있습니다. JavaScript, HTML, CSS 파일이 변경되면 이를 자동으로 감지하여 React 앱을 다시 컴파일하고 실행합니다. 따라서 변경사항이 브라우저에 실시간으로 반영됩니다.

Production 모드에서는 성능에 초점을 둔 최적화된 결과를 생성합니다. 이러한 과정은 앱을 배포할 때 자동으로 이루어집니다. 예를들어 빌드가 진행될 때 Minified, Transpiled 과정을 거친 Client-Side 코드가 생성되고 배포됩니다. 이러한 과정은 서버에 Node.js 설치를 필요로 하지 않습니다.

CRA 서버 실행

이 프로젝트를 실행하면 CRA Development 서버 인스턴스가 자동으로 시작되고 React 앱이 실행됩니다. 또한 ASP.NET Core 앱도 IIS상에서 디버깅 모드로 시작됩니다. 별도의 설정 없이도 ASP.NET Core와 React가 동시에 시작되므로 편리하게 개발할 수 있습니다.

하지만 이러한 동작 방식은 단점이 있습니다. ASP.NET Core 프로젝트에서 C# 코드를 수정하고 결과를 확인하려면 프로젝트를 다시 시작해야 합니다. 이 과정은 CRA Development 서버도 재시작되게 만듭니다. 따라서 ASP.NET Core 프로젝트만 실행하는 것 보다 더 많은 시간이 소요되게 됩니다. 만약 C# 코드를 빈번히 수정해야 하는 상황이라면 CRA 서버와 ASP.NET Core의 실행을 분리하는 것이 좋습니다. 다음 과정을 통해 CRA 서버와 ASP.NET Core 실행을 분리할 수 있습니다.

1. ClientApp 폴더의 .env 파일을 열고 다음과 같이 설정합니다. 이 설정은 앱이 실행될 때 브라우저가 열리는 것을 방지합니다.

   BROWSER=none
   

2. 명령 프롬프트(CMD)에서 ClientApp 폴더로 이동 후 아래 코드를 실행하면 CRA 서버를 직접 실행할 수 있습니다.

   npm start

3. ASP.NET Core 프로젝트가 실행될 때 외부의 CRA 서버를 사용하도록 설정해야합니다. Startup.cs 파일에서 spa.UseReactDevelopmentServer를 다음과 같이 수정해주세요.

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

이제 ASP.NET Core 앱을 실행해보면 CRA 서버가 실행되는 대신 직접 생성한 CRA 서버가 사용되는 것을 볼 수 있습니다. 따라서 ASP.NET Core 앱은 더 빠르게 시작될 것입니다. 또한 매번 React 앱이 재실행 되지 않기 때문에 더 빠르게 결과를 테스트 할 수 있습니다.