[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 프로젝트에서 디자인 시스템 토큰을 정리하면서 발견한 코드 개선 경험을 기록한 글이다.들어가며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였다. 유틸리티 클래스 기반의 빠른 개발 속도에 만족하면서 쭉 써왔는데, 어느 순간 한 가지 불안이 생겼다."나는 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

[TypeScript 정리] Section 02 — 타입스크립트 기본 완벽 정리

이 글은 이정환 강사님의 한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의를 참고하여 개념을 정리했습니다!0. 기본 타입이란?TypeScript의 기본 타입(Basic Types)은 언어가 기본적으로 제공하는 내장 타입을 의미합니다.number, string, boolean, null, undefined 등이 있고any, void, never, unknown처럼 TypeScript에서만 제공되는 타입들도 있습니다.이 타입들은 단순히 나열된 것이 아니라, 서로 부모–자식 관계를 이루는 계층 구조를 가지고 있습니다. 1. 원시 타입과 리터럴 타입원시 타입 (Primitive Type)한 번에 하나의 값만 담을 수 있는 기본 타입입니다.객체나 배열처럼 여러 값을 동시에 저장하는 구조가 아닙니다...

• format_list_bulleted Study/Typescript
• · 2025. 11. 7.
• textsms