Jason Miller의 블로그 글(영어)를 참고하세요.
이런 Partial Hydration을 Astro에선 Islands 라는 이름으로 소개하고 있고, 이 아일랜드의 장점 때문에 Astro에서는 각 컴포넌트에 서로 다른 UI 프레임워크(React, Vue, Svelte, SolidJS 등등…)를 사용할 수 있습니다.
이 장점은 제게 아주 크게 다가왔는데, 다양한 스택(특히 실험적인…)을 많이 사용하는 제 개발 이력의 특성상 각 프레임워크의 장점만을 사용하는 시나리오는 매력적으로 보였고, 앞으로 블로그에서 스케치라는 이름으로 여러가지 장난감들을 만들어 볼 생각이라 그 과정에서 웹사이트의 기반을 그대로 유지할 수 있기 때문에 마다할 이유가 없었습니다.
게다가 Astro는 결국 Content-driven
프레임워크이기 때문에 블로그 등 컨텐츠를 serving하는 기능이 강력해서 신경을 쓸 것이 많이 없었습니다. 기본 튜토리얼부터가 블로그를 만드는 가이드이기도 했고, 마크다운이나 MDX를 코드 한두줄로 웹 페이지에 표시할 수 있다는 것도 굉장히 좋았습니다.
이렇게 여러 장점을 확인하니 제 요구사항에 맞는 프레임워크라는 생각이 들었고, 생태계가 (비교적)작은 프레임워크를 많이 써본 입장으로썬 멀티 프레임워크가 가능하다는 점도 실험적인 스택에 기존 대형 프레임워크의 큰 생태계까지 가져갈 수 있다는 점을 높게 평가해 제 블로그에 바로 사용해 보기로 마음 먹었습니다.
Astro 위에 올라갈 프레임워크로는 SolidJS를 선택했습니다. 아무래도 Astro의 기본 템플릿 엔진만으로는 반응성이 필요한 컴포넌트를 만들기 조금 힘들 것이라고 생각했고(충분한 기능을 제공하지만 생태계도 부족하니까요) 어떤 프레임워크를 도입할까 고민하다 React와 비슷하지만 런타임이 작은 SolidJS를 선택했습니다.
어찌되었든 제가 제작하고자 하는 사이트는 정적 웹사이트이고, 정적 웹사이트에서 높은 성능을 달성하려면 적은 런타임 요소를 가지는 것이 매우 유리합니다. 그런 측면에서 Svelte
, SolidJS
를 후보군으로 두었는데요. Svelte의 철학과 여러가지 요소들은 분명 훌륭하지만 이전에 Svelte를 이용해서 숭실대학교 IT대학 사물함 예약 시스템을 개발하였을 때 양방향 바인딩과 같은 기본적 시스템이 개인적으로 너무 혼란스럽다고 생각해서 React의 Hook(SolidJS에선 Signal이라고 불리죠)과 같은 UDF(Unidirectional Data Flow; 단방향 데이터 흐름)가 이상적이라는 생각을 하게 되었습니다(이에 대한 자세한 생각은 이 글의 범위를 벗어나므로 추후 작성해 보겠습니다).
따라서 React와 유사한 API와 Svelte와 유사한 런타임 철학을 가지고 있는 SolidJS를 한번 선택해 보는 것이 유리하겠다는 생각을 하게 되었고, SolidJS를 이용해서 반응성 컴포넌트들을 개발하기로 결정했습니다.
제 블로그는 개발자로써의 제 자신을 표현하는 일이라고도 생각했기 때문에, 제 개발자로써의 이미지를 블로그에 담아보려 노력했습니다. 기본 레이아웃과 프로토타이핑 과정을 다음 글에 공유해 보겠습니다.