[TIL] 프론트엔드 이메일 인증 / 쿼리문 email 인코딩, 엔코드

문제: 이메일 인증을 하면 Query문으로 이메일을 확인해야된다. 하지만 url을 살펴보면 이메일은 인코딩 돼서 그대로 가져오면 이메일 확인을 할 수 없다.

해결 시도: 처음에는 수동으로 인코딩된 이메일을 가져오면 잘 되지만, 이메일 만을 작성할 때 가져오지 못 함.

해결 방법: 검색해보니 이런 메서드가 있었음.

encodeURIComponent(email
인코딩 된 email을 엔코드 해주는 메서드같음.

또한

문제: Query문을 가져와야 이메일을 확인할 수 있는데가져올 수 있는 방법을 몰랐음..

해결 시도: 백엔드에서는 해봐서 알았지만, 프론트에서는 몰랐음.

해결 방법: 이것 또한 메서드가 있는 거 같다.

// 프론트엔드
  const queryParams = new URLSearchParams(window.location.search);
  const email = queryParams.get("email");

  const encodedEmail = encodeURIComponent(email);
  
      const response = await axiosInstance.get(`/api/user/email-verify-signin?email=${encodedEmail}`);
    console.log(response);
    
// 백엔드
      const mailOptions = {
        to: email,
        subject: "[happymoney] 회원가입 이메일 인증 메일입니다.",
        html: `인증링크 : <a href="http://localhost:3000/views/signin-email-verify.html?email=${encodeURIComponent(email)}">인증하기</a>`
      };

이렇게 백엔드서 엔코드 된 이메일을 보내고 프론트엔드에서 Query문을 가져와 가능할 수 있었다.