ASP.NET Core MVC에서 QR Code 생성하기: qrcode.js를 활용한 간단한 구현
ASP.NET Core MVC 애플리케이션에서 QR 코드를 생성하는 방법에 대해 설명하겠습니다. 이 예제에서는 JavaScript 라이브러리인 qrcode.js를 사용하여 클라이언트 측에서 QR 코드를 생성합니다. 이를 통해 특정 URL을 QR 코드로 변환하고, 브라우저에 표시할 수 있습니다.
프로젝트 설정
1. ASP.NET Core MVC 프로젝트 생성
먼저, ASP.NET Core MVC 프로젝트를 생성합니다. Visual Studio를 열고 새 프로젝트를 만듭니다. "ASP.NET Core Web Application"을 선택하고, 템플릿으로 "ASP.NET Core MVC"를 선택합니다.
2. qrcode.js 라이브러리 추가
프로젝트의 wwwroot/lib 폴더에 qrcode.js 파일을 추가합니다. qrcode.js GitHub 페이지에서 qrcode.min.js 파일을 다운로드하여 wwwroot/lib 폴더에 저장합니다.
컨트롤러 작성
컨트롤러는 QR 코드 생성을 위한 단순한 액션 메서드를 포함합니다.
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
namespace KodeeOne.Codes
{
[AllowAnonymous]
public class QRCodeController : Controller
{
public IActionResult Index()
{
return View();
}
}
}
위 코드는 QRCodeController라는 컨트롤러를 정의하고, Index 액션 메서드를 통해 뷰를 반환합니다. [AllowAnonymous] 속성을 사용하여 인증 없이 접근할 수 있도록 설정합니다.
뷰 작성
이제 QR 코드를 생성하고 표시할 뷰를 작성합니다. Views/QRCode/Index.cshtml 파일을 추가하고 다음 코드를 작성합니다.
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KodeeOne Employee Licensing</title>
<script src="~/lib/qrcode.min.js"></script>
</head>
<body>
<h2>https://www.memoengine.com</h2>
<div id="qrcode"></div>
<script type="text/javascript">
var url = "https://www.memoengine.com";
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: url,
width: 128,
height: 128,
});
</script>
</body>
</html>
위 HTML 코드에서는 qrcode.min.js 라이브러리를 로드하고, JavaScript를 사용하여 특정 URL (https://www.memoengine.com)을 QR 코드로 변환합니다. QRCode 객체를 생성하고, text 속성에 URL을 설정하여 QR 코드를 생성합니다.
라우팅 설정 확인
프로젝트의 Startup.cs 파일에서 기본 라우팅 설정이 올바르게 되어 있는지 확인합니다.
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=QRCode}/{action=Index}/{id?}");
});
}
실행 및 확인
프로젝트를 실행하고 브라우저에서 https://localhost:{포트번호}/QRCode/Index로 이동하면 https://www.memoengine.com에 대한 QR 코드가 생성되어 페이지에 표시됩니다.
이와 같이, qrcode.js 라이브러리를 활용하여 클라이언트 측에서 QR 코드를 쉽게 생성할 수 있습니다. 이를 통해 특정 URL을 QR 코드로 변환하여 사용자에게 제공할 수 있습니다.