또치의 삽질 보관함

[Hyper-V] Hyper-V 관리자 실행 시 0x80131040 오류

ddochea — Mon, 24 Feb 2025 23:38:37 +0900

어느새부터인가 `Newtonsoft.Json Version=12.0.0.0` 어셈블리 로드 실패로 인해 Hyper-V에서 VM 빨리만들기를 사용할 수 없는 문제가 생겼다. 결론부터 말하자면 Hyper-V 버그이다.

Hyper-V 설치위치를 가면 Newtonsoft.Json.dll을 확인할 수 있다.

C:\Program Files\Hyper-V

2025년 기준 해당 dll 파일의 버전을 보면 13.0.3 인것을 확인할 수 있는데, 빨리 만들기 기능을 담당하는 `VMCreate.exe` 는 12 버전을 찾고 있으니 안되는게 어찌보면 당연하다.

dll을 교체할 필요 없이 해당 위치에 아래 내용과 같이 버전을 새로 정의한 VMCreate.exe.config 파일을 추가해주면 된다.

<configuration>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-12.0.0.0" newVersion="13.0.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
</configuration>

~~급한게 아니라면 MS가 고쳐줄 때 까지 기다려야 하지만, 급히 생성이 필요하다면 아래와 같이 dll을 강제로 교체해보자~~

1. Newtonsoft.Json.dll 변경을 위한 권한 부여

Hyper-V의 파일은 관리자 권한만으로도 삭제나 이동이 불가하다. 따라서 아래와 같은 명령어로 권한 설정 작업이 필요하다. 명령어를 수행하는 powershell이나 cmd 는 관리자 권한으로 열어줘야 한다.

takeown /f ".\Newtonsoft.Json.dll" /a

~~그 다음 아래 명령어를 수행한다.~~

icacls.exe .\Newtonsoft.Json.dll /grant Users:F

~~이제 일반 유저 권한으로 삭제 및 이동이 가능해진다.~~

2. 구 버전 Newtonsoft.Json 받기

Hyper-V 에 맞는 dll로 교체하기위해 아무 dotnet 프로젝트를 생성 한 뒤, nuget을 통해 v12 버전의 Newtonsoft.Json을 받도록 하자. 다른 안전한 방법이 있다면 해당 방법을 써도 무방하다.

~~Newtonsoft.Json 12버전을 구했다면 Hyper-V 경로에 이동 시킨 뒤, Hyper-V를 재실행하면 된다.~~

[rust] tokio 비동기 동시 처리 기본 예시 코드

ddochea — Sun, 24 Nov 2024 18:06:52 +0900

tokio를 통한 async 작업을 동시 실행. dotnet의 Task.WaitAll() 과 유사

입력받은 초(sec)만큼 시간이 출력되는 작업 print_now를 각각 f1, f2 작업을 만들어 동시 실행 처리.

tokio::join으로 들어온 작업 중 가장 늦게 끝난 작업 기준으로 종료

[main.rs]

use tokio;
use time::{OffsetDateTime}; // 포맷팅된 시간 글자를 표기하기위한 라이브러리

#[tokio::main]
async fn main() {
    let f1 = print_now(1, 5);
    let f2 = print_now(2, 10);
    tokio::join!(f1, f2); // f1, f2
}

// 1초당 현재시간(UTC) 표기
async fn print_now(id: i32, sec: i32) {
    let mut i = 0;
    while i < sec {
        println!("print{}, {}", id, OffsetDateTime::now_utc());
        tokio::time::sleep(tokio::time::Duration::from_secs(1)).await;
        i += 1;
    }
}

[Cargo.toml]

[package]
name = "tokio-test"
version = "0.1.0"
edition = "2021"

[dependencies]
tokio = { version = "1.41.1", features = ["full"]}
time = "0.3.36"

[rust] tokio, bb8, tokio_postgres DB 연결 예시 코드

ddochea — Sun, 24 Nov 2024 17:11:27 +0900

tokio 와 bb8을 이용한 postgres db 연결 기본 예시 코드

[main.rs]

use bb8;
use bb8::Pool;
use bb8_postgres::PostgresConnectionManager;
use tokio_postgres::NoTls;

