Mailing - React로 이메일 작성하고 보내기 (github.com/sofn-xyz)

Mailing - React로 이메일 작성하고 보내기를 소개합니다.

Mailing 은 한마디로 React로 이메일 작성하고 보내기한다라는 것을 머릿속에 넣어두시면 되고요..

setup 은 아래와 같은 절차로 진행하시면 됩니다.

Setup

1. Install mailing-core and the development server with yarn or npm:

yarn:

yarn add mailing-core mjml mjml-react nodemailer &&\
yarn add --dev mailing @types/mjml @types/mjml-react @types/nodemailer

npm:

npm install --save mailing-core mjml mjml-react nodemailer &&\
npm install --save-dev mailing @types/mjml @types/mjml-react @types/nodemailer

1. Run npx mailing to start the preview server and scaffold your emails directory. This will create the following directory for all of your emails:

emails
├── TextEmail.tsx // a simple example email template
├── Welcome.tsx // a complicated example email template
├── components // shared components go in here
│   ├── BulletedList.tsx
│   ├── Footer.tsx
│   ├── Head.tsx
│   ├── Header.tsx
│   └── theme.ts
├── index.ts // this exports sendMail and is where your SMTP config goes
└── previews // use previews to develop and check templates
    ├── TextEmail.tsx
    └── Welcome.tsx

1. Configure your email transport and defaultFrom in emails/index.ts. It defaults to nodemailer's SMTP transport, but you can read about others here.

Example SendGrid transport:

const transport = nodemailer.createTransport({
  host: "smtp.sendgrid.net",
  port: 587,
  auth: {
    user: "apikey",
    pass: process.env.SEND_GRID_KEY,
  },
});

1. Finally, send your first email like so:

import { sendMail } from "emails";
import Welcome from "emails/Welcome";

sendMail({
  subject: "My First Email",
  to: "tester@example.com",
  cc: "tester+cc@example.com",
  bcc: ["tester+bcc@example.com", "tester+bcc2@example.com"],
  component: <Welcome firstName="Amelita" />,
});

 

Mailing 의 특징을 간단하게 정리하자면 아래와 같습니다.

• RoR의 Action Mailer 에서 영향받은 오픈소스
• React 컴포넌트로 이메일 템플릿 만들기
• MJML로 어떤 메일 클라이언트에서든 잘 보이게
• 실시간 리로딩 되는 프리뷰 서버
• 개발 모드에서는 전송 대신 브라우저에서 메일 오픈
• next.js, redwood.js, remix 등과도 잘 동작

자세한 내용은 아래와 깃허브를 참고하시면 될것 같고요..

오늘의 블로그는 여기까지고요..
항상 믿고 봐주셔서 감사합니다.