개냥이
close
프로필 배경
프로필 로고

개냥이

  • 분류 전체보기 (76) N
    • 개발 일지 (3)
      • FrontEnd_프론트엔드 (3)
      • BackEnd_백엔드 (0)
      • TroubleShooting_트러블슈팅 (0)
    • Study (45) N
      • Javascript (0)
      • Typescript (1)
      • React (1)
      • Node.JS (13) N
      • Python (11)
      • Java (16) N
      • SQL (3)
    • CodingTest (24)
      • 자료구조-알고리즘 (6)
      • BeakJoon (18)
      • Programmers (0)
    • Career_커리어 (3)
      • Hackathon _해커톤 (1)
  • 홈
  • Github
  • 태그
  • 방명록
[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
  • navigate_before
  • 1
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (76) N
    • 개발 일지 (3)
      • FrontEnd_프론트엔드 (3)
      • BackEnd_백엔드 (0)
      • TroubleShooting_트러블슈팅 (0)
    • Study (45) N
      • Javascript (0)
      • Typescript (1)
      • React (1)
      • Node.JS (13) N
      • Python (11)
      • Java (16) N
      • SQL (3)
    • CodingTest (24)
      • 자료구조-알고리즘 (6)
      • BeakJoon (18)
      • Programmers (0)
    • Career_커리어 (3)
      • Hackathon _해커톤 (1)
최근 글
인기 글
최근 댓글
태그
  • #자료구조
  • #백준
  • #Python
  • #TypeScript
  • #알고리즘
  • #프론트엔드
  • #프로그래머스
  • #자료형
  • #코딩테스트
  • #파이썬
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바