#[tokio::main]
async fn main() {
    println!("Hello, world!");

    let manager =
        PostgresConnectionManager::new_from_stringlike("postgresql://{계정}:{암호}@localhost:5432/{db명}", NoTls).unwrap();
    let pool = Pool::builder().build(manager).await.unwrap();
    let conn = pool.get().await.unwrap();

    let row = conn.query_one("select 1 + 1", &[]).await.unwrap();
    let v : i32 = row.try_get(0).unwrap();

    println!("value: {}", v);
}

[Cargo.toml]

[package]
name = "패키지명"
version = "0.1.0"
edition = "2021"

[dependencies]
bb8 = "0.8.6"
bb8-postgres = "0.8.1"
tokio = { version = "1.41.1", features = ["full"] }
tokio-postgres = "0.7.12"

[VMWare] VMWare Fusion 에서 Windows 설치시 네트워크 이슈 해결

ddochea — Sat, 23 Nov 2024 13:47:56 +0900

VMWare Fusion 에서 Windows 11 설치 과정에서 네트워크 연결 여부를 확인하는 단계가 있는데, 해당 단계를 건너뛸 수 없어 설치를 못하는 경우

아래 단계에서 드라이버 이슈로 진행이 안될 수 있다.

이 경우 Shift + F10 키를 눌러 cmd 창을 연 뒤 `OOBE\BYPASSNRO`를 입력 후 엔터를 눌러 설치과정을 재수행하면 된다.

재수행한 단계에선 인터넷에 연결되어 있지 않음 메뉴가 표기된다. 해당 버튼을 눌러 다음 단계를 수행할 수 있다.

설치완료 후 인터넷을 사용할 수 없을 때

앞서 단계에서 드라이버 이슈로 Windows 11을 설치에 어려움을 겪은 사람들이 이어서 겪을 수 있는 문제이다. 이 경우 VMWare Tools을 설치하면 해결 될 수 있다.

Mac OS 상단에 있는 Fusion 의 메뉴 중 [Virtual Machine] -> [Install VMWare Tools] 를 선택하면 Guest OS인 Windows 에 설치 프로그램이 포함된 DVD 드라이브가 추가된다.

Fusion의 VMWare Toolls 설치 메뉴 위치

선택 후 추가 된 DVD 드라이브

VMWare Tools 디렉토리 내 위치한 setup 을 선택하여 프로그램을 설치하고 OS를 재부팅 해주면 인터넷 문제가 해결될 수 있다.

[rust] 규칙에 맞는 프로젝트 템플릿을 통해 새로운 rust 프로젝트 생성을 돕는 cargo-generate

ddochea — Sun, 10 Nov 2024 10:31:20 +0900

cargo new 명령을 통한 프로젝트 생성은 실행프로그램을 생성하는 --bin 과 라이브러리 생성인 --lib 두가지이다. 그 후 webapi 이든 ui 프로그램이든 생성하고자 하는 프로그램 유형에 따라 crate 를 일일히 추가해줘야 한다.

매번 생성하는게 귀찮다면 cargo-generate 를 설치해 보는 것을 추천한다.

cargo binstall cargo-generate

설치 후 아래와 같이 사용하면 된다. 아래 예시는 rust + axum + utoipa 조합으로 webapi 개발을 위해 직접 생성한 webapi 브랜치이다.

cargo generate --git https://github.com/ddochea0314/template-axum-webapi

생성하면 입력한 프로젝트명에 따라 README.md 파일과 main.rs의 Info::new() title 부분에 입력한 프로젝트명이 들어가는 것을 확인할 수 있다.

PS /Users/ddochea/source/repos> cargo generate --git https://github.com/ddochea0314/template-axum-webapi
    Project Name: my-test-api
    Destination: /Users/ddochea/source/repos/my-test-api ...
    project-name: my-test-api ...
    Generating template ...
    Moving generated files into: `/Users/ddochea/source/repos/my-test-api`...
    Initializing a fresh Git repository
✨   Done! New project created /Users/ddochea/source/repos/my-test-api

로컬에 생성한 템플릿도 사용가능하다. --git 대신 --path를 사용하면 된다.

cargo generate --path ./cargo-gen-test/

