TIL 2022-12-04 기존 프로젝트 Astro, Unocss로 개편하기

현재 AstroJS, Unocss 세팅은 끝냈고 개발은 살짝해봤는데 AstroJS 너무 좋은거 같은 느낌이 든다?!

지금 캐릭터별 UI를 보여주는 부분은 없이 Sidebar 쪽만 구현해놨는데 그러니까 진짜 HTML만 내려오고 JS가 안내려오니까 너무너무너무 가벼움.

 

물론, 아직 Client Interaction이 들어가는 제일 중요한 메인 기능 개발을 안했기에 특히 더 가벼운 부분은 있겠으나, 그걸 뺴고 보더라도, Static Island인 경우에는 Hydration 코드가 아예 들어가 있지 않아서 훨씬 가볍긴 가벼운듯.

 

 

생각해보면 Interaction 필요한 부분은 총 3개,

 

FIrebase 로그인 하는 부분,

수정/삭제가 모달이 열리는 부분

모달에서 Firebase Edit, Delete 실행하는 부분.

 

이니까 사실 크게 클라이언트쪽에서 상호작용 할 거리가 없긴 함.

 

AstroJS 쓸까 말까 고민 많이 했었는데 엄청 맘에 든다.

 

 

Firebase Admin으로 서버쪽에서 값 내려주는건 이미 붙였고,

 

NextJS -> AstroJS로 마이그레이션에서 이제 해야하는건

 

테이블, 탭 컴포넌트, 모달, 구현,

Client쪽 Firebase 붙이기

FIrebase Auth 붙이기

반응형 지원

 

테이블나 탭 컴포넌트는 기존 코드 쓰기보다 뭔가 합성 컴포넌트형식으로 구현하는게 더 맞는거 같은데 Astro에서 이렇게 한 Best practice가 있는지 먼저 찾아봐야겠다.

 

 

 

 

Unocss 써보는데 확실히 개발 효율이 나오는거 같음. Astro나 Unocss나 기술 스텍 다 맘에 든당

 

Unocss에서 Pure CSS Icon도 지원해주는데

https://antfu.me/posts/icons-in-pure-css

Icons in Pure CSS

이거 일단 읽어봐야겠다