Astro 블로그 업그레이드 v2 → v3

Astro를 사용한 기술 블로그 만들기에서는 Astro v2 를 기반으로 블로그를 만들어 보았습니다. 이 블로그를 Astro v3 로 업그레이드 해보겠습니다.

여기서는 기존 블로그 만들기 문서를 기준으로 변경할 부분만 설명하며, 그 외의 추가된 기능이 있다면 Upgrade to Astro v3 문서를 추가로 참조하는 것이 좋습니다.

1. Astro 업그레이드

현재 사용중인 astrojs 관련 디펜던시들을 모두 최신 버전으로 업그레이드합니다.

$ pnpm up astro solid-js "@astrojs/*" --latest

2. node.js 최소 버전 설정

Astro v3 에서 필요로 하는 node.js 최소 버전은 18.14.1 입니다.

할 일

package.json 파일에서 최소 버전을 설정합니다.

{
  "engines": {
    "node": ">= 18.14.1"
  },
}

3. 디폴트 포트 변경

Astro v3 에서는 디폴트 리스닝 포트가 3000 -> 4321 로 변경되었습니다.

할 일

astro.config.mjs 파일에서 사용중인 포트 설정을 변경합니다.

export default defineConfig({
  site: import.meta.env.DEV
    ? "http://localhost:4321"
    : "https://blog.lechuck.dev",
  // ...
});

그 외에도 테스트나 README 문서에서 사용 중이라면 포트를 변경해야 합니다.

4. HTTP 메서드 이름 변경

Astro v2 에서는 HTTP Request method 는 모두 소문자를 사용했습니다: get, post, put, all, del.

Astro v3 에서는 모두 대문자로 변경되었으며, del 은 DELETE 로 변경되었습니다.

• get → GET
• post → POST
• put → PUT
• all → ALL
• del → DELETE

할 일

src/pages/rss.xml.js 파일을 열고 함수 이름을 변경합니다.

// get → GET
export async function GET(context) {
  // ...
}

5. 멀티 JSX 프레임워크 설정

Astro v2 에서 multiple JSX framework integration을 사용해 React, Solid, Preact 를 같은 프로젝트에서 동시에 사용할 수 있었습니다.

Astro v3 에서는 여러 개의 JSX 프레임워크를 사용하는 경우, include, exclude 설정을 사용해 각 파일이 어느 JSX 프레임워크를 사용하는지 설정해야 합니다.

기존에 만들었던 블로그는 Solid 만 사용하고 있었지만, React와 같은 다른 프레임워크도 같이 사용하고 있었다면 프레임워크 종류별로 컴포넌트를 구분하는 것을 추천합니다.

할 일

astro.config.mjs 파일을 열고 solidJs 항목에 include 설정을 추가합니다.

export default defineConfig({
  integrations: [
    // ...
    solidJs({
      include: ['**/solid/*'],
    }),
  ],
  // ...
});

이전에도 src/components/solid/ 디렉토리 아래에 Solid 컴포넌트가 위치하고 있었기 때문에, 기존 컴포넌트의 위치는 변경할 필요가 없습니다.