<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>
<p>저희 이전 블로그에서는 대량 이메일 발송 시스템의 디자인 고려 사항 및 작업 흐름에 대해 논의했습니다. 이제 전체 프론트엔드에 Angular를 사용하여 실제 구현에 대해 살펴보겠습니다. 백엔드 API에는 .NET Core를 사용하고, 대기 및 처리에는 Azure 클라우드 서비스를 사용하며, 이메일 발송에는 SendGrid를 사용하고 실시간 푸시 알림에는 SignalR을 사용합니다. 또한 이메일 발송 전 임의의 지연 추가, 실패한 이메일을 위한 재시도 논리, 데이터베이스 상태 업데이트와 같은 모범 사례도 다룰 것입니다.</p>
<p><img src="/assets/img/2024-07-28-ImplementingaMassEmailSendingSystemwithAngularNETCoreAzureSendGridandSignalR_0.png" alt="이미지"></p>
<h2>1. Angular를 사용한 프론트엔드 설정</h2>
<p>먼저, 사용자가 이메일 캠페인을 생성하고 관리할 수 있는 Angular 프론트엔드를 설정해 봅시다.</p>
<div class="content-ad"></div>
<p>캠페인을 생성하고 관리할 수 있는 컴포넌트를 작성해보세요.</p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">CampaignService</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'./campaign.service'</span>;

@<span class="hljs-title class_">Component</span>({
  <span class="hljs-attr">selector</span>: <span class="hljs-string">'app-campaign'</span>,
  <span class="hljs-attr">template</span>: <span class="hljs-string">`
    &#x3C;div>
      &#x3C;h1>캠페인 생성&#x3C;/h1>
      &#x3C;form (submit)="createCampaign()">
        &#x3C;!-- form… -->


</span></code></pre>
</body>
</html>


저희 이전 블로그에서는 대량 이메일 발송 시스템의 디자인 고려 사항 및 작업 흐름에 대해 논의했습니다. 이제 전체 프론트엔드에 Angular를 사용하여 실제 구현에 대해 살펴보겠습니다. 백엔드 API에는 .NET Core를 사용하고, 대기 및 처리에는 Azure 클라우드 서비스를 사용하며, 이메일 발송에는 SendGrid를 사용하고 실시간 푸시 알림에는 SignalR을 사용합니다. 또한 이메일 발송 전 임의의 지연 추가, 실패한 이메일을 위한 재시도 논리, 데이터베이스 상태 업데이트와 같은 모범 사례도 다룰 것입니다.

![이미지](/assets/img/2024-07-28-ImplementingaMassEmailSendingSystemwithAngularNETCoreAzureSendGridandSignalR_0.png)

## 1. Angular를 사용한 프론트엔드 설정

먼저, 사용자가 이메일 캠페인을 생성하고 관리할 수 있는 Angular 프론트엔드를 설정해 봅시다.

<div class="content-ad"></div>

캠페인을 생성하고 관리할 수 있는 컴포넌트를 작성해보세요.

```javascript
import { Component } from '@angular/core';
import { CampaignService } from './campaign.service';

@Component({
  selector: 'app-campaign',
  template: `
    <div>
      <h1>캠페인 생성</h1>
      <form (submit)="createCampaign()">
        


```

Angular, NET Core, Azure, SendGrid, SignalR를 활용한 대량 이메일 발송 시스템 구현하는 방법

1. Angular를 사용한 프론트엔드 설정