이번 주에 알게 된 것들

1. Presigned URL의 만료 메커니즘

최근 이미지 프리로딩 기능을 구현하면서 403 Forbidden 에러를 만났다. S3에서 발급받은 Presigned URL로 이미지를 미리 프리로드해 두었는데, 화면에서 실제로 표시하려는 시점에 URL이 만료되어 있었던 것이다. Presigned URL은 보통 다음 두 가지 방식 중 하나로 만료 시각 정보를 담고 있었고, 이 정보를 이용해 URL의 만료 시각을 계산하는 간단한 함수를 만들었다.

• Azure: se 파라미터에 만료 시각이 직접 명시
• AWS / GCP: 발급 시각과 유효기간의 합으로 계산

function getExpiryFromPresignedUrl(urlStr: string): number | undefined {
  const url = new URL(urlStr);

  // Azure: 만료 시각이 직접 명시됨
  const se = url.searchParams.get('se');
  if (se) {
    return new Date(se).getTime();
  }

  // AWS/GCP: 발급 시각 + 유효기간으로 계산
  const date = url.searchParams.get('X-Amz-Date') || url.searchParams.get('X-Goog-Date');
  const expires = url.searchParams.get('X-Amz-Expires') || url.searchParams.get('X-Goog-Expires');

  if (date && expires) {
    const issuedAt = parseAmzDate(date);
    return issuedAt + Number(expires) * 1000;
  }

  return undefined;
}

function parseAmzDate(dateStr: string): number {
  // Format: 20251025T143000Z
  const year = dateStr.slice(0, 4);
  const month = dateStr.slice(4, 6);
  const day = dateStr.slice(6, 8);
  const hour = dateStr.slice(9, 11);
  const minute = dateStr.slice(11, 13);
  const second = dateStr.slice(13, 15);

  return Date.UTC(
    parseInt(year), 
    parseInt(month) - 1,
    parseInt(day),
    parseInt(hour),
    parseInt(minute),
    parseInt(second)
  );
}

이렇게 계산된 만료 시각을 기반으로, 만료가 임박한 URL은 미리 재요청하도록 해서 403 에러를 해결할 수 있었다.

2. @starting-style

@starting-style은 애니메이션이 시작될 때 초기 상태를 명시적으로 지정하는 규칙이다. 기존에는 트랜지션이 시작되기 전 상태를 브라우저가 추론하기 때문에 초기 렌더 시 깜빡임이 생기는 경우가 있었는데, 해당 부분을 제어할 수 있다.

.dialog {
  transition: opacity 0.3s;
  opacity: 1;
}

@starting-style {
  .dialog {
    opacity: 0;
  }
}