왜요?

지난번에 블로그 앱에 바닐라 익스트랙트를 적용하려고 했었는데... js로 구성된 앱을 ts로 마이그레이션하면서 D3 라이브러리로 구현한 그래프의 타입 설정이 잘 안됐습니다. 금방 해결할 수 있을 거라고 생각했는데, 하나를 고치면 다른 오류가 생기고 또 다른 오류가 생기고 계속 반복돼서! 이대로 가면 한 주 내내 이거만 붙잡고 있겠다 싶어서! 타입스크립트 숙련도를 더 키운 뒤에 재도전하기로 했습니다!!!

그럼 어디다 쓰게요?

제 포트폴리오에다 적용할겁니다!

테일윈드 => 바닐라 익스트랙트로

기존에는 스타일링에 Tailwind CSS를 사용하고 있었습니다. 인라인으로 스타일링하니까 확실히 편했지만 불편한 부분도 많더라구요. 대표적으로...

너무 어지러워!

인라인으로 편하게 스타일링하는 건 좋은데, 스타일링문이 눈에 엄청 거슬립니다! 코드 가독성이 떨어지는 것 같아요!

유지보수도 힘들어!

그리고 기존의 css 스타일링처럼 속성이 보기좋게 나열되는 게 아니라서, 어느 속성이 어디 적용되어있는지 알기 어렵습니다! 나중에 스타일을 변경할 때에도 한참 헤매야 되는 경우가 많았어요! 혼자 쓸 때도 이런데, 팀이랑 같이 쓰려면 테일윈드만으로 컨벤션을 하나 더 만들어야 하지 않을까 싶네요! (아닐수도 있음!)

키워드가 지맘대로야!!

이거는 '안좋다' 라기보단 '마음에 안드는' 점입니다! 왜 border-radius는 rounded인거죠? 왜 letter-spacing은 tracking인가요! css 속성들은 엄청 많고 앞으로도 이상한 것들 계속 생길텐데, 그 때마다 공식문서를 보면서 '이걸 테일윈드에선 뭐라고 하는지'를 배워야 합니다!

물론! 테일윈드에도 당연히! 강력한 장점들이 있습니다!

• 스타일링의 일관성 (프리셋으로 규정된 스타일을 사용하니까!)
• 빠르게 슉슉 만들 수 있음
• 충돌이 안난다! (row 레벨로 독립적으로 스타일링을 적용하니 다른 스타일과 충돌할 일이 없음!)
• 커버리지가 넓다! (진짜 마이너한 css 속성도 커버해주니 '내가 원하는 스타일이 테일윈드에선 없어서 적용 못함'같은 상황이 일어날 일이 거의 없음)

하지만... 제 포트폴리오는 그냥 뚝딱 만들어버리고 말 게 아니라, 계속 새로운 기술과 기능을 추가해가며 유지보수를 해 나갈 작정으로 만든 거라, 유지보수성과 가독성 면에서는 다른 방법을 찾는 게 맞다고 생각했습니다!

그럼 뭐 쓸까? CSS-in-Js?

테일윈드를 써 보기 이전에는 styled-components를 사용했습니다. 블로그 앱에서는 또 새로운 거 해보고 싶어서 emotion을 사용했구요. (사용법은 대체로 비슷함)
그리고 이번에는 CSS-in-Ts를 써 볼겁니다! Vanilla Extract!! 현재까지 바닐라 익스트랙트에 대해 알고 있는 바는 이러합니다.

• 런타임이 아닌 빌드타임에서 css를 처리하기 때문에 css-in-js보다 스타일 로딩이 빠름
• 개발단에서는 변경된 것만 다시 빌드해서 보여주기 때문에 스타일 변화를 확인하는 데 지연도 없음!
• '빌드타임에서' css를 처리하기 때문에 번들러에 추가 필요
  쓰기 전에 공식 문서를 한번 읽어보고, 테일윈드로 스타일링되어있는 부분을 하나하나 바닐라 익스트랙트로 바꿔가면서 마이그레이션해보려고 합니다! 위ㅣ시미 어 렄!!!