React 웹 애플리케이션에서 이메일 보내기
이상적으로 React는 앱의 사용자 인터페이스를 구축하기 위한 프런트엔드 프레임워크입니다. React의 유연성과 종속성 설치 용이성으로 인해 React를 사용하여 프런트엔드와 백엔드를 모두 포함하는 전체 애플리케이션을 빌드할 수 있습니다.
이는 서버 간에 데이터를 교환해야 하는 이메일 앱을 구축하려는 경우에도 마찬가지입니다. 하지만 React로 이메일 앱을 구축하려면 어떻게 해야 할까요?
EmailJS API로 이메일 앱 만들기
EmailJS는 사용자가 React 프레임워크 내에서 이메일 앱을 만들 수 있도록 하는 종속성 중 하나입니다. 종속성 덕분에 앱이 서버 측을 관리하므로 앱의 백엔드를 구축할 필요가 없습니다. 올바른 코드를 입력하기만 하면 됩니다.
먼저 emailjs.com으로 이동하여 계정을 만듭니다. 계정이 확인되면 이메일 서비스를 설정합니다.
웹 사이트의 왼쪽 사이드바에서 이메일 서비스를 클릭하고 목록에서 Gmail을 선택합니다. 팝업이 나타납니다. 계정 연결을 클릭하고 서비스에 연결할 이메일을 선택한 다음 서비스 추가를 선택하여 이메일 서비스를 생성합니다.
이 작업이 성공하면 서비스 ID와 서비스에 연결한 이메일로 전송된 테스트 이메일을 받아야 합니다.
다음으로 왼쪽 사이드바에서 이메일 템플릿을 선택하고 새 템플릿 만들기를 클릭하여 이메일 템플릿을 만듭니다. 상태에 만족하면 저장을 클릭합니다.
템플릿 ID가 생성됩니다. 코드 내에서 이것이 필요합니다.
이제 React 프로젝트 폴더 생성을 진행합니다. 이 작업을 완료하면 다음을 사용하여 프로젝트 폴더로 이동하고 EmailJS 종속성을 설치합니다.
npm install emailjs-com
이제 종속성을 App.js 파일로 가져온 다음 다음과 같이 몇 가지 코드를 추가합니다.
코드 스니펫 - App.js:
import React from 'react';
import emailjs from 'emailjs-com';
export default function ContactUs() {
function sendEmail(e) {
e.preventDefault();
emailjs.sendForm('service_j0q23dh', 'template_rhntbdy', e.target, 'ehCd9ARJUiDG1yjXT')
.then((result) => {
window.location.reload()
}, (error) => {
console.log(error.text);
});
}
return (
<form className="contact-form" onSubmit={sendEmail}>
<input type="hidden" name="contact_number" />
<label>Name</label>
<input type="text" name="from_name" />
<label>Email</label>
<input type="email" name="from_email" />
<label>Subject</label>
<input type="text" name="subject" />
<label>Message</label>
<textarea name="html_message" />
<input type="submit" value="Send" />
</form>
);
}
이제 emailjs.sendForm('YOUR_SERVICE_ID' 'YOUR_TEMPLATE_ID' target, 'YOUR_USER_ID') 내부에서 각 요소를 생성한 요소로 대체합니다.
메일이 성공적으로 전송되면 window.location.reload() 기능이 페이지를 새로고침하여 다른 작업을 준비합니다. 그런 다음 이메일 페이지를 작성합니다.
onSubmit 이벤트 핸들러를 제출 버튼에 할당합니다. 클릭하시면 메일이 발송됩니다.
출력:
Expressjs 및 Mailgun으로 이메일 보내기
이번에는 풀스택 React 이메일 전송 앱을 만들어 보겠습니다. 자체 서버에서 이메일을 보내는 프론트 엔드와 백엔드가 모두 있습니다.
프런트엔드로 시작하려면 새 React 앱을 만들고 일부 종속성을 설치합니다. npm install axios로 Axios를 설치합니다. 백엔드로 보낼 요청을 처리합니다.
다음은 npm install react-toastify로 Toastify를 설치하는 것입니다. 이 의존성은 우리가 이메일을 성공적으로 보냈을 때 나타나는 스타일리시한 알림을 만드는 데 도움이 됩니다.
App.js 파일 내에서 아래와 같이 설치된 종속성을 가져온 다음 다음 코드를 함께 추가합니다.
코드 스니펫 - 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 [email, setEmail] = useState('');
const [subject, setSubject] = useState('');
const [message, setMessage] = useState('');
const [loading, setLoading] = useState(false);
const submitHandler = async (e) => {
e.preventDefault();
if (!email || !subject || !message) {
return toast.error('Please fill email, subject and message');
}
try {
setLoading(true);
const { data } = await axios.post(`/api/email`, {
email,
subject,
message,
});
setLoading(false);
toast.success(data.message);
} catch (err) {
setLoading(false);
toast.error(
err.response && err.response.data.message
? err.response.data.message
: err.message
);
}
};
return (
<div className="App">
<ToastContainer position="bottom-center" limit={1} />
<header className="App-header">
<form onSubmit={submitHandler}>
<h1>Send Email</h1>
<div>
<label htmlFor="email">Email</label>
<input
onChange={(e) => setEmail(e.target.value)}
type="email"
></input>
</div>
<div>
<label htmlFor="subject">Subject</label>
<input
id="subject"
type="text"
onChange={(e) => setSubject(e.target.value)}
></input>
</div>
<div>
<label htmlFor="message">Message</label>
<textarea
id="message"
onChange={(e) => setMessage(e.target.value)}
></textarea>
</div>
<div>
<label></label>
<button disabled={loading} type="submit">
{loading ? 'Sending...' : 'Submit'}
</button>
</div>
</form>
</header>
</div>
);
}
export default App;
페이지의 요소 상태가 변경되므로 각 구성 요소를 useState 함수에 할당한 다음 각 필드에 입력될 데이터를 처리하도록 Axios를 설정합니다.
이것은 submitHandler 구성 요소 내에서 수행됩니다. Toastify는 알림을 확인하고 적절하게 전달합니다.
다음으로 이메일 앱의 양식 부분을 만듭니다. 제출 버튼은 submitHandler 기능에 할당되며 onSubmit 이벤트 핸들러 덕분에 제출 버튼을 클릭하면 트리거됩니다.
페이지를 아름답게 하려면 아래와 같이 App.css 파일 내부에 이 스타일 스니펫을 포함합니다.
코드 스니펫 - App.css:
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
form > div {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem;
}
form > div > label {
margin: 1rem;
}
form > div > input,
form > div > textarea {
padding: 0.5rem;
min-width: 20rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
이제 백엔드로 가보겠습니다. 프로젝트 폴더 외부에 새 폴더를 만들고 백엔드로 이름을 지정합니다. 그런 다음 터미널 내에서 이 폴더를 탐색하고 npm init -y를 입력하여 노드를 시작합니다.
그런 다음 .gitignore 파일을 찾아 엽니다. 프로젝트 폴더의 package.json 파일 바로 위, src 폴더 바로 아래에 있습니다.
node_modules 뒤의 /를 제거합니다. 이렇게 하면 백엔드 폴더의 node-modules가 활성화됩니다.
여전히 프로젝트 폴더에서 package.json 파일을 엽니다. 이름 입력 후 다음 행에 다음을 추가하십시오. "proxy": "http://localhost:4000/",; 이것은 백엔드가 실행될 프록시입니다.
이제 다음과 같이 이러한 종속성을 동시에 설치합니다.
npm install dotenv express mailgun-js
dotenv는 개인 API 키와 같이 코드 내에서 사용할 중요한 데이터를 보호하는 데 도움이 됩니다. express는 백엔드에서 서버 연결을 처리하고 mailgun은 이메일 앱을 제공하는 데 필요한 API 키를 제공합니다.
다음으로 server.js와 .env라는 두 개의 파일을 만듭니다. server.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_DOMIAN,
});
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 <john@mg.yourdomain.com>',
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(`serve at http://localhost:${port}`);
});
다운로드한 종속성을 가져온 다음 코드를 생성하여 사용할 수 있습니다. mailgun.com에 등록할 때 얻게 되는 API 및 DOMAIN 키는 아래와 같이 .env 파일에 기록됩니다.
코드 스니펫 - .env:
MAILGUN_DOMIAN=sandbox540579ee3e724d14a5d72e9d087111a6.mailgun.org
MAILGUN_API_KEY=68fb630dbe57d3ba42d3a13774878d62-1b8ced53-29cac61a
server.js 파일로 가져옵니다. 그런 다음 이메일 요청 및 응답과 서버를 실행할 포트를 설정합니다.
.env 파일 내부의 키를 얻으려면 mailgun.com으로 이동하여 등록하십시오. 그런 다음 왼쪽 사이드바에서 보내기로 이동하여 도메인을 클릭하면 도메인 키인 sandboxXXXXmailgun.org가 표시됩니다.
위의 .env 파일과 같이 복사하여 붙여넣은 다음 도메인 키를 클릭합니다. 맨 오른쪽에 API 키가 표시되어야 합니다. 개인 API 키를 공개하고 복사하여 .env 파일에 붙여넣습니다.
여전히 도메인 페이지의 맨 오른쪽에 Authorized Recipients(인증된 수신자)가 표시되고 보내려는 이메일을 입력합니다. 해당 이메일로 이동하여 mailgun 프로필에서 이메일을 수신할 것인지 확인하십시오.
그런 다음 도메인 페이지로 돌아가서 새로고침하여 수신자 이메일이 확인되었는지 확인합니다.
터미널로 돌아가서 프로젝트 폴더로 이동하고 npm start를 입력하여 앱을 시작합니다. 다른 터미널 탭인 cd를 백엔드 폴더로 열고 node server.js를 입력하여 백엔드 폴더를 시작합니다.
앱으로 이동하여 이메일을 보냅니다.
출력:
결론
지금까지 React 프레임워크를 사용하여 거의 모든 앱을 만들 수 있습니다. 여러 구성 요소, API 및 종속 항목을 함께 가져와 가볍고 유연하지만 매우 효과적이고 효율적인 웹 애플리케이션을 만드는 유연성 때문입니다.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn