AstroJS는 신속한 정적 웹 플랫폼 구축을 목적으로 사용되는 탁월한 JavaScript 기반 도구입니다. React, Vue, Svelte와 같은 여러 자바스크립트 프레임워크를 활용할 수 있어 전례 없는 속도로 사이트를 개발할 수 있습니다. 최신 버전인 Astro 2.5에는 다양한 기능이 추가되었으며, 그 중 몇 가지 기능은 아래에 강조 표시되어 있습니다.
데이터 컬렉션
최신 버전의 Astro 2.5에서는 새로 도입된 ‘컬렉션’ 유형의 ‘데이터’ 속성을 활용하여 컬렉션 내에 JSON 및 YAML 문서를 저장할 수 있는 기능이 도입되었습니다. 예를 들어, ‘src/content’ 디렉터리 내에 ‘writers’ 데이터 컬렉션을 설정하고, 여기에 JSON 또는 YAML 파일을 추가하여 이 기능을 보여줄 수 있습니다.
수집 유형을 데이터로 할당하면서 astro:content 모듈의 DefineCollection 및 z 유틸리티를 사용하면 소스 파일(src/content/config.ts)에서 컬렉션을 구성하는 프로세스가 쉬워집니다.
import { z, defineCollection } from "astro:content";
const writers = defineCollection({
type: "data",
schema: z.object({ name: z.string() }),
});
궁극적으로 컬렉션의 존재를 공식적으로 기록하고 인정받기 위해서는 관련 레지스트리에서 컬렉션 개체를 내보내야 합니다.
export const collections = {writers:writers}
HTML 축소
Astro의 최신 버전인 2.5에서는 “compressHTML”이라는 새로운 기능이 도입되었습니다. 이 기능은 HTML 문서 내에서 공백과 줄 바꿈의 모든 인스턴스를 제거하여 구성 요소를 Astro 컴파일러에서만 압축한 다음 빌드 프로세스 중에 추가로 압축할 수 있도록 합니다. 이 최적화의 목적은 전체 시스템 성능에 미칠 수 있는 잠재적 영향을 최소화하는 것입니다.
HTML 축소를 사용하도록 프로젝트의 구성 파일을 수정하려면 간단한 프로세스가 필요합니다. 파일에 필요한 코드를 추가하여 지정된 컴포넌트 작성 요구 사항에 해당하는지 확인하고 .astro 파일 형식에 맞게 작성하세요. HTML 축소는 이 특정 파일 형식을 사용하여 생성된 컴포넌트에 대해서만 작동한다는 점에 유의하세요.
export default defineConfig({compressHTML:true})
병렬 렌더링
컴포넌트를 병렬로 렌더링하는 기능의 도입은 Astro 프레임워크 내에서 많은 기대를 모아왔습니다. Astro 2.5에서 이 기능이 구현됨에 따라 별도의 브랜치에 있는 하위 컴포넌트가 동시에 정보를 검색하여 데이터를 검색하는 데 필요한 시간이 크게 단축되었습니다.
이 기능의 구현으로 상위 수준의 상위 컴포넌트가 수행하는 비동기 데이터 검색 작업에 방해받지 않고 계층 구조 내 더 깊은 곳에 위치한 컴포넌트를 표시할 수 있습니다.그러나 현재 배열 조각에 대해 병렬 렌더링과 함께 맵 메서드를 사용하는 데 문제가 있습니다.
최신 버전의 Astro 2.5에는 몇 가지 최첨단 실험 기능이 도입되었으며, 이에 대해서는 나중에 자세히 설명하겠습니다.
하이브리드 렌더링
Astro 2.5 구성 파일을 사용하면 사용자 지정 서버 출력을 지정할 수 있으며, 이를 통해 서버 측 렌더링(SSR)의 표준 사전 렌더링 동작을 재정의할 수 있습니다.
하이브리드 렌더링을 활용하려면 구성 설정의 실험적 부분에서 hybridOutput을 true로 설정하여 활성화하고 적합한 어댑터를 추가로 통합하세요.
기본적으로 이 작업을 실행하면 웹사이트의 모든 페이지가 렌더링됩니다. 그러나 프리렌더 내보내기 속성 값을 false로 설정하여 개별 경로 또는 페이지에 대해 이 동작을 비활성화할 수 있습니다.
export const prerender = false;
사용자 정의 클라이언트 지시문
최신 버전의 Astro, 특히 버전 2.5에는 사용자가 맞춤형 `client:` 지시문을 활용하여 사용자 정의 클라이언트 측 구성 요소의 하이드레이션을 정밀하게 제어할 수 있는 `addClientDirective` API라는 새로운 기능이 도입되었습니다.
컴포넌트 렌더링 프로세스를 방해하지 않도록 지시문의 진입점 수를 최소한으로 유지하면서 구성 파일에 지정된 대로 실험적인 사용자 정의 클라이언트 지시문을 활성화하십시오.
원하는 기능을 원활하게 구현하려면 클라이언트 지시문 파일에서 `ClientDirective` 유형의 함수를 내보내는 것이 중요합니다. 예를 들어, 후속 코드는 브라우저의 창 객체에 대한 초기 클릭 이벤트 시 컴포넌트의 초기화를 효과적으로 트리거합니다.
import { ClientDirective } from "astro";
const clickDirective: ClientDirective = (load, opts, el) => {
window.addEventListener(
"click",
async () => {
const hydrate = await load();
await hydrate();
},
{ once: true }
);
};
export default clickDirective;
이제 컴포넌트 프레임워크 내에서 ‘client:click’ 이벤트가 완전히 지원되어 모든 사용자에게 완전한 타이핑 기능을 제공합니다.
아스트로 설치 방법
아스트로 플랫폼은 사용자가 서비스를 이용할 수 있도록 ‘아스트로 만들기’라고 불리는 명령줄 인터페이스(CLI)를 제공합니다. 이 기능에 액세스하려면 컴퓨팅 장치에 NodeJS 버전 16 이상과 npm이 설치되어 있어야 합니다.
npm create astro@latest
앞서 언급한 지시문은 Astro 조직의 새로운 사업을 위한 절묘한 기반이 될 것입니다. 디스플레이에 표시되는 지시사항에 유의하시고, 확실하지 않은 경우 세심하게 선택하시기 바랍니다.그런 다음 현재 디렉토리를 변경하여 할당된 프로젝트의 리포지토리로 이동한 다음 다음 명령을 실행합니다:
npm run dev
React와 같은 프레임워크의 설치는 astro add를 사용하여 용이하게 할 수 있습니다. 컴퓨터에서 localhost:3000에 접속하면 “Welcome to Astro”라는 메시지가 표시되면 제대로 설치되었는지 확인할 수 있습니다.
또는 NPM에 불만이 있는 경우 Yarn 또는 PNPM과 같은 대체 JavaScript 패키지 관리자를 사용할 수 있습니다.
Astro로 개발자 경험 향상
Astro와 같은 포괄적 인 프레임 워크를 활용하면 빠른 웹 사이트를 만드는 과정이 가능한 한 쉬워집니다. 특정 사용자 인터페이스에 대한 선호도가 없기 때문에 선호하는 JavaScript 프레임 워크와 아무런 어려움없이 공동 작업 할 수 있습니다.