Astro 소개
Astro 란?
who: Alex
Astro 소개를 왜?
이전에 Astro가 나온 초창기 0.* 버전일 때 github trends 에서 보고 잠깐 사용했었다.
프로젝트에 사용하기에 1 버전도 아니고 레퍼런스도 많지 않아 공부 삼아 기본적인 사용방법만 익히고 그만뒀었는데 어느 새 2버전을 넘어 계속 업데이트 되고 있다.
다시 Astro를 보게 된 계기는 ChatGPT 때문이다.
ChatGPT에 올해 가장 공부해 보면 좋았을 만한 tech stack이 무엇인지 물어보니 20개 리스트 중 Astro가 있었다.
그래서 다시 간단히 사용법을 익혀 보며 소개하려 한다.
특징
맨 위에 Astro 홈페이지에서 보이듯이 HTML을 이용해 JS를 최소화해 최적화를 이루는데 Nextjs 보다 JS Page load 시 다운 받을 용량이 10배가 넘게 줄어든다.
Astro는 아주 빠른 빌드 속도를 가진 웹 프레임워크이고, 다른 Next.js, SvelteKit, Nuxt, Remix 등과는 다르게 CSR(Client Side Rendering) 보다 SSR(Server Side Rendering)을 최대한 활용하는 방식으로 MPA(Multi Page Application) 방식을 가집니다.
Astro는 JS를 서버 언어 및 런타임으로 사용해 기존 MPA인 Ruby, PHP 등과는 달리 서버, 클라이언트 모두 JS로 작성할 수 있고 JS, HTML, CSS만을 사용해 서버, 클라이언트 모두 구성할 수 있다는 특징이 있다.
-
MPA vs SPA
- MPA는 여러 HTML페이지로 구성된 웹 싸이트로서 새 페이지로 이동할 때 브라우저는 서버에서 새 HTML 페이지를 요청합니다. SPA는 사용자의 브라우저에 로드된 다음 HTML을 로컬에서 렌더링하는 방식입니다. 물론 서버에서 HTML을 생성할 수도 있지만 보통 새 페이지로 이동할 때 렌더링을 위해 브라우저에서 JS를 실행해 렌더링합니다.
- MPA는 대부분 페이지가 서버에서 렌더링 되고 SPA는 브라우저에서 JS를 실행해 로컬에서 렌더링 되는데 이는 사이트 동작 및 성능에 큰 영향이 간다. SPA가 실행되기 위해서는 로컬 브라우저에서 전체 JS를 다운로드하고 구문을 분석해 실행해야 하기 때문에 많은 대기 시간이 필요하다.
- MPA에서 페이지 라우팅은 서버에서 HTML을 결정해 보여줍니다. SPA에서 페이지 라우팅은 브라우저에서 로컬로 실행되며 서버에서 요청하지 않고 새 페이지를 렌더링하기 위해 탐색하여 보여줍니다. 이런 이유로 SPA는 한번에 다운받아서 첫 페이지 렌더가 늦지만 두번째, 세번째 페이지 렌더가 빠릅니다. 하지만 MPA도 SPA를 모방해 보완해주는 Turbo 와 같은 도구를 활용합니다.
둘 중 더 나은 선택은 없고 Astro의 특징은 콘텐츠 중심의 웹 싸이트에 적합하도록 개발되었기 떄문에 MPA의 성능과 단순성을 우선시 해 만들어 졌습니다.
Astro를 이용하면 Nextjs와 비교할 때 JS가 94% 감소하고 34% 빠르게 로드되며 네트워크 사용량이 65% 감소하고 Remix, SvelteKit과 비교해 LightHouse 점수가 훨씬 낫고 Qwik 보다 TTI가 43%나 빠른 장점이 있다.
Getting Started
- 사전 준비사항
- Nodejs >= v16.12.0 을 설치한다!
- VSCode 를 설치하고 Extension에 들어가 Astro 공식 extension을 설치한다.
위의 그림과 같이 터미널에서 node가 설치되어 있다면 몇 가지 옵션만 선택하면 CRA(Create React App)처럼 프로젝트 디렉토리 바로 생성된다.
그런 뒤 npm run dev를 치면 바로 Astro 웹 페이지가 아래와 같이 열립니다.
여기까지가 Astro 에서의 Hello World! 라고 할 수 있다!
하지만 요새는 미리 셋팅 다 되어 있는 템플릿들이 많은 만큼 템플릿으로 시작하는 것도 방법
아래와 같이 템플릿을 선택해 시작해 본다.
# create a new project with an official example
npm create astro@latest -- --template <example-name>
# create a new project based on a GitHub repository’s main branch
npm create astro@latest -- --template <github-username>/<github-repo>
Astro Ecommerce 템플릿 탐색
공식 홈페이지에서 소개하는 템플릿 중 무료 템플릿으로 astro ecommerce 템플릿이 있다.
이 템플릿은 Creative Tim 이라는 UI/UX 템플릿을 판매하는 팀에서 만든 템플릿이고 Reace와 Sass를 활용해 만든 템플릿이므로 react 와 css 를 사용할 줄 알면 바로 사용할 수 있을 걸로 보였다.
무엇보다 다른 템플릿들과 달리 Astro Docs에서 설명하는 프로젝트 구조 거의 그대로 구성된 것 같아 이걸로 선정했다.