React에서 첨부 파일이 포함된 이메일 보내기 가이드

Lucas Simon
2024년 5월 17일 금요일 오전 12:20:46
React.js and Next.js

파일 첨부가 포함된 문의 양식 만들기

사용자가 첨부 파일이 포함된 이메일을 보낼 수 있도록 React에서 문의 양식을 만드는 것은 어려울 수 있으며, 특히 Resend와 같은 타사 서비스를 통합할 때 더욱 그렇습니다. 오류를 방지하려면 파일 업로드를 올바르게 설정하고 처리하는 것이 중요합니다.

이 가이드는 React 및 Resend를 사용하여 문의 양식을 설정하고 파일 첨부 처리 및 서버 오류 디버깅과 같은 일반적인 문제를 해결하는 과정을 안내합니다. 다음 단계를 따르면 첨부 파일이 포함된 이메일을 원활하게 보낼 수 있습니다.

명령 설명
Resend.emails.send() 보낸 사람, 받는 사람, 제목, HTML 및 첨부 파일을 포함하여 지정된 매개변수를 사용하여 이메일을 보냅니다.
setHeader() 지정된 매개변수로 응답 헤더를 설정합니다. 여기서는 'POST' 메소드만 허용하기 위해 사용됩니다.
FileReader() 파일의 내용을 비동기적으로 읽습니다. 여기에서는 파일을 base64 문자열로 변환하는 데 사용됩니다.
readAsDataURL() 파일을 base64로 인코딩된 문자열로 읽는 FileReader의 메서드입니다.
onload() 파일 읽기 작업이 완료되면 트리거되는 FileReader에 대한 이벤트 핸들러입니다.
split() 문자열을 부분 문자열 배열로 분할합니다. 여기서는 데이터 URL 접두사에서 base64 콘텐츠를 분리하는 데 사용됩니다.
JSON.stringify() JavaScript 개체 또는 값을 JSON 문자열로 변환합니다.

React 문의 양식에 이메일 첨부 구현하기

백엔드 스크립트는 첨부 파일이 포함된 이메일을 보내기 위해 Next.js API 경로와 Resend 라이브러리를 사용하여 생성됩니다. 핵심 기능은, , 이메일을 보내는 데 사용됩니다. 이 함수는 다음과 같은 매개변수를 사용합니다. , , 삼, , 그리고 . 그만큼 매개변수에는 파일 내용과 파일 이름이 포함됩니다. 스크립트는 필요한 모듈을 가져오는 것으로 시작하고 환경 변수에 저장된 API 키를 사용하여 Resend 인스턴스를 초기화합니다. 함수는 다음을 처리합니다. POST 요청하고 이메일을 보내고 성공하면 이메일 ID를 반환합니다. 방법이 아닌 경우 , 응답 헤더만 허용하도록 설정합니다. 405 상태를 요청하고 반환합니다.

프런트엔드에서는 연락처 양식을 처리하기 위해 React 구성 요소가 생성됩니다. 구성 요소는 React를 사용하여 파일 내용과 파일 이름의 상태를 유지합니다. 훅. 파일을 선택하면, 객체는 파일 내용을 base64로 인코딩된 문자열로 읽습니다. 파일의 내용과 이름은 구성 요소의 상태에 저장됩니다. 양식 제출 시 비동기 함수는 base64로 인코딩된 파일 콘텐츠 및 파일 이름을 사용하여 백엔드 API에 요청합니다. 요청 헤더는 다음과 같이 설정됩니다. application/json 요청 본문에는 파일 데이터가 포함되어 있습니다. 이메일이 성공적으로 전송되면 경고가 표시됩니다. 그렇지 않으면 오류 경고가 표시됩니다.

재전송을 사용하여 첨부 파일이 포함된 이메일을 보내는 백엔드 스크립트

재전송을 사용하는 Next.js의 백엔드 스크립트

import type { NextApiRequest, NextApiResponse } from 'next';
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

const send = async (req: NextApiRequest, res: NextApiResponse) => {
  const { method } = req;
  const { content, filename } = req.body;

  switch (method) {
    case 'POST': {
      try {
        const { data } = await resend.emails.send({
          from: 'onboarding@resend.dev',
          to: ['XXXXXXXXXX@gmail.com'],
          subject: 'Email with attachment',
          html: '<p>See attachment</p>',
          attachments: [{
            content,
            filename,
          }],
        });
        return res.status(200).send({ data: data?.id });
      } catch (error) {
        return res.status(500).json({ error: 'Internal Server Error' });
      }
    }
    default: {
      res.setHeader('Allow', ['POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
    }
  }
};

export default send;

파일 첨부가 포함된 문의 양식의 프런트엔드 구성 요소

React.js의 프런트엔드 구성요소

import * as React from 'react';

const ContactForm: React.FC = () => {
  const [content, setContent] = React.useState<string | null>(null);
  const [filename, setFilename] = React.useState('');

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (content === null) {
      alert('Please select a file to upload');
      return;
    }
    const base64Content = content.split(',')[1];
    try {
      await fetch('/api/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: base64Content, filename }),
      });
      alert('Request sent');
    } catch (e) {
      alert('Something went wrong');
    }
  };

  const onAddFileAction = (e: React.ChangeEvent<HTMLInputElement>) => {
    const reader = new FileReader();
    const files = e.target.files;
    if (files && files.length > 0) {
      reader.onload = (r) => {
        if (r.target?.result) {
          setContent(r.target.result.toString());
          setFilename(files[0].name);
        }
      };
      reader.readAsDataURL(files[0]);
    }
  };

  return (
    <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: 200 }}> 
      <input type="file" name="file" onChange={onAddFileAction} accept="image/*" /> 
      <input type="submit" value="Send Email" /> 
    </form> 
  );
};

