ASP.NET Core MVC에서 QR Code 생성하기: qrcode.js를 활용한 간단한 구현

7/22/2024
3 minutes to read

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?}");
    });
}