[React / Express.JS Study] Main전송 - nodemailer 사용

---

폴더 트리

🔵 Front-End

• client
  • public/
  • src/
    • ContactForm.js
    • App.js
    • index.js
  • package-lock.json
  • package.json
  • README.md

🔵 App.js 구조

import './App.css';
import ContactForm from './ContestForm';


function App() {
  return (
    <div className="App">
        <ContactForm/>
    </div>
  );
}

export default App;

🔵 ContactForm.js 구조

import React, { useState } from 'react';

const ContactForm = () => {

    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [message, setMessage] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();

        const data = {
            name: name,
            email: email,
            message: message,
        };

        try {
            const response = await fetch('http://localhost:4000/send-email', {
                method: 'POST',
                headers: {
                    'Content-Type' : 'application/json',
                },
                body: JSON.stringify(data),
            });
            const result = await response.json();
            console.log(result);
        } catch (error) {
            console.log(error);
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type='text' value={name} onChange={(e) => setName(e.target.value)}/>
            </label>
            <label>
                Email:
                <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
            </label>
            <label>
                Message:
                <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
};

export default ContactForm;

🟢 Back-End

• server
  • app.js
  • package-lock.json
  • package.json
  • README.md

🟢 설치 모듈

1. express.js
   npm install express

2. body-parser
   npm install body-parser

3. nodemailer
   npm install nodemailer

4. cors
   npm install cors

🟢 app.js 구조

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const cors = require('cors');

const app = express();
app.use(bodyParser.json());
app.use(cors());

// Nodemailer 설정
const transporter = nodemailer.createTransport({
    service: 'Gmail',
    auth: {
        user: process.env.🟢나의 지메일 주소🟢,
        pass: process.env.🟢나의 지메일 앱비밀번호🟢,
    },
});

// 이메일 전송 라우트
app.post('/send-email', async (req, res) => {
    const { name, email, message } = req.body;

    const mailOptions = {
        from: process.env.🟢나의 지메일 주소🟢,
        to: process.env.🟢나의 받을 메일 주소🟢,
        subject: 'New Inquiry from Contact Form',
        text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`,
    };

    try {
        await transporter.sendMail(mailOptions);
        res.json({ success: true });
    } catch (error) {
        console.error(error);
        res.status(500).json({ success: false, error: 'Error sending email' });
    }
});

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

구글 앱비밀번호 만들기

1. 구글에서 로그인 후 프로필 > 계정관리

2. 보안 클릭

3. 2단계 인증 클릭

4. (23.08.14 기준) 최하단 앱 비밀번호 클릭

5. 앱 선택 (기타) / 기기 선택 (프로젝트이름)

6. 생성을 누르면 아래와 같이 노란색배경에 비밀번호가 생성된다

7. 저 비밀번호가 app.js에 🟢나의 지메일 앱비밀번호🟢에 들어간다

메일 확인

1. 백엔드 서버

실행 : node app.js

2. 프론트 서버