최고의 이메일 편집 도구에 대한 가이드-JS 튜토리얼-php.cn

작사: 아이작 오코로✏️

이메일 편집기는 사용자가 코딩 기술 없이도 이메일 템플릿을 만들 수 있는 고급 WYSIWYG(What You See Is What You Get) 도구로 간주될 수 있습니다. 이러한 편집기는 HTML 및 CSS를 활용하여 다양한 장치 폭에 응답하는 반응형 이메일을 구축하는 데 사용됩니다.

이 기사에서는 오픈 소스 및 대부분 무료 옵션을 중심으로 사용 가능한 가장 효과적인 이메일 편집 도구와 고유한 기능에 중점을 둘 것입니다. 그런 다음 이러한 편집기 중 하나인 Unlayer를 통합하고 MailDev를 사용하여 테스트하겠습니다.

언레이어

Unlayer는 사용자가 최소한의 노력으로 이메일을 작성할 수 있는 오픈 소스 드래그 앤 드롭 이메일 편집기입니다. React 프레임워크와 함께 사용하면 웹 애플리케이션을 위한 개발자 친화적인 시각적 이메일 빌더를 제공하는 래퍼 구성 요소 역할을 합니다.

React, Vue, Angular 프로젝트에 쉽게 통합할 수 있습니다. 다음은 몇 가지 주요 기능입니다.

드래그 앤 드롭 편집기
기성 반응형 템플릿
HTML 및 JSON 내보내기 옵션
특수한 사용 사례를 위한 맞춤형 도구를 추가하는 기능

간편한 이메일

또 다른 무료 오픈 소스 이메일 편집기로는 반응형 이메일 작성을 위한 마크업 언어인 MJML을 기반으로 개발된 Easy email이 있습니다.

Unlayer와 유사한 드래그 앤 드롭 이메일 편집기를 사용자에게 제공하는 다양한 기능을 갖춘 사용자 친화적인 인터페이스를 제공합니다.

Easy email은 React와 래퍼로 통합되어 직관적인 편집기 변환을 제공합니다. 주요 기능은 다음과 같습니다.

드래그 앤 드롭 편집기
내장 템플릿
반응형 디자인 지원

MJML

MJML은 반응형 이메일 템플릿을 생성하는 마크업 언어입니다. 마크업이 모든 장치 및 이메일 클라이언트에 대해 반응형 HTML로 렌더링된다는 점에서 직관적입니다.

주요 기능:

MJML 구문을 사용한 단순화된 이메일 개발
MJML을 반응형 HTML로 변환
일반적인 이메일 구조를 위한 광범위한 구성 요소 라이브러리

포도JS

GrapesJS는 응답성이 뛰어나고 전문적인 이메일을 구축하기 위한 무료 이메일 마케팅 도구입니다. 이메일 템플릿의 구성 요소를 활성화하는 구성 요소 기반 인터페이스를 제공합니다.

다음은 GrapesJS의 주요 기능입니다.

이메일 작성을 위한 모듈식 구성요소
기본적으로 반응형 디자인
플러그인 및 추가 기능으로 확장 가능

이메일 편집기를 프런트엔드 웹 프레임워크와 통합

최신 이메일 편집기의 주요 이점은 널리 사용되는 프런트엔드 웹 프레임워크와 작업할 수 있다는 것입니다. 이러한 통합을 통해 기술에 익숙하지 않은 사용자도 웹 애플리케이션 내에서 응답성이 뛰어나고 사용자 정의된 이메일을 작성할 수 있습니다.

이 섹션에서는 Unlayer를 React 애플리케이션에 통합하는 방법을 살펴보겠습니다.

아래 명령을 실행하여 새로운 React 애플리케이션을 생성하고 탐색해 보겠습니다.

npx create-react-app email-editor && cd email-editor

로그인 후 복사

다음으로 새로 생성된 React 애플리케이션에 React-email-editor 패키지를 설치합니다.

npm install react-email-editor

로그인 후 복사

설치 후 app.js를 업데이트하고 아래 코드 블록으로 App.css를 업데이트하세요.

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 32px;
  margin-top: 20px;
  margin-left: 20px;
  cursor: pointer;
}

로그인 후 복사

다음으로 App.js 파일을 아래 코드로 업데이트하세요.

