AstroPaper 3.0

AstroPaper v3 출시를 기쁘게 알려드립니다. 새로운 기능, 개선 사항, 버그 수정이 가득 담겨 있어 웹 개발 경험을 한 단계 높여줄 것입니다. 이번 릴리스의 주요 내용을 살펴보겠습니다.

AstroPaper v3

기능 및 변경 사항

Astro v3 통합

AstroPaper는 이제 Astro v3를 완전히 지원하여 향상된 성능과 렌더링 속도를 제공합니다.

또한 Astro의 ViewTransitions API를 지원하여 뷰 간에 매력적이고 동적인 전환 효과를 만들 수 있습니다.

“최근 글” 섹션에서는 중복을 방지하고 ViewTransitions API를 더 잘 지원하기 위해 featured가 아닌 글만 표시됩니다.

OG 이미지 생성 로직 업데이트

OG 이미지 예시

자동 OG 이미지 생성 로직을 업데이트하여 더욱 안정적이고 효율적으로 만들었습니다. 또한 글 제목의 특수 문자도 지원하여 정확하고 유연하며 눈길을 끄는 소셜 미디어 미리보기를 보장합니다.

SITE.ogImage는 이제 선택 사항입니다. 지정하지 않으면 AstroPaper가 SITE.title, SITE.desc, SITE.website를 사용하여 자동으로 OG 이미지를 생성합니다.

Theme meta 태그

테마 전환에 동적으로 적응하는 theme-color meta 태그가 추가되어 매끄러운 사용자 경험을 보장합니다.

상단의 차이점을 확인하세요

AstroPaper v2 테마 전환

AstroPaper v3 테마 전환

기타 변경 사항

Astro Prettier 플러그인

프로젝트를 깔끔하고 체계적으로 유지하기 위해 Astro Prettier 플러그인이 기본 설치되어 있습니다.

경미한 스타일 변경

한 줄 코드 블록의 줄바꿈 문제가 해결되어 코드 스니펫이 깔끔하게 표시됩니다.

더 많은 네비게이션 링크를 추가할 수 있도록 nav 스타일 CSS가 업데이트되었습니다.

AstroPaper v3로 업그레이드

이 섹션은 이전 버전에서 AstroPaper v3로 업그레이드하려는 분들을 위한 내용입니다.

이 섹션은 AstroPaper v2에서 AstroPaper v3로 마이그레이션하는 것을 도와줍니다.

나머지 섹션을 읽기 전에 의존성 업그레이드와 AstroPaper 업데이트에 대한 이 글도 참고하시기 바랍니다.

옵션 1: 새로 시작하기 (권장)

이번 릴리스에서는 이전 Astro API를 새로운 API로 교체하고, 버그 수정, 새로운 기능 등 많은 변경이 있었습니다. 따라서 커스터마이징을 많이 하지 않은 분이라면 이 방법을 따르는 것을 권장합니다.

1단계: 수정된 파일 모두 보관하기

이미 수정한 파일들을 모두 보관하는 것이 중요합니다. 해당 파일에는 다음이 포함됩니다.

/src/config.ts (v3에서 변경 없음)
/src/styles/base.css (v3에서 약간의 변경; 아래 참조)
/src/assets/ (v3에서 변경 없음)
/public/assets/ (v3에서 변경 없음)
/content/blog/ (블로그 콘텐츠 디렉터리)
기타 커스터마이징한 내용들.

/* file: /src/styles/base.css */
@layer base {
  /* 기타 코드 */
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-skin-card-muted;
  }

  /* 이전 코드
  code {
    white-space: pre;
    overflow: scroll;
  }
  */

  /* 새 코드 */
  code,
  blockquote {
    word-wrap: break-word;
  }
  pre > code {
    white-space: pre;
  }
}

@layer components {
  /* 기타 코드 */
}

2단계: 나머지를 AstroPaper v3로 교체하기

이 단계에서는 위의 파일/디렉터리(및 커스터마이징한 파일/디렉터리)를 제외한 모든 것을 AstroPaper v3로 교체합니다.

3단계: 스키마 업데이트

/src/content/_schemas.ts가 /src/content/config.ts로 대체되었다는 점을 기억하세요.

또한 /src/content/config.ts에서 더 이상 BlogFrontmatter 타입이 내보내지지 않습니다.

따라서 파일 내의 모든 BlogFrontmatter 타입을 CollectionEntry<"blog">["data"]로 업데이트해야 합니다.

예시: src/components/Card.tsx

// AstroPaper v2
import type { BlogFrontmatter } from "@content/_schemas";

export interface Props {
  href?: string;
  frontmatter: BlogFrontmatter;
  secHeading?: boolean;
}

// AstroPaper v3
import type { CollectionEntry } from "astro:content";

export interface Props {
  href?: string;
  frontmatter: CollectionEntry<"blog">["data"];
  secHeading?: boolean;
}

옵션 2: Git을 사용한 업그레이드

이 방법은 대부분의 사용자에게 권장되지 않습니다. 가능하다면 “옵션 1”을 따르세요. merge 충돌을 해결하는 방법을 알고 있고 본인이 무엇을 하고 있는지 이해하는 경우에만 이 방법을 사용하세요.

사실 이 경우에 대한 블로그 글을 이미 작성해 두었으며, 여기에서 확인할 수 있습니다.

마무리

AstroPaper v3의 흥미로운 새 기능과 개선 사항을 살펴볼 준비가 되셨나요? 지금 바로 AstroPaper를 사용해 보세요.

기타 버그 수정 및 통합 업데이트에 대해서는 릴리스 노트를 확인하세요.

업그레이드 과정에서 버그를 발견하거나 어려움을 겪으시면 GitHub에서 이슈를 열거나 토론을 시작해 주세요.

목차