ASP.NET Core 6.0의 React 프로젝트 템플릿 사용하기
.NET 6의 ASP.NET Core 관련해서 기본으로 제공해주는 React 템플릿을 사용하여 React.js 프로젝트를 생성하고 사용할 수 있습니다. React 프로젝트 템플릿은 React 및 create-react-app (CRA) 규칙을 사용하여 풍부한 클라이언트 쪽 UI(사용자 인터페이스)를 구현하는 ASP.NET Core 앱에 대한 편리한 시작점을 제공합니다.
The updated React project template provides a convenient starting point for ASP.NET Core apps using React and create-react-app (CRA) conventions to implement a rich, client-side user interface (UI).
React 프로젝트 템플릿은 SSR(서버 쪽 렌더링)에 사용되지 않습니다. React 및 Node.js를 사용하는 SSR의 경우 Next.js 또는 Razzle을 참고하세요.
새 앱 만들기
ASP.NET Core 2.1 및 이후 버전이 설치되어 있는 경우 React 프로젝트 템플릿을 설치할 필요가 없습니다. 기본으로 프로젝트 템플릿이 포함되어 있습니다.
빈 디렉터리에 dotnet new react 명령을 사용하여 명령 프롬프트에서 새 프로젝트를 만듭니다. 예를 들어 다음 명령은 visual-academy 디렉터리에 앱을 만들고 해당 디렉터리로 전환합니다.
dotnet new react -o visual-academy
cd visual-academy
Visual Studio 또는 .NET 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>
예를 들어, 박용준 강사의 강의에서 사용되는 axios를 설치하라면 다음 명령을 명령 프롬프트에서 실행합니다.
cd ClientApp
npm install --save axios
게시(publish) 및 배포(deploy)
개발 시에 앱은 개발자 편의를 위해 최적화된 모드로 실행됩니다. 예를 들어 디버그할 때 원래 소스 코드를 볼 수 있도록 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 서버를 외부에서 실행합니다.
이를 수행하려면 다음 단계를 시작합니다.
다음 설정을 사용하여 ClientApp 하위 디렉터리에 .env 파일을 추가합니다.
BROWSER=none이렇게 하면 외부에서 CRA 서버를 시작할 때 웹 브라우저가 열리지 않습니다.
명령 프롬프트에서 ClientApp 하위 디렉터리로 전환하고 CRA 개발 서버를 시작합니다.
cd ClientApp npm start자체 인스턴스 중 하나를 시작하지 않고 외부 CRA 서버 인스턴스를 사용하도록 ASP.NET Core 앱을 수정합니다. Startup 클래스에서
spa.UseReactDevelopmentServer호출을 다음으로 바꿉니다.spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
ASP.NET Core 앱을 시작할 때 CRA 서버는 시작되지 않습니다. 수동으로 시작한 인스턴스가 대신 사용됩니다. 이를 통해 더 빠르게 시작하고 다시 시작할 수 있습니다. 더 이상 React 앱이 매번 다시 빌드할 때까지 기다리지 않습니다.
IMPORTANT
"서버 쪽 렌더링"은 이 템플릿에서 지원되는 기능이 아닙니다.