24일차

24일차는 개인 페이지를 진행했다. 어제 배운 Firebase를 사용하면 Contact부분에 있는 Form으로 이메일을 보낼 수 있겠다 생각해서 이메일을 보내는 걸 만들었다.

gitHub : https://github.com/leeyulgok/yulgok-page

오늘은 하루종일 이걸 만들었다.

이메일 전송하기

결론

결론부터 말하면 이번에는 실패했다. 완전 이유를 모르겠다. 이게 내 문제인지, 아니면 SendGrid 쪽 문제인지 mail을 받는 gmail이나 naver의 문제인지 하루종일 찾아 해맸다.

하나하나 정리하면서 오늘 했던 것들을 기록해야겠다.

순서

우선 순서는 이러하다.

1. Firebase에서 Blaze요즘제로 가입하기.
   (+ Blaze 요즘제는 일정 부분은 무료로 사용하다가 이용량이 많아지면 사용한만큼 요금을 지불하는 형식이다. Firebase에서 Function을 사용하려면 요금제를 사용해야 한다.)
2. Firebase CLI 설정하기.
3. SendGrid 가입하고 API Key 받기.
4. SendGrid API Key를 Firebase Function에 연결하기.
5. 리액트와 Firebase 연결하기.

이런 순서로 보냈다. 이메일을 전송하는 흐름은,

1. 사용자가 Form에서 내용을 입력하고 Submit을 한다.
2. 값이 Firebase Fetch/URL에 연결된다.
3. Firebase 코드가 연결되며, SendGrid에 값을 보낸다.
4. SendGrid에서 메일을 전송한다.

이 흐름을 토대로 기록을 해보자.

메일 보내기

우선 사용자가 메일을 사진과 같이 보낸다. 필요한 값을 넣고 보내면, 밑에 Email 부분에 성공여부가 나온다. 처음에는 전송중일 때는 loading이 나오고 성공하면 사진과 같이, 실패하면 오류가 나온다.

Firebase

Firebase의 Function 부분이다. 이 함수는 Firebase CLI를 설정할 때, 만들고 SendGrid에 값을 보내는 함수로 만들었다. 사진을 보면 이 함수에 얼마나 요청이 왔는 지 알 수 있다.

Firebase의 로그를 확인하는 곳이다. 로그들을 보면 입력했던 값이 잘 들어온 걸 볼 수 있다. 여기까지는 문제없이 흘러갔다는 걸 볼 수 있다.

SendGrid

문제는 이곳이다. 내가 SendGrid에서 오늘 활동한 내역이다. 뒤의 리스트들을 보면 상태가 전부 Processing 상태다. 아직 처리중인 뜻인데 내용을 자세히 보면 사진과 같다. SendGrid에서는 일을 처리했다고 하는데 mail을 수신하는 gmail or naver 쪽에서 보류중이라는 얘기가 나온다.

(아무나 좋으니 이 부분을 해결해주시면 감사하겠습니다...)

이 부분에서 도저히 어떤 게 잘못되었는지 모르겠다. 이전까지는 로그를 잘쫒아다니면서 오류를 찾아 수정해나갔는데 여기서는 해답을 못찾겠다.

코드

이 코드는 Firebase의 sendMail 함수다.

sendMail.js

const functions = require("firebase-functions");
const cors = require('cors')({ origin: true });
const sgMail = require("@sendgrid/mail");

sgMail.setApiKey(functions.config().sendgrid.key);
exports.sendEmail = functions.https.onRequest((req, res) => {
  cors(req, res, () => {
    const { email, name, phone, message } = req.body;

    const mailOptions = {
      from: '',
      to: '',
      replyTo: email, 
      subject: `Message from ${name}`,
      text: `Name: ${name}\nPhone: ${phone}\nMessage: ${message}\nEmail: ${email}`,
      html: `<p>Name: ${name}</p><p>Phone: ${phone}</p><p>Message: ${message}</p><p>Email: ${email}</p>`
    };

    return sgMail.send(mailOptions)
      .then(() => {
        console.log('Email sent');
        console.log(mailOptions);
        res.status(200).send('Email sent');
      })
      .catch((error) => {
        console.error('Error sending email:', error);
        res.status(400).send(error);
      });
  });    
});

우선 이 함수의 역할은 받은 값으로 메일 형태로 갖추고, SendGrid로 보내는 역할이다. 조금 더 상세히 적으면 Form 에서 입력된 값이 Fetch에서 이 함수로 온다.

코드를 보면 우선 setApiKey로 sendgrid와 연결을 했다. 다음은 메일을 보내는 함수로, req로 받은 값을 구조분해 한 후 mail의 형태를 갖춘 객체를 만든다. 그리고 이 객체를 send하면 된다.

그러면 sendgrid에서 이 객체로 메일을 보낸다.

정리하기

열심히 했다고 생각했는데 안되는 날이 있으니까 힘들다. 다른 거 같은 경우에도 열심히 해서 성공하고 잠이 들어서 괜찮았지만, 오늘은 찜찜한 상태에서 잠에 들게 되었다.

이 문제에 대해서는 나중에 해결을 해보아야겠다. 결국에는 BackEnd 부분이기 때문에 나중에 Node.js를 사용해서 해결할 수도 있는 문제지만, 이번에는 Firebase를 더 잘 사용해보고 싶었다. 조금은 아쉽다. 그래도 시간이 충분하지 않으니 다른 부분에 더 신경을 써보자.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프