ASP.Net 구축 중 React 옵션인 dotnet new react를 하게 되면 나오는 프로젝트에 대해서 분석해본다.
참고)
다음 사이트에서는 dotnet new react가 downside(단점)가 있다고 한다.
.csproj
맨 처음 작성하면 나오는 .csproj파일에 대해서 알아본다.
Project 요소
Project 요소는 모든 프로젝트 파일의 루트 요소입니다. 프로젝트 파일의 XML 스키마를 식별하는 것 외에도 Project 요소에는 빌드 프로세스의 진입점을 지정하는 특성이 포함될 수 있습니다.
Project 태그
<Project Sdk="Microsoft.NET.Sdk.Web">
<!-- 이하 내용-->
</Project>- 기본적으로 Project라는 태그에 싸여있다.
PropertyGroup
속성 및 조건
프로젝트 파일은 일반적으로 프로젝트를 성공적으로 빌드하고 배포하기 위해 다양한 정보를 제공해야 합니다.
이러한 정보에는
- 서버 이름
- 연결 문자열
- 자격 증명
- 빌드 구성
- 원본 및 대상 파일 경로
- 사용자 지정을 지원하기 위해 포함하려는 기타 정보
가 포함될 수 있습니다.
프로젝트 파일에서 속성은PropertyGroup요소 내에서 정의되어야 합니다. MSBuild 속성은 키-값 쌍으로 구성됩니다. PropertyGroup 요소 내에서 요소 이름은 속성 키를 정의하고 요소의 콘텐츠는 속성 값을 정의합니다.
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<Nullable>enable</Nullable>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
<IsPackable>false</IsPackable>
<SpaRoot>ClientApp\</SpaRoot>
<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
<SpaProxyServerUrl>https://localhost:44408</SpaProxyServerUrl>
<SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>-
TargetFramework로 프로젝트 .net 버전을 표기한다.
-
Nullable은 전체 프로젝트에 Nullable을 적용한다는 뜻이다.
다음 문서를 참고 -
TypeScriptCompileBlocked에 대한 설명은 다음과 같다.
If you are using a different build tool to build your project (e.g. gulp, grunt , etc.) and VS for the development and debugging experience, set
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>in your project.
Project를 빌드하는 다른 빌드 툴을 사용하고 있는 중에 VS에서 개발과 디버깅 해야할 때, True로 한다.
This should give you all the editing support, but not the build when you hit F5.
True로 할 경우, 모든 Edit 지원을 할 수 있게 주지만, F5키를 눌렀을 때 빌드하진 않는다.
(https://www.typescriptlang.org/docs/handbook/compiler-options-in-msbuild.html) -
IsPackable은 true일 때 dotnet pack을 실행하는 경우 패키지에 포함할 수 있는 모든 프로젝트가 솔루션에 압축된다.
-
SpaRoot는 앞으로 보일 모든 SpaRoot변수를 다음으로 한다는 이야기이다.
-
DefaultItemExcludes는 GLOB (글로벌 패턴) 포함, 제외 및 제거에서 제외할 파일과 폴더의 GLOB 패턴을 정의할 수 있다. 단, 기본적으로 ./bin 및 ./obj 폴더는 GLOB 패턴에서 제외된다.
-
ImplicitUsings는 빌드 중인 프로젝트 유형에 대한 공통 지시문을 자동으로 추가한다.
ItemGroup
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="6.0.4" />
</ItemGroup>
<ItemGroup>
<!-- Don't publish the SPA source files, but do show them in the project files list -->
<Content Remove="$(SpaRoot)**" />
<None Remove="$(SpaRoot)**" />
<None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
</ItemGroup>프로젝트 파일의 중요한 역할 중 하나는 빌드 프로세스에 대한 입력을 정의하는 것입니다. 일반적으로 이러한 입력은 코드 파일, 구성 파일, 명령 파일 및 빌드 프로세스의 일부로 처리하거나 복사해야 하는 기타 파일입니다.
MSBuild 프로젝트 스키마에서 이러한 입력은 Item 요소로 표시됩니다. 프로젝트 파일에서 항목은 ItemGroup 요소 내에서 정의되어야 합니다. Property 요소와 마찬가지로 원하는 방식으로 Item 요소의 이름을 지정할 수 있습니다. 그러나 Include 특성을 지정 하여 항목이 나타내는 파일 또는 와일드카드를 식별해야 합니다.
AspNetCore 중 6.0.4 버전의 SpaProxy를 import해서 PackageReference로 하고 있다. (Nuget 패키지 목록 지정)
또한 다른 ItemGroup으로 SpaRoot라는 변수를 가지고 있으며, Remove를 통해 항목 종류에서 특정 항목(파일)을 제거한다. 참고 자료
Target
작업은 항상 대상 요소 내에 포함되어야 합니다. Target 요소는 순차적으로 실행되는 하나 이상의 작업 집합이며 프로젝트 파일에 여러 대상이 포함될 수 있습니다. 작업 또는 작업 집합을 실행하려는 경우 해당 태스크가 포함된 대상을 호출합니다.
MSBuild 스키마에서 Task 요소는 개별 빌드 명령(또는 작업)을 나타냅니다. MSBuild 미리 정의된 여러 작업이 포함됩니다. 예를 들면 다음과 같습니다.
Copy 태스크는 파일을 새 위치에 복사합니다.
Csc 태스크는 Visual C# 컴파일러를 호출합니다.
Vbc 태스크는 Visual Basic 컴파일러를 호출합니다.
Exec 태스크는 지정된 프로그램을 실행합니다.
Message 태스크는 로거에 메시지를 씁니다.
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
<!-- Ensure Node.js is installed -->
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
</Target>작업은 항상 대상 요소 내에 포함되어야 합니다. Target 요소는 순차적으로 실행되는 하나 이상의 작업 집합이며 프로젝트 파일에 여러 대상이 포함될 수 있습니다. 작업 또는 작업 집합을 실행하려는 경우 해당 태스크가 포함된 대상을 호출합니다.
첫번째 Target은 DebugEnsureNodeEnv로서, BeforeTarget은 특정한 빌드 순서를 이야기 한다. 여기서는 Build하기 전에 이 Target을 실행하겠다고 하는 것이다.
또한 실행 조건은 Configuration이라는 변수가 Debug이거나, node_modules가 없는 경우(참고할 수 있는 모든 node 패키지들이 있는 곳. init 했다면 무조건 있어야 함)이다.
node --version이라는 커맨드를 갖고 실행하며, 오류가 발생해도 계속 진행된다. 오류사항은 오류가 아니라 경고가 된다. 참고 문서
태스크 출력값의 TaskParameter(필수 특성)는 ExitCode, PropertyName은 에러코드이다. 참고 문서
Exec으로 실행한 결과 ErrorCode가 0이 아니면, 문제가 있다고 판단. Text는 Node.js가 필요하니 설치하라는 메시지를 띄운다.
그 후, Importance가 high한 Text. npm이 사용하는 의존성을 복구한다는 메시지를 남긴다.
WorkingDirectory를 SpaRoot로 한후 npm install한다.(빠져있는 dependency(node 패키지)들을 복구하는 npm 작업)
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="$(SpaRoot)build\**" />
<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
<RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
</ResolvedFileToPublish>
</ItemGroup>
</Target>다음 Target은 PublishRunWebpack으로, ComputeFilesToPublish 한 다음에 실행된다.
WorkingDirectory를 SpaRoot로 한 다음, npm install, npm run build까지 전부 해서 npm을 전부 빌드해 놓는다.
그 다음 ItemGroup으로 경로를 SpaRoot에 build를 include한다.
ResolvedFileToPublish는 게시 시점에서의 파일 포함을 위한 여러가지 방법 중 선택적 파일 포함 섹션으로 .NET Core SDK의 게시 대상 파일이 제공한다. 다음 문서참조.
마지막으로, ExcludeFromSingleFile로 상기 파일이 단일 파일에 포함되지 않도록 명시한다.
