7주차 - resend, drizzle webSocket

resend

email을 보내기 위해 사용한 라이브러리

• 가입하고 API KEY 받은 후 .env.local파일에 넣어 사용했다.
• 문서가 깔끔하고, 예제가 잘 되어있어서 편했다.(참고)

---

// EmailTemplate.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
  </div>
);

const { data, error } = await resend.emails.send({
  from: 'Acme <onboarding@resend.dev>',
  to: ['delivered@resend.dev'],
  subject: 'Hello world',
  react: EmailTemplate({ firstName: 'John' }),
  // 또는 html로
  html: `<p>Click to <a href='${confirmLink}'>confirm your email</a></p>`,
});

• 강의에서는 간단하게 HTML 코드를 넣었는데, 템플릿을 따로 빼서 작성해도 된다.

drizzle

지금까지의 강의에서는 데이터베이스 접근시 http를 사용했지만,

//HTTP
import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';

const sql = neon(process.env.DRIZZLE_DATABASE_URL!);
const db = drizzle(sql);

트랜잭션이 필요한 비밀번호 재설정 메일에서 사이트로 접근 -> 비번 설정시 오류가 있었고, 이 때는 web socket 버전을 사용해야했다.

//WEB SOCKET

import { Pool } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-serverless';

const pool = new Pool({ connectionString: env.DATABASE_URL });
const db = drizzle(pool)

문서에도 나와있지만, 단방향, 비상호연결의 트랜잭션에서 HTTP를 사용하는건 속도 측면에서 빠르나, 새션이나 상호연결된 트랙잭션이 필요한 경우 WebSocket을 사용하라고 되어있다.

사용자가 비밀번호를 재설정하는 코드 일부분이다.
비번 재설정 메일을 전송 -> 전송받은 메일에서 링크를 타면 비번 재설정 화면이 나오는데, 이때 비번을 재설정한다. 이 과정에서 입력한 새 비밀번호를 데이터베이스에 저장하고, 사용된 비밀번호 재설정 토큰을 삭제한다.

drizzle 문서 참고

AuthError

import { AuthError } from "next-auth";

if (error instanceof AuthError) {
  switch (error.type) {
    case "AccessDenied":
    	return { error: error.message };
    case "OAuthSignInError":
        return { error: error.message };
    default:
        return { error: "Something went wrong" };
   }
}

AuthError의 타입이 생각보다 많았다. 이후에 문서에서 찾아보고, 더 세분화시키면 좋을것 같다는 생각이 들었다.

422 에러

• HTTP Status Code 중 422 에러는 클라이언트가 서버에 보낸 요청이 서버에서 처리될 수 있지만, 내용에 문제가 있어 처리가 불가할 때 나는 에러이다. 클라이언트가 보낸 요청 데이터가 특정 형식, 규칙을 만족하지 못했을 때 발생한다. (ex. 요청 데이터가 유효성 검사를 통과하지 못한 경우)

export const sendVerificationsEmail = async (email: string, token: string) => {
  const confirmLink = `${domain}/auth/new-verification?token=${token}`;

  const { data, error } = await resend.emails.send({
    from: "onboarding@resend.dev",
    to: email,
    subject: "Sprout and Scribble - Confirmation Email",
    html: `<p>Click to <a href='${confirmLink}'>confirm your email</a></p>`,
  });

  if (error) return console.log(error);
  if (data) return data;
};

• 실습에서는 sendVerificationsEmail 에서 파라미터가 email, token 이 순서로 들어가야하는데 token, email 이렇게 들어가서 난 에러였다