찾다

집 >웹 프론트엔드 >JS 튜토리얼 >최고의 이메일 편집 도구에 대한 가이드

최고의 이메일 편집 도구에 대한 가이드

Barbara Streisand
Barbara Streisand원래의
2024-11-03 03:49:30679검색

작사: 아이작 오코로✏️

이메일 편집기는 사용자가 코딩 기술 없이도 이메일 템플릿을 만들 수 있는 고급 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 요청을 수락합니다.

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

node server.js

마지막으로 아래 명령을 실행하여 MailDev를 컴퓨터에 전체적으로 설치합니다.

npm install -g maildev

MailDev가 성공적으로 다운로드 및 설치되면 아래 명령을 실행하여 실행하세요.

maildev

모든 구성이 완료되면 프런트엔드 서버를 시작하고 멋진 이메일 템플릿을 만들어 보겠습니다. 프론트엔드 터미널에서 아래 명령을 실행하여 React 프로젝트를 시작하세요.

npm start

이제 이메일 편집기를 미리 보려면 http://localhost:3000/으로 이동하세요.

A guide to the best email editing tools

쉽게 디자인된 이메일 템플릿을 사용하여 계속해서 전송하고 MailDev를 사용하여 테스트 메일에서 어떻게 보이는지 살펴보겠습니다.

원하는 대로 이메일 템플릿을 디자인하고 버튼을 클릭하여 이메일을 보낸 다음 http://127.0.0.1:1080/#/로 이동하여 이메일을 미리 보세요.

A guide to the best email editing tools

꽤 괜찮아 보일 거예요! 해냈어요!

이메일 편집기에서 찾아야 할 주요 기능

위에 제가 선호하는 이메일 편집자를 나열했지만, 이메일 편집자가 추구할만한 가치가 있는지 결정할 때 살펴보는 일반적인 특성은 다음과 같습니다.

  • 반응형 템플릿 — 모바일 및 데스크톱 보기에 맞게 이메일을 자동으로 조정합니다
  • 드래그 앤 드롭 디자인 — 코딩 없이 이메일 콘텐츠 생성을 단순화
  • 사용자 정의 옵션 — 사용자 정의 HTML/CSS 코드 삽입
  • 사전 구축된 요소 — 원하는 경우 버튼, 소셜 미디어 등의 모듈을 포함합니다
  • 프레임워크와의 호환성 — React, Angular 등 선택한 웹 프레임워크와 통합됩니다.
  • 플랫폼 전반에 걸친 반응성 - 모바일에서 태블릿, 브라우저에 이르기까지 모든 플랫폼과 장치에서 반응합니다

결론

모든 이메일 편집기 중에서 Unlayer를 쉽게 포함할 수 있는 유연성이 반응형 이메일 템플릿을 지원하므로 제가 선호하는 선택입니다. 나는 또한 MailDev가 이메일에 실수가 없고 온전하게 표시되도록 하는 데 훌륭한 역할을 한다고 믿습니다.

내가 놓쳤을 수도 있는 선호하는 이메일 편집기와 기타 도구가 있으면 알려주세요. 그때까지 즐거운 코딩하세요!

LogRocket: 컨텍스트를 이해하여 JavaScript 오류를 더 쉽게 디버깅합니다.

코드 디버깅은 항상 지루한 작업입니다. 하지만 오류를 더 많이 이해할수록 오류를 수정하는 것이 더 쉬워집니다.

LogRocket을 사용하면 이러한 오류를 새롭고 독특한 방식으로 이해할 수 있습니다. 당사의 프런트엔드 모니터링 솔루션은 JavaScript 프런트엔드에 대한 사용자 참여를 추적하여 오류를 초래한 사용자의 행동을 정확하게 확인할 수 있는 기능을 제공합니다.

A guide to the best email editing tools

LogRocket은 콘솔 로그, 페이지 로드 시간, 스택 추적, 헤더 본문이 포함된 느린 네트워크 요청/응답, 브라우저 메타데이터 및 사용자 정의 로그를 기록합니다. JavaScript 코드의 영향을 이해하는 것은 결코 쉬운 일이 아닙니다!

무료로 사용해 보세요.

위 내용은 최고의 이메일 편집 도구에 대한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript json css html angular express if for mail try Directory Error using Interface finally JS console function default this http embedding
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：NodeList에서 Array로: `Array.from()`이 정말 가장 빠른가요?다음 기사：NodeList에서 Array로: `Array.from()`이 정말 가장 빠른가요?

관련 기사

더보기