import axios from "axios";
import React, { useRef } from "react";
import EmailEditor from "react-email-editor";
import "./App.css";

const App = () => {
  const emailEditorRef = useRef(null);
  const exportHtml = () => {
    emailEditorRef.current.editor.exportHtml((data) => {
      const { html } = data;
      sendTestEmail(html);
    });
  };

  const sendTestEmail = async (html) => {
    try {
      const response = await axios.post("http://localhost:8080/send-email", {
        html,
      });
      alert(response.data);
    } catch (error) {
      console.error("Error sending email:", error);
    }
  };

  return (
    <div className="App">
      <h1>React Email Editor</h1>
      <EmailEditor ref={emailEditorRef} />
      <button className="button" onClick={exportHtml}>
        Send Email
      </button>
    </div>
  );
};

export default App;

로그인 후 복사

위의 코드 블록에서 구성 요소는 useRef를 사용하여 디자인된 이메일 콘텐츠를 내보내는 이메일 편집기(emailEditorRef)를 참조합니다. 이메일 보내기 버튼을 클릭하면 HTML 요소를 sendTestEmail 함수로 추출한 다음 백엔드 localhost API에 게시 요청을 보내는 내보내기Html 함수가 트리거됩니다.

이메일 테스트를 위한 MailDev

MailDev는 사용자 컴퓨터에서 로컬로 실행되는 개발 단계 중 프로젝트 생성 이메일을 테스트하기 위한 오픈 소스 SMTP(Simple Mail Transfer Protocol) 서버입니다.

실제 이메일 주소로 아무 것도 보내지 않고 백엔드에서 테스트 이메일을 보내고 받을 수 있는 웹 인터페이스와 로컬 서버를 제공합니다.

MailDev 애플리케이션은 애플리케이션의 SMTP 설정과 통합하기 위해 백엔드 서버를 사용합니다. 간단히 말해서 MailDev는 개발 중에 앱에서 보낸 이메일을 위한 중간 저장소처럼 작동하는 시뮬레이션된 SMTP 서버입니다.

MailDev 서버를 사용하여 이전 섹션에서 생성된 테스트 이메일을 실행해 보겠습니다. 먼저 Node.js를 사용하여 백엔드 서버를 만들어 보겠습니다. 원하는 디렉터리에서 터미널을 열고 아래 명령을 실행하여 Node 프로젝트 구조를 만듭니다.

mkdir my-node-backend && cd my-node-backend && npm init -y

로그인 후 복사

위 명령은 Node 모듈이 다운로드된 폴더를 생성합니다. 다음 단계는 Express.js와 Nodemailer를 설치하는 것으로, 아래 명령을 실행하여 수행합니다.

npm install express nodemailer cors

로그인 후 복사

다음으로, 프로젝트 디렉터리에 server.js 파일을 만들고 여기에 아래 코드를 붙여넣습니다.

const express = require("express");
const nodemailer = require("nodemailer");
const cors = require("cors");
const app = express();

app.use(express.json());
app.use(cors());

//Set up Nodemailer to connect to Maildev's SMTP server
const transporter = nodemailer.createTransport({
  host: "127.0.0.1",
  port: 1025, // Maildev's default SMTP port
  secure: false, // Maildev does not require SSL
  tls: {
    rejectUnauthorized: false,
  },
});

// API endpoint to send the email
app.post("/send-email", (req, res) => {
  const { html } = req.body;
  const mailOptions = {
    from: "IsaaacTheTester@example.com",
    to: "recipient@example.com",
    subject: "Test Email from React Email Editor",
    html: html,
  };

  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error("Error sending email:", error);
      return res.status(500).send("Failed to send email");
    }
    console.log("Email sent:", info.response);
    res.status(200).send("Email sent successfully");
  });
});

app.listen(8080, () => {
  console.log("Server is running on port 8080");
});

로그인 후 복사

위의 코드 블록에서는 Nodemailer를 사용하여 MailDev의 SMTP 서버를 통해 이메일을 보내는 Express를 사용하여 Node 서버를 설정하고 있습니다. 서버는 포트 8080에서 수신 대기하고 /send-email 엔드포인트에 대한 POST 요청을 수락합니다.

다음으로 터미널에서 아래 명령을 실행하여 노드 서버를 시작하세요.