[STOCAT] vanilla-extract에서 CVA 패턴 쓰기 : @vanilla-extract/recipes 도입기

[STOCAT] vanilla-extract에서 CVA 패턴 쓰기 : @vanilla-extract/recipes 도입기

이 글은 STOCAT 프로젝트에서 디자인 시스템 토큰을 정리하면서 발견한 코드 개선 경험을 기록한 글이다. 발단 : styleVariants가 슬슬 불편해지기 시작했다이 프로젝트는 @vanilla-extract/css를 처음 도입하여, 스타일을 관리한다.컴포넌트에 여러 외형이 필요할 때는 styleVariants를 써왔는데, MarketCard 같은 컴포넌트에서 이런 식으로 작성했었다.// MarketCard.css.tsconst base = style({ flexShrink: 0, borderRadius: 16, backgroundColor: vars.color.role.background2,});export const layout = styleVariants({ horizontal: [bas..

  • format_list_bulleted 개발 일지/FrontEnd_프론트엔드
  • · 2026. 3. 3.
  • textsms
[STOCAT] vanilla-extract 타이포그래피 토큰, 3줄 -> 1줄로 줄이기

[STOCAT] vanilla-extract 타이포그래피 토큰, 3줄 -> 1줄로 줄이기

이 글은 STOCAT 프로젝트에서 디자인 시스템 토큰을 정리하면서 발견한 코드 개선 경험을 기록한 글이다.들어가며STOCAT 프로젝트에 vanilla-extract로 디자인 토큰 체계를 새로 구축하는 작업을 했다.색상 토큰(color.role.css.ts)과 타이포그래피 토큰(typography.css.ts)을 정의하고,기존 컴포넌트들에 순차적으로 적용하는 작업이었다.그런데 적용하다 보니 반복되는 패턴이 눈에 들어왔다.// 이게 7개 파일에 걸쳐, 최대 5군데에서 반복되고 있었다fontSize: vars.typography.body3.fontSize,fontWeight: vars.typography.body3.fontWeight,lineHeight: vars.typography.body3.lineHeig..

  • format_list_bulleted 개발 일지/FrontEnd_프론트엔드
  • · 2026. 2. 28.
  • textsms
[STOCAT] Tailwind CSS만 쓰던 나의 vanilla-extract 첫 도전기

[STOCAT] Tailwind CSS만 쓰던 나의 vanilla-extract 첫 도전기

이 글은 STOCAT 프로젝트에서 디자인 시스템 토큰을 정리하면서 발견한 코드 개선 경험을 기록한 글이다.들어가며처음 프론트엔드 스타일링을 접한 게 Tailwind CSS였다. 유틸리티 클래스 기반의 빠른 개발 속도에 만족하면서 쭉 써왔는데, 어느 순간 한 가지 불안이 생겼다."나는 CSS-in-JS 방식을 제대로 모른다." 실무에서는 styled-components, Emotion 같은 CSS-in-JS 라이브러리가 여전히 많이 쓰인다. 채용 공고에서도 이 기술 스택을 요구하는 곳이 적지 않다. Tailwind만 써본 입장에서는 styled.div 같은 문법도, ThemeProvider 패턴도 낯설었다. 이 갭을 메우고 싶었다.CSS-in-JS를 학습하기로 마음먹은 뒤, 여러 선택지를 조사하다가 van..

  • format_list_bulleted 개발 일지/FrontEnd_프론트엔드
  • · 2026. 2. 26.
  • textsms
외국인이랑 해커톤해서 2등한 썰 푼다 😆

외국인이랑 해커톤해서 2등한 썰 푼다 😆

이번 학기는 워낙 벌여놓은 일이 많다보니, 수습하기 바빠서 개인적인 공부할 시간이 많이 부족했다.그래도 진로를 웹 프론트엔드로 결정한 만큼, 공부했던 `React`를 써먹어 볼 좋은 기회가 어디 없나 기회만 엿보고 있었다 🤩..!그러던 중에 마침 좋은 기회를 발견하여 덜컥 신청했다.해커톤 자체가 내 포트폴리오나 이력서에 크게 도움이 될 것 같지 않지만, 요즘 해커톤 참여 자체가 너무 재밌다. 요즘 같은 고환율 시대에 총 상금이 8천 달러라니...?! 행사 공식 홈페이지https://aihackathon.gridge.co.kr/#schedule) SpoonOS & Scoop AI Hackathon aihackathon.gridge.co.kr 대략적인 행사의 정보Neo(네오) 블록체인 플랫폼 에서 Sp..

  • format_list_bulleted Career_커리어/Hackathon _해커톤
  • · 2025. 12. 28.
  • textsms