이메일은 매우 빠르고 저렴하며 상한선이 없는 유기적인 비즈니스 커뮤니케이션의 필수 방법입니다. 제품을 구축할 때 이메일은 다양한 종류의 데이터를 전자적으로 전송할 수 있는 효과적이고 효율적인 매체를 비즈니스에 크게 제공할 수 있습니다.
이 기사에서는 Mailgun 서비스를 사용하여 이메일을 보내는 양식을 작성하는 방법을 배웁니다. 프런트엔드 애플리케이션의 경우 React를 사용하고, 백엔드에서 Node.js를 사용하고, 비동기식 요청을 만들고, Axios를 사용하고, 알림을 표시하기 위해 React-Toastify 패키지를 사용합니다. . 하루가 끝나면 다음과 같이 작동하는 메일 서비스를 구축해야 합니다.
참고 : 오늘 조금씩 빌드할 이 프로젝트의 리포지토리에 액세스할 수 있으며 이를 사용하여 구현을 가지고 놀 수 있습니다. GitHub의 링크.
시작하자!
프로젝트 설정
오늘 우리가 구축할 첫 번째 것은 React를 사용하는 프론트엔드 애플리케이션입니다.
React 라이브러리를 시작하는 것은 JavaScript 파일(CDN)을 HTML 파일에 포함하는 것처럼 간단합니다. 그러나 실제 대규모 애플리케이션의 경우 React CLI가 시작하기에 더 좋은 방법입니다. 오늘 튜토리얼에서 React CLI를 사용할 것입니다.
이 기사에서는 React 팀에서 빌드한 CLI 도구를 사용하여 React 애플리케이션의 신속한 개발을 지원합니다. React CLI를 설치하려면 다음 명령을 실행합니다.
npm install -g create-react-app
.
이제 프로젝트를 만들고 이름을 지정하겠습니다. react-node-email-app
, 아래 명령을 사용하여:
$ npx create-react-app react-node-email-app
이렇게 하면 프로젝트를 빌드하기 위한 시작 템플릿이 생성됩니다. 프로젝트 디렉터리로 이동한 다음 개발 서버를 실행하여 이 템플릿을 볼 수 있습니다.
$ cd react-node-email-app
$ yarn start
그런 다음 브라우저에서 프런트엔드를 볼 수 있습니다. localhost:3000
.
프로젝트 UI 빌드
이제 애플리케이션의 프런트엔드 구축을 시작할 수 있습니다. 이메일을 보낼 수 있는 양식을 작성하는 것으로 시작하겠습니다.
우리는 이것을 할 것입니다 App.js
다음과 같이 업데이트됩니다.
import './App.css';
import { useState } from 'react'; function App() { const = useState('') const [subject, setSubject] = useState('') const [message, setMessage] = useState('') return ( <div className="App"> <section> <form> <h1>Send Email</h1> <div className='form-wrapper'> <div> <label htmlFor='email'>Email Address</label> <input onChange={(e)=>setEmail(e.target.value)} type="email" id="email"></input> </div> <div> <label htmlFor='subject'>Email Subject</label> <input onChange={(e)=>setSubject(e.target.value)} type="text" id="subject"></input> </div> <div> <label htmlFor='message'>Message Body</label> <textarea onChange={(e)=>setMessage(e.target.value)} type="text" id="message"></textarea> </div> <div> <button type='submit'>Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
여기서는 수신자의 이메일을 입력하기 위한 입력 필드, 이메일 제목을 입력하기 위한 입력 필드, 이메일의 주요 메시지를 입력하기 위한 입력 필드가 있는 양식을 만들었습니다.
다양한 입력 필드에서 입력 상자의 변경 사항을 처리하는 상태를 설정했습니다. 즉, 사용자가 onChange
이벤트 리스너.
이메일 제출을 위한 버튼도 만들었습니다.
양식을 아름답게 하기 위해 App.css
내용이 다음과 같이 보이도록 다음 CSS 스타일로 파일을 만듭니다.
.App { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #282c34;
}
.App section form { min-width: 25rem; margin: 0 auto; border: solid 1px #bdbdbd; border-radius: 8px; padding: 2rem;
}
form h1 { text-align: center; color: #ffffff;
}
form .form-wrapper { margin: 0 auto;
} form .form-wrapper > div { margin-bottom: 1rem;
}
form .form-wrapper > div > label { margin-bottom: 0.5rem; color: #ffffff; display: block;
}
form .form-wrapper > div > input, form .form-wrapper > div > textarea { padding: 0.5rem; border-radius: 4px; border: none; outline: none; min-width: 20rem; font-family: Arial, Helvetica, sans-serif;
}
form .form-wrapper > div > button { padding: 1rem 2.5rem; color: white; background: rgb(4, 144, 199); border-radius: 4px; border: none; cursor: pointer;
}
응용 프로그램의 성능을 향상시키기 위해 onSubmit
단추를 클릭할 때 페이지를 실제로 새로 고치는 양식의 기본 동작을 방지하려면 양식 요소에 핸들러 이벤트 함수를 정의해야 합니다. 백그라운드에서 요청을 전송하므로 사용자에게 더 나은 경험을 제공하기 때문에 버튼을 클릭할 때 페이지가 새로고침되는 것은 이상적이지 않습니다.
사용자가 이메일, 제목 또는 메시지를 입력하지 않은 경우 이메일을 보낼 수 없도록 하는 것도 이상적입니다. 이를 위해 해당 필드가 비어 있는지 확인하기 위해 몇 가지 입력 유효성 검사가 필요합니다. 일치하는 경우 "이메일, 제목 및 메시지를 입력하십시오"라는 메시지와 함께 오류를 반환합니다.
이를 위해 우리는 건배하다 우리 응용 프로그램의 패키지. 프로젝트 터미널에서 다음 명령을 실행하여 설치해야 합니다.
$ yarn add react-toastify
다음으로, 업데이트 App.js
와 더불어 submitHandler
기능:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css' function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button type="submit">Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
이제 사용자가 이메일 주소, 이메일 제목 및 메시지 입력 필드를 미리 채우지 않고 버튼을 클릭하여 이메일을 보낼 때마다 토스트 메시지가 필요한 모든 작업을 수행하라는 메시지를 표시합니다.
우리도 필요하기 때문에 axios
AJAX 요청을 만들기 위한 라이브러리도 설치해야 합니다.
$ yarn add axios
다음으로 try/catch
이메일 전송을 위한 비동기 요청을 처리하는 블록입니다.
App.js
이제 다음과 같이 업데이트됩니다.
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios"; function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const [loading, setLoading] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); try { setLoading(true); const { data } = await axios.post(`/api/email`, { email, subject, message, }); setLoading(false); toast.success(data.message); } catch (error) { setLoading(false); toast.error( error.response && error.response.data.message ? error.response.data.message : error.message ); } }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button disabled={loading} type="submit"> {loading ? "Sending..." : "Send Email"} </button> </div> </div> </form> </section> </div> );
} export default App;
노드를 사용하여 백엔드 애플리케이션 구축
이 시점에서 애플리케이션의 프런트엔드를 성공적으로 구현했습니다. 계속해서 Node를 사용하여 백엔드 작업을 시작합니다.
먼저 프로젝트의 루트에 새 디렉토리를 만듭니다. backend
.
지금, cd
백엔드 디렉토리로 이동하고 실행 npm init
Node 앱 생성을 시작하기 위해 터미널에서.
$ npm init --y
모범 사례, 업계에서 인정하는 표준 및 포함된 치트 시트가 포함된 Git 학습에 대한 실습 가이드를 확인하십시오. 인터넷 검색 Git 명령을 중지하고 실제로 배움 이것!
주의 사항다음 --y
옵션은 NPM이 모든 질문에 "예"라고 대답하도록 지시합니다. init
명령. 기본적으로 기본 설정을 제공합니다. package.json
파일.
이렇게하면 package.json
백엔드 프로젝트의 애플리케이션 종속성을 관리할 수 있는 파일입니다.
다음으로 다음 패키지를 설치합니다.
express
: 웹 서버 생성dotenv
: 구성 데이터를 읽고 액세스 가능한 코드에서 민감한 데이터를 멀리하는 좋은 방법 역할을 합니다.mailgun-js
: Mailgun을 사용하여 이메일을 보낼 수 있습니다.
$ yarn add express dotenv mailgun-js
이제 이 패키지가 설치되면 두 개의 새 파일을 만듭니다. server.js
및 .env
FBI 증오 범죄 보고서 backend
폴더에 있습니다.
. .env
파일에 Mailgun의 도메인과 API 키를 보관합니다.
서버 구축
이번에 server.js
파일에서 목표는 Express.js를 사용하여 서버를 만드는 것입니다. 거기에서 우리는 express
, dotenv
및 mailgun-js
패키지.
server.js
다음과 같이 업데이트됩니다.
const express = require("express");
const dotenv = require("dotenv");
const mg = require("mailgun-js"); dotenv.config(); const mailgun = () => mg({ apiKey: process.env.MAILGUN_API_KEY, domain: process.env.MAILGUN_DOMAIN, });
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true })); app.post("/api/email", (req, res) => { const { email, subject, message } = req.body; mailgun() .messages() .send( { from: "John Doe <>", to: `${email}`, subject: `${subject}`, html: `<p>${message}</p>`, }, (error, body) => { if (error) { console.log(error); res.status(500).send({ message: "Error in sending email" }); } else { console.log(body); res.send({ message: "Email sent successfully" }); } } );
}); const port = process.env.PORT || 4000;
app.listen(port, () => { console.log(`App is served at port ${port}`);
});
여기에서 우리는 mg
함수에 할당 mailgun
. 에서 mg
기능, 우리는 환경 변수에서 API 키와 도메인을 전달하고 사용합니다. mailgun
이메일을 보냅니다.
그 후 Express 앱이 생성되고 두 개의 미들웨어 express.json()
및 express.urlencoded
API 요청에서 Express를 사용하여 페이로드를 가져오고 이를 다음으로 변환하는 데 사용됩니다. req.body
.
다음으로 POST
경로와 함께 경로 /api/email
를 생성하고 그 안에 요청과 응답을 받아들이는 함수를 정의한다. 이메일, 제목 및 메시지는 다음에서 추출할 수 있습니다. req.body
물체. 사용자가 프런트엔드 애플리케이션의 입력 필드에서 입력하는 데이터입니다.
이것이 추출되면, messages
의 방법 mailgun
초기에 설정된 함수가 호출된 후 send
메서드가 호출됩니다. send 메서드에서 다음 속성을 포함하는 개체가 전달됩니다.
from
: 이메일의 "보낸 사람" 섹션에서 사용자에게 표시되는 이름입니다.to
이메일이 전송되는 이메일 주소(입력 필드에 입력된 이메일).subject
: 제목이 입력되었습니다.html
: 이메일 주소로 보낼 메시지를 정의하는 HTML 마크업입니다.
에 전달된 두 번째 매개변수 send
method는 오류와 본문을 받아들이는 함수입니다. 이 기능에서 우리는 console.log
오류, 상태 코드를 다음으로 설정 500
, "이메일 전송 오류"라는 메시지를 보냅니다. 그렇지 않으면 본문을 기록하고 성공 시 "이메일 전송 성공"이라는 메시지를 보냅니다.
파일 맨 끝에서 포트를 가져옵니다. .env
파일 및 전화 app.listen()
서버를 시작합니다.
API 키 정의
애플리케이션에서 Mailgun을 사용하기 위한 API 키를 정의하는 첫 번째 단계는 무료 계정을 만드는 것입니다. 공식 웹 사이트.
계정을 생성하면 생성한 계정의 API 키가 전송되며 대시보드의 측면 탐색에 있는 보내기 탭으로 이동하여 도메인에 액세스할 수 있습니다.
샌드박스 링크와 API 키를 모두 복사하고 .env
내가 한 것처럼 파일:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
그런 다음 링크를 클릭하여 도메인의 개요 페이지로 돌아갑니다. 페이지는 다음과 같아야 합니다.
여기에 페이지 오른쪽에 이메일 전송을 테스트하려는 이메일 주소를 입력하여 승인된 수신자를 생성합니다.
"수신자 저장" 버튼을 클릭하면 아래와 같은 이메일이 전송됩니다.
"동의함" 버튼을 클릭하면 외부 페이지로 리디렉션됩니다.
"예" 버튼을 클릭하여 수신자 주소 활성화를 진행합니다. 이제 해당 주소는 Mailgun을 통해 이메일 수신을 시작할 수 있습니다.
마지막으로 Mailgun을 성공적으로 설정하고 Node를 사용하여 백엔드를 구축했습니다.
이제 백엔드 디렉토리에서 다음 코드를 실행하여 Express 서버를 즐겁게 가동할 수 있습니다.
$ node server.js
노드 앱을 React 앱에 연결
프런트엔드를 백엔드에 연결하려면 package.json
React 앱용 프로젝트의 루트 디렉터리에 있는 파일입니다. 그런 다음 name
속성, 라는 새 속성을 추가합니다. proxy
, 백엔드 서버의 포트 값이 있어야 합니다. 다음과 같아야 합니다.
"proxy": "http://localhost:4000/"
이를 추가하면 프런트엔드에서 만드는 모든 비동기 요청이 우리가 만든 백엔드 서버로 리디렉션됩니다.
프런트엔드 개발 서버를 다시 시작하여 앱을 다시 로드합니다.
이메일 주소(이전에 활성화한 수신자), 이메일 제목 및 메시지를 입력하고 "제출" 버튼을 눌러 지금까지 구현한 모든 것을 테스트하십시오. 이것은 이메일이 성공적이었다는 성공 축배를 보여줄 것입니다.
수신자 주소의 받은편지함에서 내가 한 것처럼 이메일도 받아야 합니다.
최대 포장
이메일 보내기는 암호 재설정, 애플리케이션에 사용자 환영, 주문 확인 등과 같은 경우에 여전히 매우 유용하며 이 기사에서는 Mailgun을 사용하여 Node.js 애플리케이션에서 이메일을 보내는 것이 얼마나 쉬운지 배웠습니다. . Mailgun으로 작업하는 것이 얼마나 쉬운지, 시작하기 위해 계정을 만드는 것이 얼마나 사용자 친화적이고 빠른지 확인했습니다.
다음 번에 프로젝트를 위한 이메일 인프라를 구축해야 하는 경우 Mailgun과 같은 메일 전송 도구를 확인하십시오. 이 도구를 사용하는 데 도움이 필요하시면 언제든지 저 또는 개발자 커뮤니티에 연락해 주세요. 기꺼이 도와드리겠습니다.
추가 자료
- SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
- 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
- 출처: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- 할 수 있는
- 수락
- 수락
- ACCESS
- 얻기 쉬운
- 에 따르면
- 계정
- 실제로
- 추가
- 주소
- 후
- 앞으로
- 경보
- All
- 및
- 다른
- 답변
- 누군가
- API를
- API 키
- 앱
- 어플리케이션
- 어플리케이션
- 약
- 기사
- 할당 된
- 자동
- Axios
- 뒤로
- 백엔드
- 배경
- 세게 때리다
- 가
- 존재
- 이하
- 더 나은
- 비트
- 블록
- 몸
- 경계
- 보물상자
- 브라우저
- 빌드
- 건물
- 내장
- 사업
- 단추
- 전화
- 라는
- 얻을 수 있습니다
- 가지 경우
- 잡아라
- 센터
- 이전 단계로 돌아가기
- 문자
- 싼
- 검사
- 암호
- 의사 소통
- 커뮤니티
- 구성
- 연결하기
- 내용
- 변하게 하다
- 만들
- 만든
- 생성
- 만들기
- CSS
- 계기반
- 데이터
- 일
- 태만
- 한정된
- 정의
- 정의
- 개발자
- 개발
- DID
- 도메인
- 마다
- 이전
- 유효한
- 효율적인
- 전자적으로
- 이메일
- 이메일
- 수
- 엔터 버튼
- 입력 된
- 들어갑니다
- 환경
- 오류
- 필수
- 본질적으로
- 등
- 이벤트
- 경험
- 급행
- 외부
- 용이하게하다
- FAST
- 들
- Fields
- 입양 부모로서의 귀하의 적합성을 결정하기 위해 미국 이민국에
- 파일
- 채우기
- Find
- 먼저,
- 초점
- 수행원
- 형태
- 양식
- 무료
- 에
- 프런트 엔드
- 기능
- 얻을
- 점점
- 지프
- 힘내
- 제공
- Go
- 큰
- 매우
- 안내
- 핸들
- 손 -에
- 머리
- 도움
- 히트
- 보유
- 가져가
- 방법
- How To
- HTML
- HTTPS
- ICON
- 이상
- 이행
- 구현
- import
- 개선
- in
- 포함
- 포함
- 인프라
- 처음에는
- 입력
- 설치
- 설치
- IT
- 자바 스크립트
- 요한 복음
- 존 데
- 유지
- 키
- 키
- 대규모
- 성
- 배우다
- 배운
- 배우기
- LG
- 도서관
- LINK
- 로드
- 보기
- 같이
- 봐라.
- 만든
- 본관
- 확인
- 유튜브 영상을 만드는 것은
- 구축
- 매질
- 메시지
- 방법
- 움직이는
- name
- 탐색
- 탐색
- 필요
- 신제품
- 노드
- Node.js를
- 알림
- 대상
- 목표
- ONE
- 선택권
- 주문
- 유기적인
- 그렇지 않으면
- 개요
- 꾸러미
- 패키지
- 매개 변수
- 합격
- 비밀번호
- 통로
- 성능
- 플라톤
- 플라톤 데이터 인텔리전스
- 플라토데이터
- 연극
- 부디
- 포인트 적립
- 실용적인
- 예방
- 방법
- 제품
- 프로젝트
- 속성
- 재산
- 보호
- 제공
- 대리
- 목적
- 문의
- 빠른
- RE
- 도달
- 반응
- 현실 세계
- 받다
- 전수
- 유적
- 저장소
- 의뢰
- 요청
- 필수
- 응답
- return
- 반지
- 뿌리
- 길
- 달리기
- 달리는
- 모래 상자
- 찜하기
- 라고
- 둘째
- 초
- 섹션
- 전송
- 민감한
- 서브
- 서비스
- 세트
- 설정
- 그림자
- 영상을
- 표시
- 표시
- 측면
- 단순, 간단, 편리
- 이후
- So
- 고체
- 일부
- 무언가
- 회전
- 스택카부스
- 기준
- 스타트
- 시작
- 주 정부
- Status
- 단계
- 중지
- 제목
- 제출
- 제출
- 성공
- 성공한
- 성공적으로
- 이러한
- SVG
- 소요
- 목표
- 팀
- 말하다
- 이 템플릿
- 단말기
- test
- XNUMXD덴탈의
- 샌드 박스
- 그들의
- 그 안에
- 맡은 일
- 세
- 을 통하여
- 시간
- 에
- 토스트
- 오늘
- 너무
- 수단
- 검색을
- 전이
- 부치다
- 트리거
- 참된
- 지도 시간
- 아래에
- 업데이트
- 업데이트
- us
- 사용
- 사용자
- 사용하기 쉬운
- 사용자
- 확인
- 가치
- 여러
- Ve
- 관측
- 웹
- 환영
- 어느
- 동안
- 화이트
- 의지
- 없이
- 작업
- 일
- 겠지
- XML
- 자신의
- 너의
- 당신 자신
- 제퍼 넷