템플릿 소스코드를 살펴보면 {{project-name}}과 {{authors}} 를 확인할 수 있다. 이를 code generate 에서 placeholder 라고 부르며, {{project-name}}과 {{authors}}는 code generate에서 기본적으로 사용하는 빌트인 placeholder 이다. 보다 자세한 정보는 아래 링크를 통해 확인할 수 있다.

https://cargo-generate.github.io/cargo-generate/templates/builtin_placeholders.html

기본적으로 제공하는 빌트인 placeholder 외에도 직접 생성할 수 있다. 템플릿 프로젝트 루트경로에 cargo-generate.toml 를 생성하고 아래와 같이 입력한다.

[placeholders]
placeholder_name = { prompt = "Enter your name", choices = ["Alice", "Bob"], default = "Alice", type = "string" }

그리고 placeholder_name을 README.md 파일이나 소스코드 내부에 {{placeholder_name}} 를 추가해보자.

fn main() {
    println!("Hello, world!, {{placeholder_name}}");
}

cargo generate 로 프로젝트를 생성해준다.

PS /Users/ddochea/source/repos> cargo generate --path ./cargo-gen-test/
    Project Name: gen-test123
    Destination: /Users/ddochea/source/repos/gen-test123 ...
    project-name: gen-test123 ...
    Generating template ...
✔     Enter your name · Alice
    Moving generated files into: `/Users/ddochea/source/repos/gen-test123`...
    Initializing a fresh Git repository
✨   Done! New project created /Users/ddochea/source/repos/gen-test123

생성된 프로젝트의 소스코드를 살펴보면 Enter your name 프롬프트로 입력받은 이름이 코드에 반영된 것을 확인할 수 있다.

fn main() {
    println!("Hello, world!, Alice");
}

https://github.com/cargo-generate/cargo-generate

[rust] axum 과 utoipa 로 swagger를 지원하는 web api 구현 예제

ddochea — Wed, 18 Sep 2024 14:18:06 +0900

Axum은 Rust 언어를 위한 웹 애플리케이션 프레임워크로 사실상 표준 비동기 프로그래밍 라이브러리로 받아들여지는 Tokio를 만든 Tokio-rs 에서 개발하였다.

Rust 생태계의 대표 웹 프레임워크인 Rocket 과 Actix 에 비해 비교적 최근에 릴리즈 되었다. 그래서인지 utoipa 를 통한 swagger 적용이 원할하지 않았다.

몇 시간의 삽질 끝에 예제가 될만한 구현작업을 완료할 수 있었다. 아래 리포지토리는 axum에서 swagger ui 가 동작할 수 있도록 예시형식으로 구현한 브랜치이다.

ddochea0314/template-axum-webapi (github.com)

GitHub - ddochea0314/template-axum-webapi

Contribute to ddochea0314/template-axum-webapi development by creating an account on GitHub.

github.com

실행 후 브라우저에서 http://localhost:3000/swagger 접속시 2개의 get endpoint를 제공하는 swagger-ui가 나온다.

실행하면 코드에 설정된 값이 나온다. 처음엔 랜덤한 데이터를 표기하도록 구현하려 했으나, random 마저 별도 크레이트(crate)로 받아야 해서 그냥 동일한 값으로 구현했다.

[golang] WebAssembly 빌드시 expected magic word 00 61 73 6d

ddochea — Fri, 23 Aug 2024 22:29:21 +0900

go 공식 웹 어셈블리 wiki 문서(https://go.dev/wiki/WebAssembly)에서 실행시 magic word 00 61 73 6d 가 나올 경우,

windows 파워쉘 환경에서 하고 있다면 GOOS, GOARCH 변수설정을 잘못한 것일 가능성이 있다.

$ GOOS=js GOARCH=wasm go build -o main.wasm

위 명령어를 아래와 같이 수행.

$env:GOOS="js"
$env:GOARCH="wasm"
go build -o main.wasm main.go

[css] animation 재생을 다시 실행할 수 있도록 처리

ddochea — Sun, 11 Aug 2024 18:58:38 +0900

css animation을 특정 이벤트가 발생할 때마다 재생시키고 싶을 때 아래와 같이 작성하는 케이스가 있다.

<html>
<head>
    <title>Home</title>
    <script>
        function play() {
            var target = document.querySelector('#target');
            target.classList.remove('bounce');
            target.classList.add('bounce');
        }
    </script>
    <style>
        #target {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .bounce {
            animation: bounce 2s;
        }

        @keyframes bounce {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(100px);
            }
            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <button onclick="play()">play</button>
    <div id="target">

    </div>
