Astro.js 찍먹 후기 (장점, 단점, 결론)

https://astro.build/

Astro

 

썸네일용

 

 

Astro.js 는 SSG (Static Site Generator) Framework로 근래 대중화된 React.js Vue.js Svelte.js 등을 함께 사용할 수 있는 특이한 프레임워크 입니다.

 

가장 큰 특징은 함께 사용할 수 있으며, SSR서버로도 이용은 가능합니다.

또 강력한 점은, React, Next, Vue, Next, Svelte, Sveltekit을 사용할 때 사용되지 않는 프레임워크 자체의 JS까지 Tree Shaking 해준다고 합니다.

 

Framework의 Tree Shaking 과정을 통해서 그냥 Sveltekit 같은걸 사용할 때 보다 더욱 빠른 렌더링이 가능해지고, 

SSG인 만큼 사이트 로드 속도는 굉장히 뛰어나지만, Particial Hydrate (부분 동적 렌더링) 측면에서도 더 높은 성능을 가진다고 합니다.

 

 

장점

• style로 전달하는 변수
  Svelte는 --width; 24px; 이런 느낌으로 사용한다면 일반 HTML 태그로 전달할 때에는 귀찮게 style 태그에 동적으로 만들어주어야 하는 불편함이 있었습니다.
  Astro 파일에서는 <style define:vars={{size, color}}> 이와 같이 JS 변수 전달이 가능하기 때문에 손이 좀 덜갑니다.
• 동적 page에서의 params 미리 선언
  (양날의 검인 듯 합니다. 명확해져서 좋긴한데, DB 안끼고 만드는 서비스는 뭐가 올지 몰라서...
  
  [slug].astro 라는 파일이 있으면 반드시 getStaticPaths()로 어떤 params를 던져줄지 모든 경우의수를 생성해줘야 합니다. 안 그러면 404 Not Found.를 만나볼 수 있습니다.
  SSR 적용하는 방법도 있는데 그건 안해봐서... 사실 그렇게 되면 SSG 메리트를 버리는 꼴이라 굳이 그렇게 쓸빠엔 쌩 바닐라로 더 빠른 언어에 안착시키는게 정신건강에 좋습니다. 어차피 사용자는 SPA든 SSR이든 SSG든 신경안써요.)
  
  
• Markdown
  기본적으로 Markdown을 사용할 수 있게 해줘서 좋긴한데 저는 사용 안했습니다.
• 신박한 스크립트 구분
  아마 다른 React, Svelte, Vue 와 같이 사용하기 위해 구분한듯 한데, --- Markdown 처럼 구분해서 스크립트를 작성합니다.  (이걸 장점이라고 할 수 있을지 모르겠어요...)
• HTML 작성
  Astro 파일 자체 작성 방식은 Vue, Svelte와 가까운데, 정작 HTML 코드에서 루프를 돌린다거나 하는 행위는 React에 좀 더 가깝습니다.

 

프레임워크 특징말고는 아무리 쥐어짜봐도 장점이 없습니다.

 

 

 

단점

• 부족한 자료 및 내용 문서
• .astro 확장자는 vscode 플러그인은 존재하지만, 2022.06.24 오늘 기준까지도 WebStorm plugin은 없습니다.
  (별도의 정식 업로드 되지 않은 파일로 Syntax Highlight가 가능하다고 하지만, 사용해본결과 그냥 쓰레기입니다.)
• Astro에서 작성된 컴포넌트는 React, Vue, Svelte 파일에서 호출할 수 없습니다.
  (반대로 React, Vue, Svelte에서 작성한 컴포넌트는 Astro에서 사용 가능합니다.)
• Event가 없습니다.
  (왜 안만들었는지 왜 없는지도 모르겠네요... onclick 조차 안됩니다.)
  (그럼 어떻게 사용하나요? <script is:inline> 에서 vanilla js로 Element 접근해서 사용...tq)
• Emit, dispatch 기능이 없습니다.
  (Props 는 있는데, 상위 컴포넌트로 전달이 불가능합니다.)
• Store(Vuex, Redux 등)가 없습니다.
  (상위 컴포넌트 전달도 안되서 스토어 쓸까? 하실까봐 미리 말씀드립니다.)
• global.scss 스타일 수정 시 재 실행 해야만 적용
  (컴포넌트 내 작성된 스타일은 문제 없지만, 이상하게 import 해서 불러온 스타일의 경우는 재실행시에만 적용되었습니다.)

 

사실 완전 Static 하게 사용하고 굳이 이벤트가 필요하다면 Vanilla JS로 처리해도 문제가 없다고 생각하신다면 Astro.js 만 사용해서 코드를 작성해도 큰 무리는 없었습니다.

 

 

 

 

결론

굳이 쓴다면, Astro로 코드를 작성하지 않고, 자신의 주력 프레임워크/라이브러리로 작성하고 빌드만 Astro를 이용하는 것을 권장드립니다.

저 처럼 진짜 딱 SSG에 이벤트도 별로 없는 저 수준의 웹앱을 만드는 경우가 아니라면 단점이 너무 명확해서 이걸 써야하나 싶긴합니다.

 

 

또... 한글 자료가 필수이신 유저 분들에게는 사실상 콘텐츠가 없는 수준이기 때문에 본문을 보고 잘 판단해주세요.

아니면 제 삽질을 이어서 누군가가 이어달리기를 해주시면 더 발전을 하지 않을까도 조심스럽게 말하는 것 같지만서도 아닌게 아닌걸 알지만 또 다시 언급한다는 내용을 윤허해주세요.