Day 77: React Hydration 및 AWS SES Identities 수정

Source: Dev.to

React 아바타 플래시

클래식한 데이터 하이드레이션 문제가 있었습니다. 사용자가 로그인하면 React가 기본 아바타를 동기적으로 렌더링하고, DynamoDB가 실제 프로필 사진 URL을 반환할 때까지 약 200 ms를 기다렸다가 새로운 이미지를 강제로 교체했습니다.

수정: 로딩 상태일 때 플레이스홀더를 렌더링하지 않도록 합니다. 이제 컴포넌트는 !isAvatarLoading일 때 아바타 공간을 깨끗한 흰 원으로 남겨 둡니다. localStorage 캐싱과 결합하면 기존 사용자는 즉시 로드되고, 신규 사용자는 레이아웃 이동 없이 깔끔한 경험을 얻습니다.

// Example React avatar component
import React, { useEffect, useState } from 'react';

function Avatar({ userId }) {
  const [avatarUrl, setAvatarUrl] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const cached = localStorage.getItem(`avatar-${userId}`);
    if (cached) {
      setAvatarUrl(cached);
      setIsLoading(false);
      return;
    }

    fetch(`/api/users/${userId}/profile`)
      .then(res => res.json())
      .then(data => {
        setAvatarUrl(data.avatarUrl);
        localStorage.setItem(`avatar-${userId}`, data.avatarUrl);
      })
      .finally(() => setIsLoading(false));
  }, [userId]);

  return (
    {isLoading ? (
      // placeholder (e.g., empty circle)
    ) : (
      // render <img src={avatarUrl} alt="User avatar" />
    )}
  );
}

AWS SES의 로봇 이메일

내 Python Lambda가 SES를 사용해 일일 보고서를 전송하고 있었습니다:

Source = "ai@duromoney.com"

기술적으로는 맞지만, 받은 편지함에서 이메일이 신뢰성을 떨어뜨리는 듯 보였습니다.

수정: Source 필드에 친근한 발신자 이름을 포함합니다:

Source = "DuroAI <ai@duromoney.com>"

Gmail과 Outlook에서 이제 발신자 이름으로 “DuroAI”가 표시됩니다. 또한 이 기회를 이용해 이벤트‑드리븐 환영 이메일을 연결했습니다. 사용자의 프로필이 DynamoDB에 처음 저장될 때, Lambda 라우터가 페이로드를 가로채고 맞춤형 SES 환영 템플릿을 트리거합니다.

import boto3

ses = boto3.client('ses')

def send_welcome_email(user_email, user_name):
    response = ses.send_email(
        Source="DuroAI <ai@duromoney.com>",
        Destination={'ToAddresses': [user_email]},
        Message={
            'Subject': {'Data': f'Welcome, {user_name}!'},
            'Body': {
                'Html': {'Data': f'''
## Hello {user_name}

Welcome to DuroAI.
''' }
            }
        },
        ReplyToAddresses=['support@duromoney.com']
    )
    return response

그 결과는 더 신뢰할 수 있는 외관과 부드러운 온보딩 경험을 제공합니다.