</html>

위 예제에서 버튼을 누르면 100px * 100px의 빨간색 박스가 아래로 이동했다가 원위치될것이다. 그런데 처음 버튼을 눌렀을 땐 정상동작하는데, 두번째부터는 정상동작하지 않는다. 이 경우 아래와 같이 소스를 수정하면 된다.

<html>
<head>
    <title>Home</title>
    <script>
        function play() {
            var target = document.querySelector('#target');
            target.classList.remove('bounce');
            target.offsetWidth; // 추가
            target.classList.add('bounce');
        }
    </script>
    <style>
        #target {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .bounce {
            animation: bounce 2s;
        }

        @keyframes bounce {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(100px);
            }
            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <button onclick="play()">play</button>
    <div id="target">

    </div>
</html>

이유는 html 태그의 구조나 다시 랜더링할 속성 변경이 없어서 브라우저의 리플로우(reflow) 및 리페인트(repaint)가 일어나지 않아서인데, offsetWidth과 같이 읽기만해도 리플로우(reflow)를 유발시키는 속성을 호출하여 이를 해결할 수 있다.

What forces layout/reflow. The comprehensive list. (github.com)

What forces layout/reflow. The comprehensive list.

What forces layout/reflow. The comprehensive list. - what-forces-layout.md

gist.github.com

관련 설명 및 최적화 방법은 아래 블로그에서 잘 정리되어있다.

[Browser] Reflow와 Repaint | Beomy

[Browser] Reflow와 Repaint

브라우저의 화면이 수정될 때, 렌더링 과정을 최적화 하는 방법에 대해 이야기 할 것입니다.

beomy.github.io

[winget] 소스를 열 때 실패했습니다. 문제가 계속되면 'source reset' 명령을 사용해 보십시오. 발생시 확인사항

ddochea — Wed, 31 Jul 2024 22:31:58 +0900

PC를 새로 세팅하고 winget 으로 필요한 프로그램을 설치할 때 아래와 같은 메시지가 발생했다.

소스를 열 때 실패했습니다. 문제가 계속되면 'source reset' 명령을 사용해 보십시오.

Failed when opening source(s); try the 'source reset' command if the problem persists.
An unexpected error occurred while executing the command:
0x8a15000f : Data required by the source is missing

Administrator 에서 source reset 을 수행해봐도, source update를 수행해봐도 해결되지 않았다.

그나마 github에서 검색한 아래 방법을 사용하니 winget source 리포지토리는 찾았지만, 여전히 업데이트가 되지 않는 등의 이슈가 있었다.

Add-AppxPackage -Path https://cdn.winget.microsoft.com/cache/source.msix

원인은 의외의 곳에서 확인할 수 있었다. Microsoft Store를 통해 설치 관리되는 "앱 설치 관리자"가 최신버전이 아니라 발생한 이슈였다.

msstore에서 설치가 안된다면 아래 링크를 통해 직접 설치가 가능하다.

앱 설치 관리자 설치 및 업데이트 - MSIX | Microsoft Learn

참조

Help: Failed when opening source(s)... · microsoft/winget-cli · Discussion #3258 · GitHub

앱 설치 관리자 설치 및 업데이트 - MSIX | Microsoft Learn

[.NET] ASP.NET Core MVC에 View 영역을 Vite 프로젝트로 개발할 수 있게 도와주는 Vite.AspNetCore 소개

ddochea — Sat, 13 Jul 2024 20:02:13 +0900

Vite를 기반으로한 웹 프론트엔드 개발시, Next.js, Nuxt.js 가 아닌 ASP.NET Core 웹 프레임워크에 사용해야할 때 유용한 라이브러리이다.

https://github.com/Eptagone/Vite.AspNetCore

GitHub - Eptagone/Vite.AspNetCore: Small library to integrate Vite into ASP.NET projects

Small library to integrate Vite into ASP.NET projects - Eptagone/Vite.AspNetCore

github.com