export default ContactForm;

React Forms에서 파일 업로드 처리하기

React 양식에서 파일 업로드를 처리할 때 파일 읽기 및 데이터 인코딩을 올바르게 처리하는 것이 중요합니다. 사용하여 JavaScript의 API를 사용하면 파일 내용을 비동기식으로 읽고 이를 HTTP를 통해 파일 데이터를 보내는 데 필요한 base64 인코딩 문자열로 변환할 수 있습니다. 이 인코딩된 문자열은 API 호출 시 요청 본문의 일부로 쉽게 전송될 수 있습니다.

데이터 손상이나 불완전한 업로드와 같은 문제를 방지하려면 파일 데이터를 올바르게 읽고 인코딩하는 것이 중요합니다. 또한 다양한 파일 형식과 크기를 적절하게 처리하면 예기치 않은 오류를 예방할 수 있습니다. 파일 업로드 프로세스를 통해 사용자를 안내하고 문제가 발생하면 이를 알리기 위해서는 적절한 오류 처리 및 경고와 같은 사용자 피드백도 중요합니다.

  1. 사용 목적은 무엇입니까 파일 업로드에서?
  2. 그만큼 API는 파일의 내용을 비동기적으로 읽고 이를 HTTP 요청 전송을 위해 base64 문자열로 인코딩하는 데 사용됩니다.
  3. 파일 업로드가 안전한지 어떻게 확인할 수 있나요?
  4. 다음을 사용하여 특정 파일 형식만 허용되는지 확인하세요. 입력 필드의 속성입니다. 또한 서버 측에서 파일 콘텐츠의 유효성을 검사합니다.
  5. 의 의미는 무엇입니까? 이벤트 ?
  6. 그만큼 파일 읽기 작업이 완료되면 이벤트가 트리거되어 파일 내용에 액세스하고 추가 작업을 수행할 수 있습니다.
  7. React에서 대용량 파일을 어떻게 처리하나요?
  8. 대용량 파일의 경우 브라우저 메모리 제한을 방지하고 사용자에게 진행률 피드백을 제공하려면 청크 파일 업로드를 구현하는 것이 좋습니다.
  9. 왜 사용해야합니까? 파일 데이터를 보낼 때?
  10. 파일 데이터가 포함된 JavaScript 개체를 API 호출의 요청 본문에 필요한 형식인 JSON 문자열로 변환합니다.
  11. 이메일을 보낼 때 500(내부 서버 오류)은 무엇을 의미합니까?
  12. 500 오류는 일반적으로 잘못된 API 엔드포인트 구성이나 이메일 전송 서비스 내의 문제와 같은 서버 측 문제를 나타냅니다.
  13. API 호출에서 500 오류를 어떻게 디버깅할 수 있나요?
  14. 자세한 오류 메시지는 서버 로그를 확인하고 API 엔드포인트와 요청 페이로드가 올바르게 구성되었는지 확인하세요.
  15. 어떤 역할을 하는가 백엔드 스크립트의 메소드 플레이?
  16. 그만큼 메소드는 허용되는 HTTP 메소드(예: 'POST')를 지정하여 HTTP 응답 헤더를 설정하는 데 사용됩니다.
  17. 파일 업로드 중에 사용자 피드백을 어떻게 제공할 수 있나요?
  18. 경고 메시지, 진행률 표시줄 또는 상태 표시기를 사용하여 사용자에게 업로드 상태 및 발생한 오류를 알립니다.
  19. 이 설정으로 여러 파일을 한 번에 업로드할 수 있나요?
  20. 이 설정은 단일 파일 업로드를 처리합니다. 여러 파일의 경우 파일 데이터 배열을 처리하고 이를 API 요청으로 보내도록 코드를 수정해야 합니다.

Resend를 사용하여 React 문의 양식에 파일 첨부를 구현하려면 프런트엔드 및 백엔드 구성이 모두 필요합니다. 프런트 엔드는 파일 선택, 읽기 및 base64로 인코딩을 처리하는 반면 백엔드는 Resend의 API를 사용하여 첨부 파일이 포함된 이메일 전송을 관리합니다. 원활한 사용자 경험을 위해서는 적절한 오류 처리 및 사용자 피드백 메커니즘이 중요합니다. 모범 사례를 따르고 모든 구성이 올바른지 확인하면 서버 오류와 같은 일반적인 함정을 피하는 데 도움이 될 수 있습니다.