라이브러리 추가 후 프로젝트에 몇 가지 작업이 필요한데, 브랜치 내 examples를 참고하면 된다. 필자의 경우는 vue 기반의 MPA 형식의 웹 서비스 개발을 목적으로 아래와 같이 작업하였다. example에 없다고 하여 지원이 안되는 건 아니니 설정값을 참고하여 자신만의 프로젝트 템플릿을 만들어도 좋을 듯 하다.

1. MVC 프로젝트 및 vite-project 생성

MVC 프로젝트를 생성한 후 vite-project를 생성한다. 그 뒤 파일 일부를 이동시켜야 한다.

package.json, package-lock.json, tsconfig.json, vite.config.ts 파일은 csproj 파일과 같은 위치로 옮긴다.
assets, components, public, src 경로 및 css, ts, js등의 파일들은 프로젝트 하위 Assets 폴더를 생성하여 추가한다.

Assets 경로가 마음에 안든다면 후속 작업인 vite.config.ts 편집을 참고하여 수정해도 된다.
html 파일은 기본적으로 필요없으며, 기본 생성된 app.vue 파일도 신규 생성할 것이므로 제거해도 된다.

2. 웹 프로젝트 파일(.csproj) 파일 편집

라이브러리 추가 후 ItemGroup 및 Target 을 아래와 같이 추가한다.

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Vite.AspNetCore" Version="2.1.1" />
  </ItemGroup>

  <ItemGroup>
    <Content Remove="package-lock.json" />
    <Content Remove="package.json" />
    <Content Remove="tsconfig.json" />
    <Content Remove="tsconfig.app.json" />
    <Content Remove="tsconfig.node.json" />
    <!-- Don't remove this line or your manifest.json won't be copied on publish -->
    <Content Include="wwwroot\.vite\**" />
  </ItemGroup>
  
  <ItemGroup>
    <None Include="package-lock.json" />
    <None Include="package.json" />
    <None Include="tsconfig.json" />
    <None Include="tsconfig.app.json" />
    <None Include="tsconfig.node.json" />
  </ItemGroup>

  <!-- Ensure Node environment on Build -->
  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build;PublishBuildAssets" Condition=" !Exists('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..." />
    <!-- Install Node packages -->
    <Exec Command="npm install" />
  </Target>

  <!-- Build the final assets -->
  <Target Name="PublishBuildAssets" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Release' ">
    <!-- Build the final assets -->
    <Exec Command="npm run build" />
  </Target>
</Project>

3. vite.config.ts 편집

import { UserConfig, defineConfig } from 'vite'
import { spawn } from 'child_process'
import fs from 'node:fs'
import path from 'node:path'

import vue from '@vitejs/plugin-vue'

// Get base folder for certificates.
const baseFolder =
    process.env.APPDATA !== undefined && process.env.APPDATA !== ''
        ? `${process.env.APPDATA}/ASP.NET/https`
        : `${process.env.HOME}/.aspnet/https`;

// Generate the certificate name using the NPM package name
const certificateName = process.env.npm_package_name;

// Define certificate filepath
const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
// Define key filepath
const keyFilePath = path.join(baseFolder, `${certificateName}.key`);

// Export Vite configuration

// https://vitejs.dev/config/
// Export Vite configuration
export default defineConfig(async () => {
  // Ensure the certificate and key exist
  if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
      // Wait for the certificate to be generated
      await new Promise<void>((resolve) => {
          spawn('dotnet', [
              'dev-certs',
              'https',
              '--export-path',
              certFilePath,
              '--format',
              'Pem',
              '--no-password',
          ], { stdio: 'inherit', })
              .on('exit', (code) => {
                  resolve();
                  if (code) {
                      process.exit(code);
                  }
              });
      });
  };

  // Define Vite configuration
  const config: UserConfig = {
      plugins: [vue()],
      appType: 'custom',
      root: 'Assets',
      publicDir: 'public',
      build: {
          emptyOutDir: true,
          manifest: true,
          outDir: '../wwwroot',
          assetsDir: '',
          rollupOptions: {
              input: ['Assets/views/index.ts', 'Assets/views/privacy.ts'],
              output: {
                    entryFileNames: '[name].js',
                    chunkFileNames: 'chunks/[name]-[hash].js',
                    assetFileNames: 'assets/[name]-[hash].[ext]',
              }
          },
      },
      server: {
          strictPort: true,
          https: {
              cert: certFilePath,
              key: keyFilePath
          }
      },
      optimizeDeps: {
          include: []
      }
  }

  return config;
});

4. C# 및 cshtml 영역 수정

기존 MVC 뷰(View)영역을 Vue로 대체하기 위해 아래와 같이 파일들을 생성 및 편집한다.

Program.cs

using Vite.AspNetCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddViteServices(option => {
    option.Server.AutoRun = true;
    option.Server.Https = true;
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

if (app.Environment.IsDevelopment())
{
    app.UseWebSockets();
    app.UseViteDevelopmentServer(true);
}

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Views/_ViewImports.cshtml

@using Template.AspNetCore.MVC.Vue
@using Template.AspNetCore.MVC.Vue.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Vite.AspNetCore

Views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
	<link rel="icon" type="image/svg+xml" href="~/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Template.AspNetCore.MVC.Vue</title>
	@await RenderSectionAsync("Styles", required: false)
</head>

<body>
    <header>        
        <nav class="navbar">
            <ul>
                <li class="nav-item btn"> 
                    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                </li>
                <li class="nav-item btn">
                    <a class="nav-link text-dark" asp-area="" asp-controller="Home"
                        asp-action="Privacy">Privacy</a>
                </li>
            </ul>
        </nav>
    </header>
    
    @RenderBody()

    <footer>
        <div class="container">
            &copy; 2024 - Template.AspNetCore.MVC.Vue - <a asp-area="" asp-controller="Home"
                asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    @await RenderSectionAsync("Scripts", required: false)
</body>

</html>

Views/Home/Index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

@* This line includes the style from the "index.ts" entrypoint *@
@section Styles {
	<link rel="stylesheet" vite-href="~/views/index.ts" asp-append-version="true" />
}
<main role="main" id="app">
</main>

<!-- This line includes your "index.ts" entrypoint -->
<script type="module" vite-src="~/views/index.ts"></script>

Views/Home/Privacy.cshtml

@{
    ViewData["Title"] = "Privacy Page";
}

@* This line includes the style from the "privacy.ts" entrypoint *@
@section Styles {
	<link rel="stylesheet" vite-href="~/views/privacy.ts" asp-append-version="true" />
}
<main role="main" id="app">
</main>

<!-- This line includes your "privacy.ts" entrypoint -->
<script type="module" vite-src="~/views/privacy.ts"></script>

5. Vue 영역 수정

Assets/views/index.ts

import 'vite/modulepreload-polyfill';
import { createApp } from 'vue'
import '../style.css'
import IndexApp from './Index.vue'

createApp(IndexApp).mount('#app')

Assets/views/index.vue

<script setup lang="ts">
import HelloWorld from '../components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

Assets/views/privacy.ts

import 'vite/modulepreload-polyfill';
import { createApp } from 'vue'
import '../style.css'
import PrivacyApp from './Privacy.vue'

createApp(PrivacyApp).mount('#app')

Assets/views/Privacy.vue

<script setup lang="ts">
</script>

<template>
  <div>
    Privacy
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

구성완료 후 dotnet run 실행시 npm run dev 명령어도 같이 실행되는데, 실제 웹 페이지에 vue 랜더링 결과는 없고 View 화면값만 나온다면 개발환경 https 사용에 의한 인증서 문제로 안될 수 있다.

그럴 경우 npm run dev 로 실행된 dev 서버 URL로 접속한 뒤 `localhost(안전하지 않음)`으로 이동하여 허용하면 된다.

설정 후 캐시를 지워 새로고침하면 정상 표기된다.

vite의 정식지원이 아닌만큼 완벽하진 않지만, MVC의 프론트영역에 vue를 도입해야 한다면 해당 방법도 도움이 될 것이다.

관련 예제는 개인 github 브랜치에 공개 템플릿 브랜치로 올려두었다.

https://github.com/ddochea0314/Template.AspNetCore.MVC.Vue

GitHub - ddochea0314/Template.AspNetCore.MVC.Vue: MVC + Vue3

MVC + Vue3 . Contribute to ddochea0314/Template.AspNetCore.MVC.Vue development by creating an account on GitHub.

github.com